無論您使用 UI 程式庫或親手設計樣式，CSS 供應商都必須下載及剖析 CSS 檔案才能顯示網頁，因此會延遲大量轉譯的 CSS 檔案。
這個回應式冰淇淋藝廊使用 Bootstrap 打造而成。如 Bootstrap 等 UI 程式庫能加快開發速度，但這類程式庫通常會出現混亂且不必要的 CSS，進而降低載入時間。Bootstrap 4 為 187 KB，另一個 UI 程式庫語意 UI 則是未壓縮的 730 KB。即使經過壓縮和 gzip 壓縮，Bootstrap 的體重仍約為 20 KB，第一次往返的門檻仍超過 14 KB 的門檻。
「重要」工具可用於擷取、縮小及內嵌不需捲動位置的 CSS。如此即可盡快顯示不需捲動位置內容，即使網頁其他部分的 CSS 尚未載入亦然。在本程式碼研究室中，您將瞭解如何使用關鍵的 npm 模組。
測量
- 如要預覽網站，請按下「查看應用程式」。然後按下
全螢幕
。
如何對這個網站執行 Lighthouse 稽核：
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 按一下「行動裝置」。
- 勾選「成效」核取方塊。
- 取消勾選「稽核」部分的其他核取方塊。
- 點選「Simulated Fast 3G, 4x CPU Slowdown」。
- 勾選「Clear Storage」(清除儲存空間) 核取方塊。選取這個選項後，Lighthouse 不會從快取載入資源，從而模擬首次訪客的體驗。
- 按一下「執行稽核」。
在電腦上執行稽核時，實際結果可能會有差異，但在幻燈片檢視畫面中，您會發現在最終轉譯內容之前，應用程式顯示一片空白畫面。這就是為何最初內容繪製 (FCP) 偏高的原因，以及整體成效分數不理想的原因。
Lighthouse 可協助您修正效能問題，建議前往「商機」專區尋找解決方案。排除禁止轉譯資源的商機會列為商機，而這也是關鍵之處！
最佳化
- 按一下「Remix to Edit」即可編輯專案。
為加快速度，系統已安裝 Critical 元素，且程式碼研究室中包含一個空白的設定檔。
在 critical.js 設定檔中，新增對於關鍵的參照，然後叫用 critical.generate() 函式。這個函式接受包含設定的物件。
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
錯誤處理方式不是強制步驟，但您可以透過這個簡單的方式在控制台中評估作業成效。
設定重要項目
下表列出一些實用的重要選項。您可以前往 GitHub 查看所有可用選項。
| 選項 | 類型 | 說明 |
|---|---|---|
base |
字串 | 檔案的基本目錄。 |
src |
字串 | HTML 原始碼檔案。 |
dest |
字串 | 輸出檔案的目標。如果 CSS 內嵌式輸出檔案為 HTML，如果不是，輸出會是 CSS 檔案。 |
width、height |
數字 | 可視區域的寬度和高度 (以像素為單位)。 |
dimensions |
陣列 | 包含具有寬度和高度屬性的物件。這些物件代表您想使用不需捲動位置 CSS 指定的可視區域。如果 CSS 中有媒體查詢，就能產生涵蓋多種可視區域大小的重要 CSS。 |
inline |
布林值 | 設為 true 時，產生的重要 CSS 會內嵌至 HTML 來源檔案。 |
minify |
布林值 | 如果設為 true，「重要」會減少產生的重要 CSS。擷取需要多種解析度的重要 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 選項，因為當您指定多個可視區域大小時，「最高」會自動縮小要擷取的 CSS。
執行重要執行個體
為 package.json 中的指令碼新增重要問題：
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 按一下「終端機」 (注意：如果「終端機」按鈕未顯示，你可能需要使用「全螢幕」選項)。
如要產生重要 CSS，請在控制台中執行：
npm run critical
refresh
現在，在 index.html 的 <head> 標記中，產生的重要 CSS 會內嵌於 <style> 標記之間，接著是指令碼，可透過非同步方式載入 CSS 的其他部分。
重新評估
請按照程式碼研究室開頭的步驟，再次執行 Lighthouse 效能稽核。結果看起來會像這樣：
