The Browser Rendering Pipeline, Explained
The six stages from HTML to pixels — plus reflow, the critical rendering path, and Core Web Vitals — to build a clear mental model of web performance.
The Browser Rendering Pipeline
Turning HTML text into pixels on screen is called the rendering pipeline. This section walks through each stage and where performance costs appear.
The browser goes through roughly six stages. It parses HTML into the DOM, parses CSS into the CSSOM, then combines them into the render tree. Layout (position/size), paint (filling pixels), and compositing follow.
The six stages from HTML to pixelsReflow and Repaint
How much a screen change costs depends on which stages re-run.
Reflow happens when a change affects an element's size or position. Because the following paint and compositing also re-run, it is among the most expensive operations.
Web Performance Metrics
Metrics that put a number on the performance users actually feel.
LCP, CLS, and INP are the three core metrics.