瞭解如何使用重要的 CSS 技術來改善轉譯時間。
瀏覽器必須先下載並剖析 CSS 檔案才能顯示網頁,讓 CSS 成為會妨礙顯示的資源。如果 CSS 檔案較大或網路狀況不佳,提出 CSS 檔案的要求可能會大幅增加轉譯網頁所需的時間。
在 HTML 文件的 <head>
中內嵌擷取的樣式,就不用提出額外要求來擷取這些樣式。系統會以非同步方式載入其餘的 CSS。
縮短轉譯時間可大幅提升使用者感知的效能,尤其是在網路狀況不佳的情況下。使用行動網路時,無論頻寬如何,高延遲都會造成問題。
如果你的首次顯示內容繪製 (FCP) 偏低,並且在 Lighthouse 稽核中發現「消除轉譯阻斷資源」的機會,建議你讓重要的 CSS 發揮作用。
如要盡量減少初次轉譯的往返次數,請盡量將不需捲動位置的內容保持在 14 KB (壓縮後) 以下。
運用這項技巧可達到的成效影響取決於網站類型。一般來說,網站的 CSS 越多,內嵌 CSS 的可能影響力就會越大。
工具總覽
有許多優秀的工具可以自動判斷網頁的重要 CSS。手動做到這件事會相當繁瑣,它需要分析整個 DOM,才能決定要在可視區域中每個元素套用的樣式。
最高
Critical:能擷取、壓縮並壓縮不需捲動位置的 CSS,並以 npm 模組的形式提供。這可以與 Gulp (直接) 或 Grunt (做為plugin) 搭配使用,此外也有 Webpack 外掛程式。
這是一項簡單的工具,能簡化整個程序。您甚至不需要指定樣式表,FCritical 會自動偵測。也支援擷取用於多種螢幕解析度的重要 CSS。
criticalCSS
CriticalCSS 是另一個 npm 模組,可擷取不需捲動位置的 CSS。這個 API 也可以 CLI 形式使用。
這個工具沒有內嵌和壓縮重要的 CSS 的選項,但可讓您強制納入實際上不屬於關鍵 CSS 的規則,並讓您更精細地控管加入 @font-face
宣告。
閣樓套房
如果您的網站或應用程式包含大量樣式或樣式,而且要動態插入 DOM (常見於 Angular 應用程式),就很適合選用 Penthouse。基本原理是運用 Puppeteer,甚至提供線上代管版本。
Penthouse 不會自動偵測樣式表,因此您必須指定要產生重要 CSS 的 HTML 和 CSS 檔案。但這麼做的缺點是,很適合同時執行多項工作。