HTMLCSSJavaScriptIntermediate~4h

Browser Rendering

The pipeline, not the folklore

Every rule you have heard about front-end performance is a mechanism with its explanation removed. Put the explanations back: what the browser does between bytes and pixels, which stages a change re-runs, what makes it run layout twice in one frame, and how each of the three numbers a page is judged on is calculated.

Start this project See the modules

Modules: 5
Drills: 10
Build steps: 4
Time: ~4h

Walk out able to

Say what a change will cost before you make it — and, when a page is slow, name the stage that is doing the work rather than trying things.

What you work on

Bytes to the first frame

Two trees, what blocks what, and when scripts run.

Layout, paint, composite

Which stage a change re-runs, and what it costs.

The read that forces reflow

Count them in a handler, then batch them away.

LCP, INP and CLS

Computed from their definitions, then built and measured.

The pitch

What you practise, and what you leave with

A page broken in three named ways — a late hero, a thrashing handler, a width animation — instrumented, repaired, and proved by a change in a count.

You will practise

Which stage a change re-runs, and the frame’s cost
What blocks the parser, the paint, or neither
Counting forced layouts in a handler
Computing CLS, and taking an LCP apart

Afterwards you can

Name the stage any change re-runs
Spot the read that forces a reflow
Compute a page’s CLS by hand
Attach an optimisation to one metric

Modules

5 modules, 26 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
From bytes to the first frame
~48 min
Say what the browser is doing before anything is visible, and what is holding it up.
- LessonWhy the rules you know keep failing4 min
- LessonTwo trees, and one of them is the DOM7 min
- LessonTwo ways a resource gets in the way8 min
- DrillCount what actually generates a box10 min
- DrillSay what each tag is holding up9 min
- DrillPut five scripts in the order they run10 min
2
What a change costs
~39 min
Name the earliest stage any change re-runs, and add up what the frame costs.
- LessonSort any change into one of three bands9 min
- LessonRestore the clause the advice drops8 min
- DrillName the earliest stage a change re-runs11 min
- DrillAdd up what a frame actually costs11 min
3
Making the browser do it twice
~37 min
Find the line that forces a second layout inside one frame, and move it.
- LessonFind the read that forces a reflow9 min
- LessonBatch the reads, and count what is left7 min
- DrillTell a measurement from a lookup8 min
- DrillCount the forced layouts in a handler13 min
4
The three numbers
~53 min
Compute each vital from its own definition, and say which one a change moves.
- LessonName the three numbers and their limits5 min
- LessonSplit an LCP into its four subparts6 min
- LessonSay which third of INP is your handler4 min
- LessonScore a shift, then pick the real fix8 min
- DrillCompute a shift score, and a page’s CLS11 min
- DrillTake an LCP apart10 min
- DrillAttribute a change to one number9 min
5
Break it on purpose, then fix it
~58 min
Build a page with three known faults, measure two of them, and make the counts change.
- Build stepBuild a page whose hero lands late8 min
- Build stepWire in the two faults that are code9 min
- Build stepWatch the page shift, and count it14 min
- Build stepMake the handler report what it measured13 min
- LessonWrite the budget this page is held to14 min