Web development and performance
What is Critical rendering path?
The critical rendering path is the sequence of steps a browser must complete before it can paint anything: fetch the HTML, fetch and parse blocking CSS and JavaScript, build the render tree, lay out, paint. Anything on that path delays every visible pixel.
Also called: render blocking · critical path
What sits on it by default
- Stylesheets in the head, which block rendering entirely until fetched and parsed
- Synchronous scripts, which block HTML parsing where they appear
- Fonts referenced by CSS, discovered only after the CSS is parsed
- Anything the above depends on, recursively
Shortening it
- Inline the small amount of CSS needed for the first screen, load the rest asynchronously
- Defer or async every script that is not required to paint
- Preload the one font the first heading needs, and no more
- Self-host fonts so there is no extra DNS lookup and connection to a third party
The pathological case
A client-rendered page puts everything on the critical path: nothing paints until the bundle downloads and executes, and the fonts are not even discovered until after that. Four sequential steps before a single pixel, which is how a page reaches a nine-second LCP without any file being large.
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.