延後不重要的 CSS

Demián Renzulli
Demián Renzulli
X GitHub 毛刺

CSS 檔案屬於禁止轉譯資源：瀏覽器必須先載入及處理這些檔案，瀏覽器才能轉譯網頁。包含不必要大型樣式表的網頁需要較長的轉譯時間。

本指南將說明如何延遲非重要 CSS 來最佳化關鍵轉譯路徑，並改善首次內容繪製 (FCP)。

示例： CSS 載入效果不佳

以下範例包含摺疊元素，其中包含三個隱藏的文字段落，每個段落各有一個不同的類別樣式：

本頁面會要求含有八個類別的 CSS 檔案，但並非所有類別均須轉譯「顯示」內容。

本指南的目標在於最佳化這個網頁，讓只有重要樣式同步載入，其餘 (包括段落樣式) 則會以非封鎖的方式載入。

測量

在頁面執行 Lighthouse，然後前往「Performance」(效能) 部分。

報表會顯示值為「1s」的「First Contentful Paint」指標，以及指向 style.css 檔案的機會「消除轉譯封鎖資源」商機：

Lighthouse 報告，顯示未最佳化的網頁，「商機」下方顯示 FCP 為「1」和「消除封鎖資源」
Lighthouse 報表建議簡化樣式表單，進一步加快網頁載入速度。

如要以視覺化方式呈現這個 CSS 封鎖轉譯結果的方式，請按照下列步驟操作：

  1. 在 Chrome 中開啟該網頁。
  2. 按下 Control+Shift+J (在 Mac 上則為 Command+Option+J) 開啟開發人員工具。
  3. 按一下「成效」分頁標籤。
  4. 在「效能」面板中，按一下「重新載入」。

在產生的追蹤記錄中，您會看到 CSS 載入完成後，立即放置 FCP 標記：

未最佳化網頁的開發人員工具效能追蹤記錄，顯示 CSS 載入後啟動的 FCP。
在未最佳化的示範頁面中，必須等到 CSS 載入完成後，才能執行 FCP。

這表示瀏覽器必須先等待所有 CSS 載入並完成處理，才能在螢幕上繪製單一像素。

最佳化

如要將這個頁面最佳化，您必須知道哪些類別屬於「重要」類別。 請使用涵蓋範圍工具判斷結果：

  1. 在開發人員工具中，按下 Control+Shift+P 或 Command+Shift+P (Mac) 來開啟指令選單。
  2. 輸入「涵蓋範圍」並選取「顯示涵蓋範圍」。
  3. 按一下「重新載入」即可重新載入頁面，即可開始擷取涵蓋率。
CSS 檔案的涵蓋率，顯示 55.9% 未使用的位元組。
涵蓋率報表會顯示初次載入網頁時，實際使用 CSS 的比例。

按兩下報表即可查看詳細資料：

  • 以綠色標示的類別至關重要。瀏覽器必須轉譯可見內容，包括標題、副標題和摺疊按鈕。
  • 標示為紅色的類別屬於非重要類別，只會影響無法立即顯示的內容 (例如隱藏的段落)。

透過這項資訊，請將您的 CSS 最佳化，讓瀏覽器能夠在頁面載入後立即開始處理重要樣式，並延遲不重要的 CSS 處理，以供日後使用：

  1. 擷取涵蓋率報表中標示為綠色的類別定義，然後將這些類別放入頁面標頭的 <style> 區塊中：

    <style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>

  2. 套用下列模式，以非同步方式載入其餘類別：

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

這不是載入 CSS 的標準方式。運作方式如下：

  • link rel="preload" as="style" 會以非同步方式要求樣式表。如要進一步瞭解 preload，請參閱「預先載入重要素材資源」指南。
  • link 中的 onload 屬性可讓瀏覽器在樣式表載入完成時處理 CSS。
  • 「將 onload 處理常式設為空值」有助於部分瀏覽器在切換 rel 屬性時，避免重複呼叫處理常式。
  • noscript 元素中的樣式表參照可為未執行 JavaScript 的瀏覽器提供備用機制。

即使大多數樣式都是以非同步方式載入，產生的頁面仍會與前一版本完全相同。以下是 CSS 檔案的內嵌樣式和非同步要求在 HTML 檔案中的外觀：

監控

請使用 開發人員工具，在最佳化頁面上執行其他「效能」追蹤記錄。

FCP 標記會在頁面要求 CSS 之前顯示，這表示瀏覽器無須等待 CSS 載入後才轉譯頁面：

最佳化頁面的開發人員工具效能追蹤記錄，顯示在 CSS 載入前啟動的 FCP。
在最佳化的頁面中，FCP 可以在樣式表載入前啟動。

最後，請在最佳化的頁面上執行 Lighthouse。

在報表中，您會看到 FCP 頁面減少了 0.2s (改善幅度為 20%！)：

Lighthouse 報告，顯示 FCP 值為「0.8s」。
減少的新 FCP。

「終止禁止轉譯資源」建議不會再顯示於「Opportunity」下方，而是出現在「通過的稽核」部分：

Lighthouse 報告，「通過的稽核」專區中顯示「消除封鎖資源」。
這個頁面現在已通過封鎖資源稽核。

後續步驟和參考資料

在本指南中，您已瞭解如何手動擷取網頁中未使用的程式碼，藉此延遲不重要的 CSS。對於較為複雜的正式環境，擷取重要 CSS 指南介紹了幾個最常用來擷取重要 CSS 的工具，包含程式碼研究室，瞭解這些工具的實際運作方式