Glossary

Critical Rendering Path

The Critical Rendering Path (CRP) is the sequence of steps a browser takes from receiving HTML to painting the first pixels on screen. Optimising the CRP directly affects LCP and Time to First Paint.

Steps

Load HTML → build DOM
Load CSS → build CSSOM
DOM + CSSOM → Render Tree
Layout (reflow) — calculate sizes and positions
Paint — draw pixels

Render-blocking resources

CSS and synchronous JS block Render Tree construction. The browser paints nothing until they finish loading.

Optimisations

Critical CSS inline in <head> — above-the-fold styles load without a round-trip
<link rel="stylesheet" media="print"> — non-critical CSS does not block rendering
<script defer> or async — JS does not block HTML parsing
<link rel="preload"> — load critical resources earlier