無論您使用 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
![成功訊息顯示「Generate 重要 CSS」在控制台中查看](https://web.developers.google.cn/static/articles/codelab-extract-and-inline-critical-css/image/success-message-saying-g-e2359b437448f.png?authuser=19&hl=zh-tw)
現在,在 index.html
的 <head>
標記中,產生的重要 CSS 會內嵌於 <style>
標記之間,接著是指令碼,可透過非同步方式載入 CSS 的其他部分。
![index.html 加上重要的 CSS](https://web.developers.google.cn/static/articles/codelab-extract-and-inline-critical-css/image/indexhtml-inlined-criti-9c5e8661497d1.png?authuser=19&hl=zh-tw)
重新評估
請按照程式碼研究室開頭的步驟,再次執行 Lighthouse 效能稽核。結果看起來會像這樣: