12 experiments · 4 tracks
Experiments
Each one starts with a question, lets you change a variable and watch the browser respond, then explains the mechanism and the trade-off. They’re independent, so start anywhere. These routes are suggestions.
Where to start
- New to web performance 01 The Request Queue → 02 Images → 05 Critical Rendering Path then try the challenge
- Frontend developer 02 Images → 04 Fonts → 03 JavaScript → 10 CSS → 05 Critical Rendering Path
- Backend or ops 01 The Request Queue → 06 HTTP Caching → 07 Service Workers → 08 Resource Hints → 11 Instant Navigation
- Already measuring 09 Third-Party Scripts → 12 Lab vs Field and the challenge
Network
How bytes get to the browser, and how to need fewer of them.
-
01
The Request Queue
Why isn’t loading 30 images just 30 requests?
Connection limits, DNS, TCP, TLS and what HTTP/2 and HTTP/3 change. The “six at once” rule, taken apart.
-
06
HTTP Caching
Why does a repeat visit sometimes still wait on the network?
Cache-Control, validation, 304s, immutable files and CDNs, plus what compression does and doesn’t change.
-
07
Service Workers
What happens when you put a programmable proxy between the page and the network?
Install, activate and update; cache-first, network-first and stale-while-revalidate; offline, and the stale-cache trap.
-
08
Resource Hints
Preload, prefetch, preconnect: which one, and when?
The hints and priorities compared, including fetchpriority and Early Hints. When each helps and when it competes.
-
11
Instant Navigation
How can the next page load before you click?
Back/forward cache, prefetch and prerender with Speculation Rules, and what can go wrong.
Assets
What you send: images, fonts, JavaScript and everyone else’s scripts.
-
02
Images
What does the browser do with a 2.4 MB hero?
Formats, srcset, lazy loading, priority and sprite sheets, including when a sprite sheet is the wrong call.
-
04
Fonts
Why does your page feel broken for half a second?
FOIT, FOUT, font-display, preload, subsetting and variable fonts, compared side by side.
-
03
JavaScript
Why is a kilobyte of script dearer than a kilobyte of image?
Download, parse, compile, execute. Watch long tasks block the main thread and swallow a tap.
-
09
Third-Party Scripts
Who else is using your main thread?
Add analytics, ads and chat widgets one at a time and watch blocking time, layout shift and bytes grow.
Rendering
What the browser does with it once it has arrived.
-
05
Critical Rendering Path
Why can’t the browser just show the page?
HTML to DOM, CSS to CSSOM, render tree, layout, paint, composite. Add a blocking resource and watch it stall.
-
10
CSS
Why can 200 KB of CSS cost more than 200 KB of images?
Selector matching, style recalculation, content-visibility and containment.
Measuring
Knowing whether any of it worked.
-
12
Lab vs Field
Why does my 95 score not match what users feel?
A distribution of real visits, percentiles, Core Web Vitals thresholds, and how a single lab run misleads.