為 CSS 傳送進行最佳化處理

當 PageSpeed Insights 偵測到網頁含有封鎖轉譯的外部樣式表，就會延遲首次轉譯的時間，進而觸發這個規則。

總覽

瀏覽器必須先處理目前網頁的所有樣式和版面配置資訊，才能轉譯內容。因此，瀏覽器在下載及處理外部樣式表之前會封鎖轉譯，而這可能需要多次往返，並延遲首次轉譯的時間。如要進一步瞭解重要的算繪路徑，請參閱「 算繪樹狀結構建構、版面配置和繪製」一文；如要進一步瞭解重要的算繪路徑，以及「算繪封鎖 CSS」，請參閱相關提示，瞭解如何解除封鎖轉譯及改善 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>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

啟用「prioritize_Critical_css」prioritize_critical_css篩選器後，您可以透過 nginx、Apache、IIS、ATS 和 Open Lightspeed 適用的 PageSpeed 最佳化模組執行這項轉換作業，包括判斷重要/非關鍵 CSS、納入重要的 CSS，以及延遲載入不重要的 CSS。

另請參閱 loadCSS 函式，瞭解如何以非同步方式載入 CSS。此函式可與 Critical 中寫入的重要 CSS 工具搭配使用，讓您從網頁中擷取重要 CSS。

設定不需捲動位置內容樣式所需的重要樣式，系統會內嵌並立即套用至文件，系統完成網頁的初始繪製後，就會載入完整的 small.css。網頁載入完畢後，系統會將其樣式套用至頁面，而不會封鎖重要內容的初始轉譯。

請注意，網路平台即將支援以非轉譯方式載入樣式表，而不必使用 HTML 匯入功能執行 JavaScript。

不內嵌大型資料 URI

內嵌 CSS 檔案中的資料 URI 時，請務必謹慎。雖然在 CSS 中選擇性使用小型資料 URI 可能很合理，但內嵌大型資料 URI 可能會導致不需捲動位置的 CSS 規模變大，進而拖慢網頁轉譯時間。

請勿內嵌 CSS 屬性

在 HTML 元素中內嵌 CSS 屬性 (例如<p style=...>) 應盡量避免，因為這樣常會導致不必要的程式碼重複。此外，內容安全政策 (CSP) 已預設封鎖在 HTML 元素中內嵌 CSS。

意見回饋

本頁內容對你是否有幫助？