Course 14 · Craft
Performance
Fast, and provably so.
The metrics that matter, measured rather than guessed — and the handful of changes that move them, from the hero image to the query behind it.
0 of 16 lessons finished — nothing yet
The syllabus
16 lessons,
in the order they build on each other.
What "fast" means
Three numbers a user actually feels, and why the average of them is the wrong one to read.
Measuring
Lab against field, percentiles, and the Performance API that is already in the page.
Largest contentful paint
What delays the biggest thing on the screen, in the order it is usually worth fixing.
Layout shift
Why the page jumps, what the score is made of, and the attribute that prevents most of it.
Interaction latency
Long tasks, the one thread, and how to answer a tap in under two hundred milliseconds.
Images
The single biggest win on most pages: format, size, loading and priority.
Fonts
Invisible text, the swap that shifts the layout, and how to have neither.
The cost of JavaScript
Bytes, parse, execute — and splitting the bundle by what a page actually needs.
Rendering
Layout thrashing, the compositor, and a list of ten thousand rows that scrolls.
The network
Compression, caching, preconnect and priority — the wire, revisited for speed.
The server
Time to first byte: the query, the cache, and the N+1 that makes a page crawl.
Memory
Leaks that make a long session slow: detached nodes, listeners and caches that never forget.
Perceived speed
Skeletons, optimistic updates and the difference between fast and feeling fast.
Budgets
A number the build enforces, so the page does not get slower one commit at a time.
Reading a profile
The flame chart, the waterfall and the three questions that find the cause.
Practice: make it fast
One slow page, modelled. Find the four problems, fix them, and prove the numbers moved.
Keep going
The other courses.
HTML
The document, the elements and the meaning behind them. Everything else on the web is layered on top of this.
CSS
Selectors, the box model, layout with flexbox and grid, and motion that has a reason to move.
JavaScript
Values, functions, the DOM, events and asynchronous work — written so you can debug it later.