CSS 檔案是妨礙顯示的資源:瀏覽器必須先載入及處理這些檔案,才能算繪網頁。包含不必要的大型樣式表單的網頁,需要較長的時間才能顯示。
本指南將說明如何延後非必要的 CSS,以便最佳化關鍵轉譯路徑,並改善第一個有內容的圖片顯示時間 (FCP)。
範例:CSS 載入效率不佳
以下範例包含一個摺疊式面板,其中有三個隱藏的文字段落,每個段落都使用不同的類別設定樣式:
這個頁面會要求含有八個類別的 CSS 檔案,但並非所有類別都需要轉譯「可見」內容。
本指南的目標是對這個頁面進行最佳化,讓系統只同步載入重要樣式,而其他樣式 (包括段落樣式) 則以非阻斷方式載入。
測量
在頁面上執行 Lighthouse,然後前往「效能」部分。
這份報表顯示「首次顯示內容所需時間」指標的值為「1 秒」,並指出「消除造成轉譯阻斷的資源」機會,指向 style.css 檔案:
如要查看這段 CSS 如何阻斷轉譯,請按照下列步驟操作:
- 在 Chrome 中開啟網頁。
- 按下
Control+Shift+J
(在 Mac 上為Command+Option+J
) 開啟開發人員工具。 - 按一下「成效」分頁標籤。
- 在「Performance」面板中,按一下「Reload」。
在產生的追蹤記錄中,您會看到 FCP 標記會在 CSS 載入完成後立即放置:
也就是說,瀏覽器必須等待所有 CSS 載入並完成處理,才能在畫面上繪製單一像素。
最佳化
如要改善這個頁面,您必須知道哪些類別屬於重要類別。如要判斷這項資訊,請使用測試涵蓋率工具:
- 在開發人員工具中,按下
Control+Shift+P
或Command+Shift+P
(Mac) 開啟「指令選單」。 - 輸入「涵蓋範圍」,然後選取「顯示涵蓋範圍」。
- 按一下「Reload」,重新載入網頁並開始擷取涵蓋範圍。
雙擊報表即可查看詳細資料:
- 標示為綠色的課程為必修課程。瀏覽器需要這些元素才能顯示可見內容,包括標題、副標題和摺疊按鈕。
- 以紅色標示的類別並非關鍵,只會影響無法立即顯示的內容,例如隱藏的段落。
根據這項資訊,請最佳化 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 的瀏覽器提供備用方案。
即使大部分樣式是以非同步方式載入,產生的網頁仍會與先前版本完全相同。以下是 HTML 檔案中內嵌樣式和 CSS 檔案的非同步要求的樣子:
監控
使用開發人員工具,在已最佳化的網頁上執行另一個效能追蹤記錄。
網頁要求 CSS 前會顯示 FCP 標記,表示瀏覽器不需要等待 CSS 載入,即可算繪網頁:
最後一個步驟是在經過最佳化處理的網頁上執行 Lighthouse。
在報表中,您會看到 FCP 網頁的時間已縮短 0.2 秒 (改善幅度達 20%):
「排除會妨礙顯示的資源」建議不再顯示在「Opportunities」下方,而是顯示在「Passed Audits」部分:
後續步驟和參考資料
在本指南中,您瞭解如何手動擷取網頁中未使用的程式碼,以便延後非必要的 CSS。針對較複雜的實際工作環境,提取重要 CSS 指南介紹了一些最常用的提取重要 CSS 工具,並提供程式碼研究室,讓您瞭解這些工具在實際工作環境中的運作方式。