Critical rendering path (CRP) is the core process for the browser to render a page for the first time, which directly affects the loading speed. It includes six steps: parsing HTML, building a DOM tree, parsing CSS, building a CSSOM tree, generating a rendering tree, layout, drawing and compositing layers. CSS plays a key role in it, and because of its blocking rendering characteristics, it must wait until the CSSOM is completed before the subsequent process can be continued. Optimized CSS improves CRP performance by streamlining critical CSS and inlining, splitting compressed files, separating styles with media queries, avoiding complex selectors, etc., thereby speeding up first-screen loading.

The loading speed of web pages directly affects the user experience, and the Critical Rendering Path (CRP) is the core process that determines the speed of the first rendering of the page. Simply put, CRP is the entire process of a browser starting from receiving HTML, CSS, and JavaScript files to finally drawing pixels on the screen. Among them, CSS plays an important role in this process. It not only affects the style, but also directly affects the timing and performance of page rendering.

What is the critical rendering path?

The key rendering path includes several main steps: parsing HTML to build a DOM tree, parsing CSS to build a CSSOM tree, merging the two to generate a rendering tree, layout (Layout), drawing (Paint), and finally the composite layer is displayed on the screen.

In this process, CSS is a resource that blocks rendering . That is to say, the browser must wait until the CSSOM is built before the rendering tree can be built and subsequent layout and drawing will continue. This means that if CSS loads or parses too slowly, the user will see a blank page until everything is ready.

How does CSS affect critical rendering paths?

The impact of CSS on CRP is mainly reflected in the following points:

• Blocking First Rendering : As mentioned earlier, CSS is a render blocking resource. Without a full CSSOM, the browser cannot build a render tree.
• Impact critical path length : The larger and more complex the CSS file, the longer the parsing time will be, thus delaying rendering.
• The more style rules, the more time-consuming the calculation : complex CSS selectors and a large number of style rules increase the build time of the CSSOM.

Therefore, optimizing CSS has become an important means to improve the first-time page loading experience.

How to optimize CSS to improve critical rendering paths?

To reduce the negative impact of CSS on CRP, the following practical measures can be taken:

• Simplify key CSS

  • Extract the critical CSS required for the first screen inline into HTML to avoid additional requests.
  • The remaining non-critical CSS can be loaded asynchronously or delayed.

• Splitting and compressing CSS files

  • Split CSS into multiple small files by module and load on demand.
  • Use tools to compress the code and remove unnecessary spaces and comments.

• Use media query to separate different device styles

  • Use the media attribute in the <link> tag to prevent some CSS from blocking rendering, such as printing styles.

• Avoid too many nesting and complex selectors

  • Simplify the CSS structure and reduce the computing overhead of browser matching styles.

Although these practices may seem trivial, they are very effective for speeding up page rendering for the first time.

Let's summarize

CSS is a key rendering path that cannot be ignored. Although it is a static resource, it will affect whether the page can quickly render content. By reducing blocking styles, optimizing loading methods, and simplifying structures, we can significantly improve page loading performance. Basically that's all. Don't underestimate a few lines of CSS. If you don't handle it well, you can really make the page "stuck" in the white screen state.

The above is the detailed content of What is the Critical Rendering Path and how does CSS affect it?. For more information, please follow other related articles on the PHP Chinese website!