延後不重要的 CSS

Demián Renzulli
Demián Renzulli

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+PCommand+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 的熱門工具 程式碼研究室 實際運作