CSS 檔案屬於禁止轉譯資源:瀏覽器必須先載入及處理這些檔案,瀏覽器才能轉譯網頁。包含不必要大型樣式表的網頁需要較長的轉譯時間。
本指南將說明如何延遲非重要 CSS 來最佳化關鍵轉譯路徑,並改善首次內容繪製 (FCP)。
示例: CSS 載入效果不佳
以下範例包含摺疊元素,其中包含三個隱藏的文字段落,每個段落各有一個不同的類別樣式:
本頁面會要求含有八個類別的 CSS 檔案,但並非所有類別均須轉譯「顯示」內容。
本指南的目標在於最佳化這個網頁,讓只有重要樣式同步載入,其餘 (包括段落樣式) 則會以非封鎖的方式載入。
測量
在頁面執行 Lighthouse,然後前往「Performance」(效能) 部分。
報表會顯示值為「1s」的「First Contentful Paint」指標,以及指向 style.css 檔案的機會「消除轉譯封鎖資源」商機:
如要以視覺化方式呈現這個 CSS 封鎖轉譯結果的方式,請按照下列步驟操作:
- 在 Chrome 中開啟該網頁。
- 按下
Control+Shift+J
(在 Mac 上則為Command+Option+J
) 開啟開發人員工具。 - 按一下「成效」分頁標籤。
- 在「效能」面板中,按一下「重新載入」。
在產生的追蹤記錄中,您會看到 CSS 載入完成後,立即放置 FCP 標記:
這表示瀏覽器必須先等待所有 CSS 載入並完成處理,才能在螢幕上繪製單一像素。
最佳化
如要將這個頁面最佳化,您必須知道哪些類別屬於「重要」類別。 請使用涵蓋範圍工具判斷結果:
- 在開發人員工具中,按下
Control+Shift+P
或Command+Shift+P
(Mac) 來開啟指令選單。 - 輸入「涵蓋範圍」並選取「顯示涵蓋範圍」。
- 按一下「重新載入」即可重新載入頁面,即可開始擷取涵蓋率。
按兩下報表即可查看詳細資料:
- 以綠色標示的類別至關重要。瀏覽器必須轉譯可見內容,包括標題、副標題和摺疊按鈕。
- 標示為紅色的類別屬於非重要類別,只會影響無法立即顯示的內容 (例如隱藏的段落)。
透過這項資訊,請將您的 CSS 最佳化,讓瀏覽器能夠在頁面載入後立即開始處理重要樣式,並延遲不重要的 CSS 處理,以供日後使用:
擷取涵蓋率報表中標示為綠色的類別定義,然後將這些類別放入頁面標頭的
<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>
套用下列模式,以非同步方式載入其餘類別:
<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 載入後才轉譯頁面:
最後,請在最佳化的頁面上執行 Lighthouse。
在報表中,您會看到 FCP 頁面減少了 0.2s (改善幅度為 20%!):
「終止禁止轉譯資源」建議不會再顯示於「Opportunity」下方,而是出現在「通過的稽核」部分:
後續步驟和參考資料
在本指南中,您已瞭解如何手動擷取網頁中未使用的程式碼,藉此延遲不重要的 CSS。對於較為複雜的正式環境,擷取重要 CSS 指南介紹了幾個最常用來擷取重要 CSS 的工具,包含程式碼研究室,瞭解這些工具的實際運作方式