What is the critical rendering path, and how do you optimise a page's first paint?

The critical rendering path is everything the browser must do between receiving HTML and painting pixels:

• Parse HTML into the DOM.
• Parse CSS into the CSSOM.
• Combine them into the render tree.
• Layout — compute the geometry of every box.
• Paint and composite the layers to the screen.

The two blockers: CSS is render-blocking, because the browser will not paint until it knows the styles. A synchronous <script> in the head is parser-blocking, because it can rewrite the document.

How to make first paint faster:

• Inline the small amount of CSS needed for above-the-fold content, and load the rest asynchronously.
• Add defer to scripts so they download in parallel and execute after parsing, or async for independent third-party scripts.
• Preload the LCP image and the primary font, and use font-display: swap so text is never invisible.
• Serve modern image formats at the right size, with width and height set so nothing shifts.
• Reduce JavaScript. It is almost always the largest and most expensive resource on the page.