當(dāng)PageSpeed Insights檢測(cè)到網(wǎng)頁(yè)包含阻止呈現(xiàn)的外部樣式表（該樣式表會(huì)延遲在屏幕上顯示內(nèi)容的時(shí)間）時(shí)，就會(huì)觸發(fā)此規(guī)則。
屏幕顯示內(nèi)容之前，瀏覽器會(huì)阻止外部CSS文件。這會(huì)導(dǎo)致額外的網(wǎng)絡(luò)延遲，并延長(zhǎng)屏幕顯示內(nèi)容的時(shí)間。如果外部CSS資源較小，您可以直接將這些內(nèi)容插入到HTML文檔中，這稱(chēng)為“內(nèi)嵌”。通過(guò)這種方式內(nèi)嵌較小CSS資源，瀏覽器可以繼續(xù)呈現(xiàn)網(wǎng)頁(yè)。請(qǐng)注意，如果CSS文件較大，完全內(nèi)嵌CSS可能會(huì)導(dǎo)致PageSpeed Insights通過(guò)按優(yōu)先級(jí)排列可見(jiàn)內(nèi)容警告您網(wǎng)頁(yè)的首屏部分體積過(guò)大。如果CSS文件較大，您需要識(shí)別和內(nèi)嵌呈現(xiàn)首屏內(nèi)容所需的CSS，并暫緩加載其余樣式，直到首屏內(nèi)容顯示之后為止。
如果HTML文檔如下所示：<html>
<head>
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
并且small.css資源如下所示：
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
您就可以?xún)?nèi)嵌關(guān)鍵的CSS，具體方法如下：
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">
在網(wǎng)頁(yè)加載之后，原始small.css才會(huì)加載。通過(guò)JavaScript將所有<style>和<link>元素插入到文檔中，以維護(hù)CSS規(guī)則的應(yīng)用順序。
在CSS文件中內(nèi)嵌數(shù)據(jù)URI時(shí)，請(qǐng)務(wù)必慎重。您可以在CSS中選擇使用較小數(shù)據(jù)URI，因?yàn)閮?nèi)嵌較大數(shù)據(jù)URI會(huì)導(dǎo)致首屏CSS變大，進(jìn)而延緩網(wǎng)頁(yè)呈現(xiàn)時(shí)間。
應(yīng)盡量避免在HTML元素（例如，< p style=...>）中內(nèi)嵌CSS屬性，因?yàn)檫@經(jīng)常會(huì)導(dǎo)致出現(xiàn)多余的重復(fù)代碼。此外，內(nèi)容安全政策(CSP)會(huì)在默認(rèn)情況下阻止在HTML元素上內(nèi)嵌CSS。
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.
