延後不重要的 CSS

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

CSS 檔案會禁止轉譯資源： 載入及處理廣告的網頁。網頁 包含不必要的大型樣式表，就需要較長的時間才會顯示。

本指南將說明如何延遲不重要的 CSS 來最佳化 關鍵轉譯路徑並提升效能 First Contentful Paint (FCP)。

範例：不盡理想的 CSS 載入

以下範例包含三個隱藏段落的摺疊元素 且每個文字的樣式都不同：

這個網頁要求包含 8 個類別的 CSS 檔案，但並非所有類別 轉譯「可見」內容。

本指南旨在最佳化這個網頁，確保只有「重要」樣式 同步載入，其餘部分 (包括段落樣式) 會以非阻塞的方式載入。

測量

執行 Lighthouse 並前往該頁面 效能區段。

這份報表顯示的「First Contentful Paint」指標值為「1s」。 有機會排除禁止轉譯資源，並將指向 style.css 檔案：

燈塔 此報表顯示未最佳化網頁的報表中，FCP 為「1s」以及「排除封鎖」 資源「商機」下方
Lighthouse 報告建議簡化 可加快網頁載入速度。
，瞭解如何調查及移除這項存取權。

以視覺化方式呈現這個 CSS 禁止轉譯的方式：

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

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

用於未最佳化網頁的開發人員工具效能追蹤記錄，顯示 CSS 載入後開始的 FCP。
在未最佳化的示範頁面上，無法執行 FCP 直到 CSS 載入完成

這表示瀏覽器必須等待所有 CSS 載入並處理完畢 才能為螢幕畫面繪製一個像素

最佳化

如要改進這個頁面，您需要瞭解哪些類別屬於「關鍵」類別。 你可以使用涵蓋範圍工具確認這一點：

  1. 在開發人員工具中開啟「Command」選單 按下 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 中一樣 檔案：

監控

使用開發人員工具再次效能 最佳化網頁。

網頁要求 CSS 前會顯示 FCP 標記，也就是說 不用等 CSS 載入後再轉譯網頁：

DevTools 最佳化網頁的效能追蹤記錄，顯示在 CSS 之前開始的 FCP 載入。
在最佳化的網頁中，FCP 可以在 載入樣式表。

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

報表顯示 FCP 網頁減少了 0.2 秒 (20% 改善！)：

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

系統不會再顯示「消去轉譯資源」建議 商機，請改為在「通過的稽核」部分：

燈塔 顯示「排除封鎖資源」的報告針對「通過的稽核」 專區。
網頁現在傳遞封鎖資源 稽核。

後續步驟與參考資料

本指南將說明如何手動擷取 網頁未使用的程式碼對於較複雜的實際工作環境， 擷取重要的 CSS 指南 是擷取關鍵 CSS 的熱門工具 程式碼研究室 實際運作