Awesome Web Performance

A list of Web Performance Optimization techniques, tools and resources.

Table of Contents

• Table of Contents
• Articles
• Talks / Videos
• Case Studies
• Frameworks
  • Qwik
• Podcasts
  • Performance Specific
  • Performance Episodes
• Blogs
• Social Media
• Courses
• Books
• Conferences
• Tools
  • Analyzers
  • Bundle Analyzers
  • Benhcmarking / Load Testing
  • Image Optimization
  • Resources
  • Tracers
• Web Vitals
• Specs
• Stats
• Other Awesome Lists

Articles

• 2015
  • Rendering Performance – Web Fundamentals — Browser Rendering, Browser Layout.
  • Tasks, microtasks, queues and schedules — JavaScript, Event Loop, Microtasks, Tasks.
• 2016
  • The Right Way to Bundle Your Assets for Faster Sites Over HTTP2 — Bundling, Network, HTTP, HTTP2.
• 2020
  • Maximally optimizing image loading for the web — Images, Lazy Loading, HTML.
• 2021
  • Overview of the RenderingNG architecture — Chrome, RenderingNG, Browser Internals.
• 2022
  • Prerender pages in Chrome for instant page navigations — Chrome, Page Load, Prerender, Prefetch.
• 2023
  • The truth about CSS selector performance — CSS, Microsoft, Selector, DOM.
  • Using :is() in complex selectors selects more than you might initially think — CSS, Selectors.
  • Fixing INP with a VIEWPORT tag – INP, WebVitals, Lighthouse, Viewport, Mobile
  • How large DOM sizes affect interactivity, and what you can do about it – Large DOM sizes have more of an effect on interactivity than you might think. This guide explains why, and what you can do.
  • Speeding up V8 heap snapshots — Chrome, V8, Heap snapshots
• 2024
  • Object Structure in JavaScript Engines – JavaScript, V8, Object Structure, Memory Management, Chrome
  • Optimizing Javascript for fun and for profit – JavaScript, Optimization, Micro-Optimization

Talks / Videos

• 2014
  • What the heck is the event loop anyway? — Event Loop, JavaScript, Browser Internals. JavaScript programmers like to use words like, “event-loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency”. We say things like “don’t block the event loop”, “make sure your code runs at 60 frames-per-second”, “well of course, it won’t work, that function is an asynchronous callback!” If you’re anything like me, you nod and agree, as if it’s all obvious, even though you don’t actually know what the words mean; and yet, finding good explanations of how JavaScript actually works isn’t all that easy, so let’s learn! With some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs.
• 2018
  • Архитектура и производительность фронтенда — Architecure, SSR, Island Architecture, Yandex (Russian Only).
• 2019
  • Anatomy of the browser 101 (Chrome University 2019) — Chrome, Chrome University, Browser Internals. Architecture of Chrome, including the process model, layering of components, and the directory structure.
  • Anatomy of the browser 201 (Chrome University 2019) — Chrome, Chrome University, Browser Internals. Here we explore the major objects and common patterns in the Chromium codebase.
  • Life of a navigation (Chrome University 2019) — Chrome, Chrome University, Browser Internals. Alex’s talk describes the steps taken in Chrome to navigate from one web page to another. It covers the various parts, processes, and steps taken in making it happen.
• 2020
  • Life of a Pixel — Chrome, Blink, Browser Internals, Browser Rendering. A tour of the internals of Chromium's rendering architecture, tracing the steps in the pipeline from web content to display pixels. Concretizes high-level concepts with pointers to important classes and data structures in the codebase.
  • Life of a Script — Chrome, V8, Blink, Browser Internals, JavaScript. The design of V8 and current ongoing work, garbage collection and how V8 fits into Blink and Chrome, and how WebAssembly fits into that picture.
• 2021
  • From 'Fully Loaded' to Core Web Vitals: Understanding the Evolution of Performance Metrics — WebVitals, RUM, Performance Metrics. In this talk, Patrick and Tim explore how we got to this point, the metrics we’ve loved along the way, and how the new core web vital metrics are seeking to provide some stability to the picture. They get into the weeds about how each metric is reported, what they’re good at, and a few shortcomings and gotcha’s to be aware of.
• 2022
  • CSS runtime performance | Nolan Lawson — CSS, Browser Rendering. On the client side, we pay a lot of attention to JavaScript performance. But relatively little time is spent on CSS, even though style and layout calculation can impact runtime performance as well. In this talk, I'd like to demystify some aspects of CSS runtime performance, exploring what parts the browser has already optimized, and what we as web developers can do to speed up styling.
  • Progressively loading images – HTTP203 Show, Images, Progressive Images.In this episode, Jake (that's him on the left) and Surma (that's the other one) chat about how the different image formats load, and what you can do to make them feel faster.
• 2023
  • Intro to Runtime Performance in the Chrome DevTools Performance Panel with Annie Sullivan — Chrome, Chrome Dev Tools, Performance Profiling, Begginer Level. Annie Sullivan, Software Engineer on Google's Chrome Web Platform Team, is digging into runtime performance in the Chrome DevTools Performance Panel.
  • Копаемся под капотом браузера, как работает event loop и compositing, Сергей Чикуенок — Chrome, Chrome Dev Tools, Rednering, Layout, Composition, Advanced Level (Russian Only).

Case Studies

• 2021
  • RFC Update theme shape — CSS, CSS Variables, CSS Variables Performance, Microsoft.
• 2023
  • How Carpe achieved record-breaking sales by focusing on performance optimization
  • How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile – Bfcache is a browser optimization that improves the browsing experience for users by enabling instant back and forward navigation. Yahoo! JAPAN News saw significant user experience and business improvements after increasing their bfcache hit rate, including a 9% increase in ads revenue.

Frameworks

Qwik

• 2023
  • Speculative Module Fetching: a Modern Approach to Faster App Interactivity — Qwik, JavaScript, Performance, Builder.io, Interactivity, Lazy Loading, Module Fetching, Resumability.

Podcasts

Performance Specific

• Catching Up With Web Performance

Performance Episodes

• 2023
  • JS Party: Web development's lost decade

Blogs

• https://calendar.perfplanet.com/
• https://web.dev/tags/performance/
• https://developer.chrome.com/tags/performance/
• https://v8.dev/
• https://csswizardry.com/
• Infrequently Noted

Social Media

• Addy Osmani
• Alex Russell
• Dan Shappir
• Harry Roberts
• Ivan Akulov
• Patrick Meenan
• Stoyan Stefanov
• Tim Kadlec
• Yoav Weiss

Courses

• Lightning-Fast Web Performance — Free course from WebPageTest. Beginner level.

Books

TBD

Conferences

• https://twitter.com/perfnowconf

Tools

Analyzers

• Lighthouse — Automated auditing, performance metrics, and best practices for the web.
• PageSpeed Insights — Lighthouse as a Service.
• WebPageTest.org — Web Performance and Optimization Test.
• RequestMap — Rapidly identify what third-parties are on your site, where your transmitted bytes are coming from and how slow your domains are!
• Capo — Visualize the optimal ordering of elements on any web page.

Bundle Analyzers

• source-map-explorer — Analyze and debug space usage through source maps.
• BundlePhobia — Find the cost of adding a npm package to your bundle.
• Webpack Bundle Analyzer — Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
• Whybundled — Answers the question – Why the hell is this module in a bundle?
• Statoscope — Statoscope is a toolkit to analyze and validate webpack bundle.
• Rsdoctor – Analyzer for Rspack & Webpack. Visualize the building process.

Benhcmarking / Load Testing

• Yandex Tank — Load and performance benchmark tool.
• JSBen.ch — Online JavaScript benchmarking tool.
• Perf.link — Benchmarking tool for JavaScript.
• Browserbench – Benchmarks for browsers: Speedometer, MotionMark, JetStream2.

Image Optimization

• Squoosh — Image compression app.
• Squoosh CLI — Squoosh CLI is an experimental way to run all the codecs you know from the Squoosh web app on your command line using WebAssembly.
• ImageOptim CLI — Make optimisation of images part of your automated build process.
• ImageOptim — ImageOptim optimizes images without losing quality or any metadata.
• SVGO — Node.js tool for optimizing SVG files.

Resources

• CSS Triggers – A list of CSS properties that can cause: Layout, Paint or Composite
• JS Triggers – A list of JavaScript DOM APIs that can cause Reflow / Force layout
• WebPerf Snippets – A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools.
• Latency numbers every frontend developer should know – A list of latency numbers every frontend developer should know.

Tracers

• Indicium: V8 runtime tracer tool — V8, Browser Internals, Tracer.
• Trace Cafe — View and share Chrome DevTools traces.

Web Vitals

• Web Vitals Changelog — Changelog for Web Vitals Metrics.

Specs

• Web Performance Working Group — The mission of the Web Performance Working Group is to provide methods to measure aspects of application performance of user agent features and APIs.

Stats

• HTTPArchive — HTTP Archive periodically crawls the top sites on the web and record detailed information about fetched resources, used web platform APIs and features, and execution traces of each page. And then crunches and analyze this data to identify trends.
• WPO Stats — Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.

Other Awesome Lists

• https://github.com/davidsonfellipe/awesome-wpo (last updated 3 years ago).