Critical CSS optimization improves first loading speed by prioritizing the minimum CSS required to load the first screen. CSS is the style code that is necessary for the page to render for the first time, to avoid the browser from white screen or delayed display due to loading all CSS. The extraction methods include automatic extraction using tools such as Penthouse, manual copying of the first screen style, or automatic generation in combination with the construction process. The injection method is to inline the key CSS to the style tag in the head. The rest of the CSS is loaded through the link tag in conjunction with preload or JavaScript. The media attribute can also be used to control the loading timing. Things to note include increased maintenance costs, dynamic content affects judgment, avoiding excessive splitting, and combining other optimization strategies. Using frameworks such as Next.js can simplify operations, but you need to continue to pay attention to extraction accuracy and maintenance.

Critical CSS (Critical CSS) optimization is an important means to improve the first loading speed of web pages. Simply put, it improves the user experience by prioritizing the minimum CSS required for the first screen content, allowing the page to render the core part as quickly as possible.

What is a key CSS?

CSS refers to the part of the style code that must be used when the page is rendered for the first time. The browser will render the page only after parsing the full CSS, so if all CSS files are loaded at the beginning, it may cause a white screen or delayed display.

For example: a web page has multiple modules, but the first time the user sees is only the top area. At this time, you only need to extract this part of the CSS, load this part first, and the rest can be processed later.

How to extract critical CSS

The core of extracting key CSS is to analyze the content of the first screen and generate the corresponding minimum CSS collection. Common practices include:

• Use tools to extract automatically, such as Penthouse , critical , or LightHouse prompts.
• Manually analyze and copy the styles required for the first screen, suitable for small projects or scenarios with extremely high performance requirements.
• Combined with the construction process, the key CSS is automatically generated during the packaging process and injected into HTML headers.

It should be noted that the "first screen" may be different in different devices and different resolutions, so it is best to adapt according to the mainstream screen size.

How to inject and lazy load the rest of CSS

With the key CSS, the next step is how to make it work and control how the rest of the CSS load. Common methods include:

• Inline the extracted key CSS directly into the <style></style> tag in .
• The remaining CSS is introduced using link tags, plus rel="preload" or lazy loading via JavaScript.
• Use media attributes to delay loading non-critical CSS, for example:

   <link rel="stylesheet" href="rest.css" media="print" onload="this.media=&#39;all&#39;">

This allows the browser to prioritize rendering of key content, and then load the first screen after other styles are completed, without affecting the first screen experience.

Notes and FAQs

Although the key CSS optimization effect is obvious, there are some issues that are easy to ignore:

• Increased maintenance cost : Every time the page structure changes, the critical CSS needs to be re-extracted.
• Dynamic content impact judgment : Some page content relies on JS to dynamically generate, and the real state must be simulated when extracting key CSS.
• Don't over-split : Not all projects are suitable for splitting CSS in a refined way, and it may be better to merge CSS simply by small sites.
• Only by combining other optimization strategies : such as font loading, lazy image loading, etc. can the maximum effect be achieved.

In addition, if you are using modern front-end frameworks (such as Next.js, Gatsby), they already have some built-in CSS optimization mechanisms, which can simplify operations with the help of these functions.

Basically that's it. CSS optimization is not complicated, but details are easily overlooked, especially in terms of extraction accuracy and subsequent maintenance, which require continuous attention and adjustment.

The above is the detailed content of How to optimize critical CSS loading. For more information, please follow other related articles on the PHP Chinese website!