為 CSS 傳送進行最佳化處理

當 PageSpeed Insights 偵測到網頁含有封鎖外部樣式表的轉譯器,造成在畫面上繪製內容的延遲,就會觸發這個規則。

總覽

在畫面上呈現內容前,瀏覽器會先封鎖外部 CSS 檔案。這會造成網路速度較慢,增加畫面顯示內容的時間。

建議

如果外部 CSS 資源很小,您可以將其直接插入 HTML 文件中,這種做法稱為內嵌。以這種方式嵌入小型 CSS,瀏覽器就能繼續轉譯網頁。請注意,如果 CSS 檔案很大,完全嵌入 CSS 可能會使 PageSpeed Insights 透過優先處理要顯示的內容發出警告,指出網頁的不需捲動位置部分過大。處理大型 CSS 檔案時,您必須識別轉譯不需捲動位置內容所需嵌入的 CSS,將剩餘樣式推延至不需捲動位置內容的後面載入。

內嵌小型 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; }

您即可像下方這樣嵌入重要 CSS 屬性:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

系統會在網頁的 onload 事件後載入原始 small.css。應用程式的 CSS 規則順序是由所有透過 JavasScript 插入文件的 <style><link> 元素所維繫。

不內嵌大型資料 URI

嵌入 CSS 檔案中的資料 URI 時,請務必注意。選擇性使用 CSS 中的小型資料 URI 是比較合理的做法,而嵌入大型資料 URI 可能造成不需捲動位置的 CSS 大小過大,從而增加網頁轉譯的時間。

不內嵌 CSS 屬性

如果可以,請盡量避免將 CSS 屬性嵌入到 HTML 元素 (例如 &lt p style=...&gt) 中,以免複製多餘的程式碼。此外,內容安全性政策 (CSP) 已預設封鎖在 HTML 元素中嵌入 CSS。