A page takes four seconds to show anything useful. Walk me through what happens between the HTML arriving and the first paint, and what blocks it.

The parser builds the DOM as HTML streams in, but a stylesheet blocks rendering because the browser will not paint with unstyled content, and a classic script without defer or async blocks the parser entirely. Once CSS and blocking scripts are done, the browser builds the render tree, lays out, paints and composites. The usual culprits are render blocking CSS, synchronous scripts in the head and late discovered fonts or hero images.

As the HTML streams in the parser builds the DOM incrementally, and in parallel the preload scanner looks ahead for images, scripts and stylesheets so it can start fetching early. CSS is render blocking, because the browser will not paint content it might have to restyle a frame later, so a slow stylesheet holds up first paint even if the DOM is ready. A classic script tag with no defer or async is worse, since it blocks parsing entirely while it downloads and runs. Once styles are in, the browser builds the render tree, does layout, paints and composites. When I get a four second first paint, my first three checks are whether any script in the head is blocking, whether the CSS is one enormous file that could be split into a critical inline chunk, and whether the LCP image is discoverable in the HTML rather than injected by JavaScript. On the last site I fixed, adding a preload for the hero image and moving a tag manager script to defer took about 1.6 seconds off LCP on 4G.