延後不重要的 CSS

Demián Renzulli

重要事項：本指南說明可改善效能的進階效能技巧，但如果實作不當，也可能導致錯誤。大多數網站都應該能夠在不採用這項技術的情況下，達成我們建議的所有成效目標。

CSS 檔案是妨礙顯示的資源：瀏覽器必須先載入及處理這些檔案，才能算繪網頁。包含不必要的大型樣式表的網頁，需要較長的時間才能顯示。

在本指南中，您將瞭解如何延遲不重要的 CSS 來最佳化關鍵轉譯路徑，並改善首次顯示內容所需時間 (FCP)。

範例：CSS 載入效率不佳

以下範例包含一個摺疊式面板，其中有三個隱藏的文字段落，每個段落都使用不同的類別設定樣式：

本頁要求包含八個類別的 CSS 檔案，但並非所有類別都需要轉譯「可見」內容。

本指南的目標是對這個頁面進行最佳化，讓系統只同步載入重要樣式，而其他樣式 (包括段落樣式) 則以非阻斷方式載入。

測量

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

報表會顯示值為「1s」的「First Contentful Paint」指標，以及指向「Eli removerender-blocking resources」(排除會禁止轉譯資源) 機會 (指向「style.css」檔案)：

Lighthouse 報表建議簡化樣式表，進而加快網頁載入速度。

注意： 這個示範網站使用的樣式表單非常小。在實際工作環境中，通常需要更大的 CSS 檔案。如果 Lighthouse 偵測到網頁在轉譯捲動畫面上方內容時，至少有 2048 個位元組的 CSS 規則未使用，也會顯示「Remove Unused CSS」建議。

如要查看這段 CSS 如何阻斷轉譯，請按照下列步驟操作：

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

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

在未經最佳化的範例頁面中，CSS 載入完成前，FCP 不會發生。

也就是說，瀏覽器必須等待所有 CSS 載入並完成處理，才能在畫面上繪製單一像素。

最佳化

如要改善這個頁面，您必須知道哪些類別屬於重要類別。你可以使用涵蓋範圍工具確認這一點：

1. 在開發人員工具中，按下 Control+Shift+P 或 Command+Shift+P (Mac) 開啟指令選單。
2. 輸入「涵蓋範圍」，然後選取「顯示涵蓋範圍」。
3. 按一下「重新載入」重新載入網頁，即可開始擷取涵蓋率。

涵蓋率報表會顯示網頁在初次載入網頁時實際使用的 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 處理常式之後，將 onload 處理常式「為空值」，可協助某些瀏覽器在切換 rel 屬性時避免重新呼叫處理常式。
• noscript 元素中的樣式工作表參照，可為不執行 JavaScript 的瀏覽器提供備用方案。

注意：

在實際的實際工作環境中，我們建議使用 CSS 延遲函式 (例如 loadCSS)，因為這類函式可包裝這項行為，並在各瀏覽器間順利運作，且支援可能不允許內嵌 onload JavaScript 的內容安全性政策。

您也可以將 CSS 連結放在頁面底部，讓內容在呈現前先行載入，而無須等待 Firefox 和 Chrome 中的樣式表。不過，在這種情況下，瀏覽器仍會優先處理樣式表單，因此仍可封鎖所有瀏覽器中的關鍵內容。

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

監控

使用開發人員工具，在已最佳化的網頁上執行另一個效能追蹤記錄。

網頁要求 CSS 前會顯示 FCP 標記，表示瀏覽器不需要等待 CSS 載入，即可算繪網頁：

在最佳化的網頁上，FCP 可以在樣式工作表載入前開始。

最後一個步驟是在經過最佳化處理的網頁上執行 Lighthouse。

在報表中，您會看到 FCP 網頁已縮短 0.2 秒 (改善幅度為 20%)：

新的 FCP 縮短時間。

「排除會妨礙顯示的資源」建議不再顯示在「Opportunities」下方，而是顯示在「Passed Audits」部分：

該頁面現在已通過封鎖資源稽核程序。

後續步驟和參考資料

在本指南中，您瞭解如何手動擷取網頁中未使用的程式碼，以便延後非必要的 CSS。針對較複雜的實際工作環境，提取重要 CSS 指南介紹了一些最常用的提取重要 CSS 工具，並提供程式碼研究室，讓您瞭解這些工具在實際工作環境中的運作方式。