無論您是使用 UI 程式庫還是手持樣式，傳送大量 CSS 會導致轉譯的延遲，因為瀏覽器必須先下載和剖析 CSS 檔案才能顯示網頁。
這個回應式冰淇淋藝廊使用 Bootstrap 建立。UI 程式庫 (例如 Bootstrap) 可加快開發速度，但這類程式庫通常會消耗過多且不必要的 CSS，導致載入時間縮短。Bootstrap 4 是 187 KB，而另一個 UI 程式庫的另一個 UI 程式庫則是未壓縮的 730 KB。即使經過壓縮和 gzip 壓縮，Bootstrap 的體重仍約為 20 KB，初次往返時間超過 14 KB 門檻。
「關鍵」這項工具能夠擷取、縮小並內嵌不需捲動位置的 CSS。這樣一來，即使網頁上其他部分的 CSS 尚未載入，不需捲動位置的內容仍盡快轉譯。在本程式碼研究室中，您將瞭解如何使用 Critical 的 npm 模組。
測量
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示
。
如何在這個網站執行 Lighthouse 稽核：
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下「Lighthouse」分頁標籤。
- 按一下「行動裝置」。
- 勾選「成效」核取方塊。
- 清除「稽核」部分的其他核取方塊。
- 按一下「Simulated Fast 3G, 4x CPU Crashdown」。
- 勾選「清除儲存空間」核取方塊。選取此選項後，Lighthouse 不會從快取載入資源，如此就能模擬初次造訪的訪客如何瀏覽網頁。
- 按一下「執行稽核」。
在電腦上執行稽核時，實際結果可能有所不同，但在幻燈片檢視畫面中，你會發現應用程式在最終算繪內容之前，會先顯示空白畫面。這就是為何首次顯示內容所需時間 (FCP) 偏高的原因，以及整體成效分數不好的原因。
Lighthouse 可協助您修正效能問題，請前往「Opportunity」(商機) 部分查看解決方案。關鍵在於排除會妨礙顯示的資源，這也是為什麼會成為關鍵所在！
最佳化
- 按一下「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');
}
});
錯誤處理功能並非必要，但您可以輕鬆透過主控台評估作業是否成功。
設定重大
下表提供一些實用的「重要」選項。如要查看所有可用選項，請前往 GitHub。
| 選項 | 類型 | 說明 |
|---|---|---|
base |
字串 | 您檔案的基礎目錄。 |
src |
字串 | HTML 來源檔案。 |
dest |
字串 | 輸出檔案的目標。如果 CSS 內嵌於 HTML，否則輸出結果會是 CSS 檔案。 |
width、height |
數字 | 可視區域的寬度和高度 (以像素為單位)。 |
dimensions |
陣列 | 包含具有寬度和高度屬性的物件。這些物件代表您想使用不需捲動位置的 CSS 指定的可視區域。如果 CSS 中有媒體查詢，這樣就能產生涵蓋多個可視區域大小的重要 CSS。 |
inline |
boolean | 如果設為 True，產生的重要 CSS 會內嵌在 HTML 來源檔案中。 |
minify |
boolean | 設為 true 時，Critical 會縮小產生的重要 CSS。擷取重要 CSS 以用於多個解析度時，可以省略，因為 Critical 會自動壓縮，避免重複納入規則。 |
以下設定範例說明如何針對多種解析度擷取重要的 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 (適用於標準筆電螢幕)。
由於指定多個可視區域大小，「嚴重」會自動縮小擷取的 CSS，因此省略 minify 選項。
執行關鍵
在 package.json 中的指令碼中加入 Critical：
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 按一下「終端機」 (注意：如果「終端機」按鈕未顯示，您可能需要使用「全螢幕」選項)。
如要產生重要的 CSS，請在控制台中執行下列指令：
npm run critical
refresh
現在，在 index.html 的 <head> 標記中，產生的重要 CSS 會內嵌在 <style> 標記之間，接著是指令碼，以非同步方式載入其餘的 CSS。
再次評估
請按照程式碼研究室初始步驟，再次執行 Lighthouse 效能稽核作業。您得到的結果看起來會像這樣：
