Blog

The Critical Rendering Path: How HTML, CSS and JavaScript Reach the Screen and What Blocks Rendering

The critical rendering path is the longest chain the browser waits on before the first paint; stylesheets in head block rendering and scripts without async/defer block the parser, but not every blocking resource is on the critical path. In the waterfall of Bookstore's home page we measure that fixing the font CSS and analytics does not change FCP because the real chain is main.js, then cut FCP from 2.35 s to 1.10 s with response compression and analytics after load.