使用重大問題擷取關鍵 CSS 並內嵌

Milica Mihajlija
Milica Mihajlija

無論您使用的是 UI 程式庫,還是手動製作樣式,大量 CSS 的運作時間都會延遲,因為瀏覽器必須先下載及剖析 CSS 檔案,才能顯示網頁。

這個回應式冰淇淋相片庫是使用 Bootstrap 建構。Bootstrap 等 UI 程式庫可加快開發作業,但代價是會產生過度膨脹和不必要的 CSS,進而導致載入時間變慢。Bootstrap 4 為 187 KB,而另一個 UI 程式庫 Semantic UI 則高達 730 KB (未壓縮)。即使經過精簡和壓縮,Bootstrap 的大小仍約為 20 KB,遠超過首次來回的 14 KB 門檻

Critical 是用來擷取、縮減及內嵌不需捲動位置 CSS 的工具。這樣一來,即使網頁其他部分的 CSS 尚未載入,系統仍可盡快轉譯上方內容。在本程式碼研究室中,您將瞭解如何使用 Critical 的 npm 模組。

測量

  • 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕

如要對這個網站執行 Lighthouse 稽核,請按照下列步驟操作:

  1. 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
  2. 按一下「Lighthouse」Lighthouse分頁標籤。
  3. 按一下「行動」
  4. 勾選「效能」核取方塊。
  5. 清除「稽核」部分的其他核取方塊。
  6. 按一下「模擬快速 3G,CPU 減速 4 倍」
  7. 勾選「清除儲存空間」核取方塊。選取這個選項後,Lighthouse 就不會從快取中載入資源,而是模擬初次訪客的網頁體驗。
  8. 按一下「執行稽核」

由 Lighthouse 提供支援的 Chrome 開發人員工具稽核面板

在電腦上執行稽核作業時,實際結果可能會有所不同,但在膠卷檢視畫面中,您會發現應用程式會在顯示內容前,先顯示空白畫面一段時間。這就是為什麼「首次顯示內容所需時間 (FCP)」 會偏高,整體效能分數也不理想的原因。

Lighthouse 稽核顯示成效分數為 84、FCP 為 3 秒,以及應用程式載入過程的膠卷檢視畫面

Lighthouse 可協助你修正效能問題,因此請在「改善機會」部分尋找解決方案。排除會妨礙顯示的資源列為機會,而這正是 Critical 的強項!

Lighthouse 稽核「機會」部分列出「排除會妨礙顯示的資源」

最佳化

  • 按一下「Remix to Edit」,即可編輯專案。

為了加快速度,我們已安裝 Critical,並在程式碼研究室中提供空白設定檔。

在設定檔案 critical.js 中,新增 Critical 的參照,然後叫用 critical.generate() 函式。這個函式會接受包含設定的物件。

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

錯誤處理並非必要,但這是在控制台中評估作業成功與否的簡單方法。

設定 Critical

下表列出一些實用的「重要」選項。您可以在 GitHub 上查看所有可用選項

選項 類型 說明
base 字串 檔案的基本目錄。
src 字串 HTML 原始檔案。
dest 字串 輸出檔案的目標。如果 CSS 已內嵌,輸出檔案就是 HTML。否則,輸出內容會是 CSS 檔案。
widthheight 數字 可視區域的寬度和高度 (以像素為單位)。
dimensions 陣列 包含具有寬度和高度屬性的物件。這些物件代表您想以頂端 CSS 指定的視區。如果 CSS 中有媒體查詢,您就能產生涵蓋多種檢視區域大小的重要 CSS。
inline 布林值 如果設為 true,系統會在 HTML 來源檔案中內嵌產生的關鍵 CSS。
minify 布林值 如果設為 true,Critical 會壓縮產生的關鍵 CSS。擷取多個解析度的關鍵 CSS 時,可以省略這項參數,因為 Critical 會自動縮減 CSS,避免重複加入規則。

以下是針對多種解析度擷取必要 CSS 的設定範例。將其加入 critical.js,或試驗並調整選項。

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

在這個範例中,index.html 既是來源檔案也是目的地檔案,因為 inline 選項已設為 true。Critical 會先讀取 HTML 來源檔案、擷取重要的 CSS,然後將 index.html 覆寫為 <head> 中內嵌的重要 CSS。

dimensions 陣列指定了兩種可視區域大小:300 x 500 適用於超小型螢幕,1280 x 720 適用於標準筆記型電腦螢幕。

minify 選項已省略,因為 Critical 會在指定多個可視區域大小時,自動將擷取的 CSS 縮減。

執行 Critical

package.json 中將 Critical 新增至指令碼:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}
  1. 按一下「Terminal」 (注意:如果沒有顯示「Terminal」按鈕,您可能需要使用「Fullscreen」選項)。

如要產生必要 CSS,請在控制台中執行以下指令:

npm run critical
refresh
控制台中顯示「已產生必要 CSS」的成功訊息
主控台中的成功訊息

index.html<head> 標記中,系統會在 <style> 標記之間內嵌產生的關鍵 CSS,並在後方加入以非同步方式載入其餘 CSS 的指令碼。

內嵌重要 CSS 的 index.html
內嵌重要的 CSS

再次測量

請按照程式碼研究室開頭的步驟,再次執行 Lighthouse 效能審查。您會看到類似下方的結果:

Lighthouse 稽核顯示效能分數為 100,FCP 為 0.9 秒,以及改善應用程式載入的膠卷檢視畫面