How the browser renders
DOM, CSSOM, layout, paint, composite and Core Web Vitals.
Updated
What the browser does with HTML
The browser turns text (HTML + CSS + JS) into pixels. The steps are called the critical rendering path:
- Parse HTML → build the DOM (the element tree).
- Parse CSS → build the CSSOM (the style tree).
- Render tree = DOM + CSSOM, visible elements only (no
display: none, no<head>). - Layout (reflow) — compute the position and size of every element.
- Paint — draw colors, text, shadows, images.
- Composite — combine the layers and show them.
What blocks rendering
| Resource | Blocks? | Why |
|---|---|---|
<link rel="stylesheet"> |
rendering | without CSS the page would "jump" when styles apply |
<script src> (plain) |
HTML parsing | the script may change the DOM, so the browser stops |
<script defer> |
no | downloads in parallel, runs after parsing, in order |
<script async> |
almost no | runs as soon as it downloads, in any order |
<script type="module"> |
no | behaves like defer |
| images, fonts | no | but can cause layout shift |
The rule: CSS in <head>, JS with defer / type="module". Next.js does this for you.
Layout, paint, composite — what it costs
When you change an element's style, the browser redoes the steps from a certain point onward:
| You change | Redone | Cost |
|---|---|---|
width, height, margin, padding, top, left, font-size |
layout → paint → composite | expensive |
color, background, box-shadow |
paint → composite | medium |
transform, opacity |
composite only | cheap — runs on the GPU |
That's why animations use transform and opacity, not left or width.
Core Web Vitals
The metrics Google (and users) judge speed by:
| Metric | Measures | Good |
|---|---|---|
| LCP — Largest Contentful Paint | how long until the main element appears | < 2.5s |
| INP — Interaction to Next Paint | how fast it reacts to a click/key | < 200ms |
| CLS — Cumulative Layout Shift | how much the content "jumps" | < 0.1 |
How to improve them: less JS on the client (Server Components), next/image with dimensions (against CLS), next/font (no font jump), lazy-loading heavy code. Details in Web performance.
Summary
- HTML → DOM, CSS → CSSOM, then layout → paint → composite.
- CSS blocks rendering, plain scripts block parsing; use
defer/module. - Animate only
transformandopacity. - LCP, INP, CLS = speed as the user experiences it.