CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially using stylesheets introduced with <link rel="stylesheet">, a large number of inline CSS at the head, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.

"Render-blocking CSS" means that when a browser loads a web page, it must first download and parse certain CSS files before it can start rendering the page content. This type of CSS is called "blocking rendering CSS".

This means that if these CSS files are too large or load too slowly, the user will see a blank page until the resources are loaded. This has a great impact on user experience, especially when the mobile terminal or network is slow.

Why does CSS block page rendering?

Not all CSS block rendering, only those marked "critical" will cause this problem. Browsers treat all inline and external CSS by default as resources that block rendering, as they may affect the page layout and appearance.

Common situations include:

• The stylesheets introduced using <link rel="stylesheet"> are blocked by default.
• A lot of inline CSS code at the head of the page.
• Stylesheets that are not loaded using media query optimization (such as print styles) may also be misjudged as critical resources.

How to reduce the impact of CSS on rendering?

To improve the loading speed of the first screen, the key is to reduce or delay non-essential CSS loading. Here are some practical practices:

• Extract key CSS : Extract the minimum CSS required for the first rendering and embed it directly into HTML to let the page be displayed as soon as possible.
• Lazy loading of non-critical CSS : You can use JavaScript to load other styles after rendering the main content of the page.
• Use media properties to optimize loading : for example, add media="print" to the print CSS so that the first screen rendering will not be blocked.
• Compress and merge CSS files : reduce the number of requests and file size, and speed up overall loading speed.

Practical operation suggestions

If you are a front-end developer or are responsible for website performance optimization, you can refer to the following steps to handle render-blocking CSS:

• Use tools such as Critical to automatically extract critical CSS.
• Insert the key CSS into the HTML header through the <style></style> tag.
• External CSS uses rel="preload" to load asynchronously with onload event.
• Use media attributes to delay loading for non-critical CSS, for example:

   <link rel="stylesheet" href="non-critical.css" media="defer">

  Then switch media value through the script to activate loading.

Note: Don't over-optimize

Although it is important to optimize CSS loading, you cannot go to extremes. For example, excessive splitting of CSS and using complex scripts to control the loading order will make maintenance difficult and even bring compatibility issues.

Just balance the loading of resources on critical paths, which is not complicated but is easy to ignore.

The above is the detailed content of What is 'render-blocking CSS'?. For more information, please follow other related articles on the PHP Chinese website!