優(yōu)化CSS發(fā)送過程

Name: 廈門杰贏網(wǎng)絡(luò)科技有限公司
Address: CN
Telephone: 0592-2203787
Price range: $$$
Rating: 5

本頁內(nèi)容

當PageSpeed Insights檢測到網(wǎng)頁包含阻止呈現(xiàn)的外部樣式表（該樣式表會延遲在屏幕上顯示內(nèi)容的時間）時，就會觸發(fā)此規(guī)則。

概覽

屏幕顯示內(nèi)容之前，瀏覽器會阻止外部CSS文件。這會導(dǎo)致額外的網(wǎng)絡(luò)延遲，并延長屏幕顯示內(nèi)容的時間。

建議

如果外部CSS資源較小，您可以直接將這些內(nèi)容插入到HTML文檔中，這稱為“內(nèi)嵌”。通過這種方式內(nèi)嵌較小CSS資源，瀏覽器可以繼續(xù)呈現(xiàn)網(wǎng)頁。請注意，如果CSS文件較大，完全內(nèi)嵌CSS可能會導(dǎo)致PageSpeed Insights通過按優(yōu)先級排列可見內(nèi)容警告您網(wǎng)頁的首屏部分體積過大。如果CSS文件較大，您需要識別和內(nèi)嵌呈現(xiàn)首屏內(nèi)容所需的CSS，并暫緩加載其余樣式，直到首屏內(nèi)容顯示之后為止。

內(nèi)嵌較小CSS文件的示例
請勿內(nèi)嵌較大數(shù)據(jù)URI
請勿內(nèi)嵌CSS屬性

內(nèi)嵌較小CSS文件的示例

如果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; }

您就可以內(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)頁加載之后，原始small.css才會加載。通過JavaScript將所有<style>和<link>元素插入到文檔中，以維護CSS規(guī)則的應(yīng)用順序。

請勿內(nèi)嵌較大數(shù)據(jù)URI

在CSS文件中內(nèi)嵌數(shù)據(jù)URI時，請務(wù)必慎重。您可以在CSS中選擇使用較小數(shù)據(jù)URI，因為內(nèi)嵌較大數(shù)據(jù)URI會導(dǎo)致首屏CSS變大，進而延緩網(wǎng)頁呈現(xiàn)時間。

請勿內(nèi)嵌CSS屬性

應(yīng)盡量避免在HTML元素（例如，< p style=...>）中內(nèi)嵌CSS屬性，因為這經(jīng)常會導(dǎo)致出現(xiàn)多余的重復(fù)代碼。此外，內(nèi)容安全政策(CSP)會在默認情況下阻止在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.

成立于2011年，作為專業(yè)外貿(mào)網(wǎng)絡(luò)營銷公司，廈門杰贏網(wǎng)絡(luò)科技有限公司一直致力于為中國優(yōu)秀外貿(mào)企業(yè)提供優(yōu)質(zhì)外貿(mào)網(wǎng)站建設(shè)、谷歌優(yōu)化、外貿(mào)網(wǎng)站推廣、外貿(mào)網(wǎng)站維護，外貿(mào)SEO、Google SEO、外貿(mào)SNS營銷等外貿(mào)網(wǎng)絡(luò)營銷一條龍服務(wù)。

精益求精的工作態(tài)度和互利共贏的工作理念，讓杰贏網(wǎng)絡(luò)成為您優(yōu)秀的外貿(mào)營銷服務(wù)供應(yīng)商。

關(guān)于杰贏

新聞資訊

服務(wù)導(dǎo)航

成功案例

聯(lián)系方式

廈門杰贏網(wǎng)絡(luò)科技有限公司

廈門市思明區(qū)廈禾路879號美新廣場2607室

電話: 0592-2203787

手機: 13276021100

QQ: 215168

郵箱: [email protected]

友情鏈接: Google SEO優(yōu)化, 谷歌優(yōu)化公司.

Website Design & Support: jeawin.com