Optimize CSS sending process

This rule is triggered when PageSpeed Insights detects that a Web page contains an external style sheet that prevents rendering, which delays the display of content on the screen.

Overview

The browser blocks the external CSS file before the screen displays the content. This causes additional network latency and prolongs the time for the screen to display content.

Recommendations

如果外部CSS资源较小，您可以直接将这些内容插入到HTML文档中，这称为“内嵌”。通过这种方式内嵌较小CSS资源，浏览器可以继续呈现网页。请注意，如果CSS文件较大，完全内嵌CSS可能会导致PageSpeed Insights通过按优先级排列可见内容Warn you that the first screen of the web page is too large. If the CSS file is large, you need to identify and embed the CSS needed to render the first screen content, and hold off loading the remaining styles until the first screen content is displayed.

• Example of embedding a smaller CSS file
• 请勿内嵌较大数据URI
• 请勿内嵌CSS属性

内嵌较小CSS文件的示例

If the HTML document looks like this: < html >
< head >
   
 
 
   
 

并且small.cssThe resources are as follows:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
. bold {font-weight: bold;}

You can embed key CSS as follows:

 
   

 
   


< link rel= "stylesheet" href= "small. css" >

在网页加载之后，原始small.css才会加载。通过JavaScript将所有