無論您是使用 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 效能稽核作業。您得到的結果看起來會像這樣: