What is the critical rendering path and how do you optimize it?

The critical rendering path is the sequence of steps the browser takes from receiving HTML bytes to displaying pixels on screen.

Steps:

1. HTML → DOM — parse HTML, build Document Object Model.
2. CSS → CSSOM — parse CSS (render-blocking by default), build CSS Object Model.
3. DOM + CSSOM → Render Tree — combine visible elements with computed styles.
4. Layout — calculate exact position and size of each element.
5. Paint — rasterize pixels to layers.
6. Composite — merge layers and push to screen.

Optimization techniques:

• Eliminate render-blocking CSS — inline critical CSS; load non-critical CSS async (media="print" onload="this.media='all'").
• Defer non-critical JS — use defer or dynamic import to keep JavaScript from blocking parsing.
• Reduce CSS complexity — deep selectors slow CSSOM construction and style recalculation.
• Minimize DOM size — large DOMs slow layout; avoid rendering hidden off-screen content.
• Use CSS transforms for animation — transform/opacity run on the compositor thread without triggering layout.