無論您使用的是 UI 程式庫，還是手動製作樣式，大量 CSS 的運作時間都會延遲，因為瀏覽器必須先下載及剖析 CSS 檔案，才能顯示網頁。
這個回應式冰淇淋藝廊使用 Bootstrap 打造而成。如 Bootstrap 等 UI 程式庫能加快開發速度，但這類程式庫通常會出現混亂且不必要的 CSS，進而降低載入時間。Bootstrap 4 為 187 KB，而另一個 UI 程式庫 Semantic UI 則高達 730 KB (未壓縮)。即使經過精簡和壓縮，Bootstrap 的大小仍會達到 20 KB，遠超過首次來回的 14 KB 門檻。
「重要」工具可用於擷取、縮小及內嵌不需捲動位置的 CSS。如此即可盡快顯示不需捲動位置內容，即使網頁其他部分的 CSS 尚未載入亦然。在本程式碼研究室中，您將瞭解如何使用關鍵的 npm 模組。
測量
- 如要預覽網站，請按下「查看應用程式」。然後按下
全螢幕
。
如要在這個網站上執行 Lighthouse 稽核，請按照下列步驟操作：
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 按一下「行動裝置」。
- 勾選「效能」核取方塊。
- 取消勾選「稽核」部分的其他核取方塊。
- 點選「Simulated Fast 3G, 4x CPU Slowdown」。
- 勾選「清除儲存空間」核取方塊。選取這個選項後，Lighthouse 不會從快取載入資源，從而模擬首次訪客的體驗。
- 按一下「執行稽核」。
在電腦上執行稽核時，實際結果可能會有差異，但在幻燈片檢視畫面中，您會發現在最終轉譯內容之前，應用程式顯示一片空白畫面。這就是最初內容繪製 (FCP) 偏高的原因，以及整體成效分數不佳的原因。
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 檔案。 |
width、height |
數字 | 可視區域的寬度和高度 (以像素為單位)。 |
dimensions |
陣列 | 包含具有寬度和高度屬性的物件。這些物件代表您想以頂端 CSS 指定的視區。如果 CSS 中有媒體查詢，就能產生涵蓋多種可視區域大小的重要 CSS。 |
inline |
布林值 | 如果設為 true，系統會在 HTML 來源檔案中內嵌產生的關鍵 CSS。 |
minify |
布林值 | 如果設為 true，「重要」會減少產生的重要 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。關鍵在於讀取 HTML 來源檔案、擷取重要的 CSS，然後以 <head> 中內嵌的重要 CSS 覆寫 index.html。
dimensions 陣列指定了兩種可視區域大小：額外小螢幕為 300 x 500，標準筆電螢幕為 1280 x 720。
minify 選項已省略，因為 Critical 會在指定多個可視區域大小時，自動將擷取的 CSS 縮減。
執行重要執行個體
為 package.json 中的指令碼新增重要問題：
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 按一下「Terminal」(注意：如果沒有顯示「Terminal」按鈕，您可能需要使用「全螢幕」選項)。
如要產生必要 CSS，請在控制台中執行以下指令：
npm run critical
refresh
現在，在 index.html 的 <head> 標記中，產生的重要 CSS 會內嵌於 <style> 標記之間，接著是指令碼，可透過非同步方式載入 CSS 的其他部分。
重新評估
請按照程式碼研究室開頭的步驟，再次執行 Lighthouse 效能審查。結果看起來會像這樣：
