Definition
This is the concept to reach for when you want to understand and improve questions like "Why isn't the page visible right away — why do I see a brief white screen?" and "What should I cut so the first screen appears faster?"
The Critical Rendering Path (CRP) is the ordered sequence of minimum steps a browser must go through to turn the HTML, CSS, and JavaScript it received into actual pixels on screen. If a slow task (a render-blocking resource) sits in this path, the first screen appears that much later.
Why it matters
Even for the same page, some sites show content the instant they open, while others display a blank screen for several seconds. This difference usually comes from how many resources the browser must wait for before painting the first pixel.
The browser will not paint the screen before it has fully received and parsed the CSS (because painting with unfinalized styles would draw the wrong thing), and when it encounters a plain <script> in the <head>, it stops HTML parsing until that script is fetched and executed. So you need to trace "which resource is holding up the first screen" through the CRP stages in order to decide what to defer, inline, or preload.
How it works
The browser goes through roughly the following order.
- Build the DOM (Document Object Model — the browser's tree representation of HTML) — parse the HTML into a node tree.
- Build the CSSOM (CSS Object Model — the tree representation of CSS) — parse the CSS into a tree of style rules to apply to each element.
- Build the Render Tree — combine the DOM and CSSOM to gather only the elements that will actually be visible (e.g., excluding
display: none) along with their styles. - Layout (also called reflow) — compute the exact position and size each element will occupy on screen.
- Paint — fill the computed elements with pixels (color, text, images). A Composite step that merges multiple layers may follow.
The key point is that there is an order. You cannot build the Render Tree before the CSSOM is complete, and without the Render Tree you cannot proceed to Layout/Paint. That is why CSS is treated by default as a render-blocking resource (a resource that blocks painting until it is fully received). A plain <script> is a parser-blocking resource that stops parsing.
Practical application
- Secure only the CSS truly needed for the first screen first. Lazy-load the rest of the CSS and JS.
- Add
defer(does not block HTML parsing; runs in order after document parsing finishes) orasync(does not block; runs as soon as fetched) to<script>as appropriate, to avoid parser blocking. - Preload only the hero image and key fonts used in the first screen (above-the-fold — the area visible without scrolling).
- Split large libraries that aren't needed for the first screen with dynamic import and load them later.
Trade-offs
- Inlining CSS can remove one request and speed up first paint, but you give up file cache reuse — it's safest to apply this only to the minimal first-screen CSS.
asyncscripts run quickly but their execution order is not guaranteed. If order matters, usedefer.- Preloading many resources can steal bandwidth from truly important resources, so preload only what is genuinely needed for the first screen.
When not to use
- CRP optimization targets "time to first-screen display." If the first screen is already fast enough and the bottleneck is data requests or runtime JavaScript, look there rather than tuning CRP stages further.
- When the first-screen content inherently depends on client data and fills in late, reducing CSS/JS blocking alone may not change the perceived experience much.
Common mistakes
- Loading all CSS at once in the
<head>, so styles unrelated to the first screen also block rendering. - Omitting
defer/asyncfrom a plain<script>in the<head>and not noticing that HTML parsing stalls while the script is fetched. - Creating a pattern where Layout is repeatedly recomputed (layout thrashing), keeping rendering slow even after first paint.
Related concepts
- largest-contentful-paint — a representative metric that benefits from a shorter CRP (the moment the largest element is painted)