Suggest an editImprove this articleRefine the answer for “What is the critical rendering path (CRP)?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**The critical rendering path (CRP)** is the sequence of steps the browser goes through to turn HTML, CSS, and JS into pixels on the screen. **Key point:** the shorter and simpler this chain, the faster the site "comes to life".Shown above the full answer for quick recall.Answer (EN)Image**The critical rendering path (CRP)** is the sequence of steps the browser goes through to turn HTML, CSS, and JS into pixels on the screen. It covers everything **needed for the first paint of the page**, and it determines how quickly the user sees anything at all. --- ## Order of steps 1. **Loading HTML** The browser starts loading the HTML document. 2. **Building the DOM** The HTML is parsed into a tree of objects (Document Object Model). 3. **Loading and parsing CSS** All CSS files are also loaded and turned into the CSSOM (CSS Object Model). Until the CSS is loaded, rendering is blocked. 4. **Creating the render tree** The DOM and CSSOM are combined into a tree of visual objects. 5. **Layout (or Reflow)** The sizes and positions of all elements are calculated. 6. **Paint** Each node is assigned a visual representation: color, font, background, and so on. 7. **Composite** Everything is assembled into a frame and sent to the screen. --- ## Why this matters - Anything that blocks these steps (large CSS, synchronous JS, fonts) slows down the first render. - Optimizing the critical path means minimizing the time to first useful content (FCP, LCP). --- ## Conclusion The critical rendering path is the chain from receiving HTML to the first visible pixel. The shorter and simpler this chain, the faster the site "comes to life".For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.