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.

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.

如果外部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属性

If the HTML document looks like this:

并且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:

在网页加载之后，原始small.css才会加载。通过JavaScript将所有和Element is inserted into the document to maintain the order in which CSS rules are applied.

Be careful when embedding data URIs in CSS files. You can choose to use a smaller data URI in your CSS,because embedding a larger data URI causes the first screen CSS to become larger,which in turn delays the rendering time of the web page.

应尽量避免在HTML元素（例如，）中内嵌CSS属性，因为这经常会导致出现多余的重复代码。此外，内容安全政策(CSP) prevents embedding CSS on HTML elements by default.

 

Except as other written,the content of this page is licensed under theCreative Commons Attribution 3.0 License,and code samples are licensed under the Apache 2.0 License. For details,see our Site Policies.