Middle
What is the critical rendering path of web pages?
sobes.tech AI
Answer from AI
The Critical Rendering Path (CRP) is the sequence of steps that the browser performs to convert HTML, CSS, and JavaScript into pixels displayed on the screen. Optimizing CRP can speed up content rendering and improve the time to interactivity of the page.
Main stages of CRP:
- Building the DOM (Document Object Model): The browser parses HTML code and creates a tree structure representing the page content.
- Building the CSSOM (CSS Object Model): The browser parses CSS rules (from
<style>tags or external CSS files) and creates a tree structure representing styles for each DOM element. CSS is a blocking resource for rendering, as the browser cannot build the Render Tree without style information. - Building the Render Tree: Combining the DOM (only visible nodes) and CSSOM. This tree contains all visible elements on the page and their corresponding styles ready to be rendered.
- Layout (Reflow): The browser calculates the exact position and size of each element on the page.
- Paint: The browser converts each Render Tree element into actual pixels on the screen.
- Composite: The browser combines the painted layers into the final image.
Render-blocking resources (such as CSS and synchronous JavaScript in the <head>) increase CRP build time. Optimizing CRP involves minimizing or asynchronously loading blocking resources, as well as prioritizing the loading of critical content (above the "fold" line).