本頁面由 Cloud Translation API 翻譯而成。

為 CSS 傳送進行最佳化處理

，瞭解如何調查及移除這項存取權。當 PageSpeed Insights 偵測到網頁含有封鎖外部的轉譯內容，就會觸發這項規則會延遲初次顯示的時間。

總覽

瀏覽器算繪內容之前，瀏覽器必須先處理目前頁面的內容因此，在開啟外部樣式表之前，瀏覽器會阻止轉譯可能會需要多次往返，導致初次轉譯的時間延後。詳情請參閱「轉譯樹狀結構建構」、「版面配置和繪製」，進一步瞭解重要轉譯路徑。並轉譯封鎖 CSS，瞭解如何解除封鎖顯示功能，以及改善 CSS 放送情形。

建議

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

內嵌小型 CSS 檔案的範例
不內嵌大型資料 URI
不要內嵌 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>

這項轉變，包括判斷重要/非重要 CSS 以及在重要 CSS 中內嵌，並延遲載入不重要的 CSS 的鍵/值 PageSpeed 最佳化模組當您啟用 nginx、Apache、IIS、ATS 和 Open Lightspeed 「prioritize_將_css」篩選器設為「prioritize_racy_css」prioritize_critical_css。

另請參閱 loadCSS 函式，協助以非同步方式載入 CSS，並關鍵：這項工具可從網頁擷取重要的 CSS 供應商

為不需捲動位置內容設定樣式時，所需的重要樣式會內嵌並立即套用至文件。完整的 small.css 會在網頁初次繪製後載入。載入完成之後，網頁樣式就會套用至網頁，不會阻礙重要內容的初始轉譯。

請注意，網路平台即將支援以非轉譯模式載入樣式表，屆時您就可以改用 HTML 匯入功能，改為使用 JavaScript。

不內嵌大型資料 URI

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

請勿內嵌 CSS 屬性

在 HTML 元素中內嵌 CSS 屬性 (例如：<p style=...>)，因為這通常會導致不必要的程式碼重複。此外，系統預設會封鎖 HTML 元素中的內嵌 CSS，方法是使用內容安全政策 (CSP)。

意見回饋

本頁內容是否有幫助？

，瞭解如何調查及移除這項存取權。