Critical Rendering Path, animated

Step through the journey from network to pixels. Each stage links to its corresponding visualizer.

Step 1 of 8

Network & Fetch

Parse headers, content-type, encoding. Streaming response body to the parser.

Network & Fetch

HTML Tokenization

DOM + CSSOM

Render Tree & Layout

Paint & Composite

GPU Pipeline

JS Engine & Event Loop

DevTools & Tracing