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資源較小，您可以直接將這些內(nèi)容插入到HTML文檔中，這稱為“內(nèi)嵌”。通過這種方式內(nèi)嵌較小CSS資源，瀏覽器可以繼續(xù)呈現(xiàn)網(wǎng)頁。請注意，如果CSS文件較大，完全內(nèi)嵌CSS可能會(huì)導(dǎo)致PageSpeed Insights通過按優(yōu)先級排列可見內(nèi)容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
• 請勿內(nèi)嵌較大數(shù)據(jù)URI
• 請勿內(nèi)嵌CSS屬性

內(nèi)嵌較小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" >

在網(wǎng)頁加載之后，原始small.css才會(huì)加載。通過JavaScript將所有