瞭解如何使用重要的 CSS 技術縮短轉譯時間。
瀏覽器必須先下載並剖析 CSS 檔案,才能顯示網頁,導致 CSS 成為會妨礙轉譯的資源。如果 CSS 檔案較大或網路狀況不佳, CSS 檔案要求可能會大幅增加網頁轉譯時間。
![插圖:筆電和行動裝置上的網頁超出螢幕邊緣](https://web.developers.google.cn/static/articles/extract-critical-css/image/an-illustration-a-laptop-aa65b58e2ff2a.png?hl=zh-tw)
只要在 HTML 文件的 <head>
中內嵌擷取的樣式,就不必再發出擷取這些樣式的要求。您可以透過非同步方式載入 CSS 的其餘部分。
![HTML 檔案,在標頭中內嵌重要 CSS](https://web.developers.google.cn/static/articles/extract-critical-css/image/html-file-critical-css-i-fe0cbe9d63e5.png?hl=zh-tw)
縮短轉譯時間可以大幅改善感知效能,特別是在網路條件不佳的情況下。使用行動網路時,無論頻寬為何,都會造成高延遲的問題。
![幻燈片檢視畫面的比較方式,是指透過 3G 連線載入含有會妨礙轉譯 CSS (頂端) 的頁面,以及透過 3G 連線載入內含重要 CSS (底部) 的相同頁面的情形。頂端幻燈片顯示六個空白影格,最後才顯示內容。底部幻燈片會在第一個畫面中顯示有意義的內容。](https://web.developers.google.cn/static/articles/extract-critical-css/image/filmstrip-view-comparison-d7cdd821e772.png?hl=zh-tw)
如果「First Contentful Paint (FCP)」不佳,並顯示「清除禁止轉譯資源」進行 Lighthouse 稽核作業是個好機會,建議您採用 重要的 CSS 供應商
為了盡量減少首次轉譯所需的往返次數,請盡量將不需捲動位置內容控制在 14 KB (壓縮) 以下。
根據您的網站類型而定,這種做法可以達到的成效影響。一般來說,網站的 CSS 越多,內嵌 CSS 帶來的影響就越大。
工具總覽
有許多出色的工具可自動判斷某個網頁的重要 CSS。好消息,手動操作可能會繁瑣的作業程序。必須分析整個 DOM,才能判斷要套用至可視區域中各元素的樣式。
最高
關鍵:擷取、壓縮並內嵌在不需捲動位置的 CSS 上方,且以 npm 模組的形式提供。可與 Gulp (直接) 或 Grunt 搭配使用 (做為外掛程式),而且也提供 webpack 外掛程式。
它是一種簡單的工具,不需要耗費大量心力在過程中執行。您甚至不需要指定樣式表,重要功能會自動偵測樣式表。它也支援擷取多種螢幕解析度的關鍵 CSS。
criticalCSS
CriticalCSS 是擷取不需捲動位置的 CSS 的另一個 npm 模組。您也能以 CLI 的形式使用。
這個方法無法內嵌及壓縮重要的 CSS,但可讓您強制納入實際上不屬於重要 CSS 的規則,並讓您更精細地控管納入 @font-face
宣告。
閣樓套房
如果您的網站或應用程式含有大量可動態插入 DOM 的樣式或樣式 (常見於 Angular 應用程式),就適合選用 Penthouse。這個模型實際上也使用 Puppeteer,甚至提供線上代管版本。
Penthouse 無法自動偵測樣式表,您必須指定要產生重要 CSS 的 HTML 和 CSS 檔案。反之,同時執行多項工作的效果不錯。