What is the critical rendering path?
Answer
The critical rendering path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen. Steps: 1. HTML Parsing: browser parses HTML and builds the DOM tree. 2. CSS Processing: parses CSS into the CSSOM tree. CSS is render-blocking — the browser waits for all CSS to download and parse before rendering. 3. JavaScript Execution: parser-blocking scripts pause HTML parsing. All scripts must execute before the browser can continue building the DOM. 4. Render Tree Construction: combines DOM + CSSOM, excluding invisible elements. 5. Layout: calculates each element's geometry (position, size). 6. Paint: fills pixels for each element. 7. Compositing: layers are combined and displayed. Optimizing the critical path: minimize render-blocking CSS (inline critical CSS), defer non-critical JavaScript, use async/defer on script tags, remove unused CSS, preload critical resources. The goal is to get content visible as fast as possible by shortening the critical path.