瞭解如何使用重要的 CSS 技術縮短轉譯時間。
瀏覽器必須先下載並剖析 CSS 檔案，才能顯示網頁，導致 CSS 成為會妨礙轉譯的資源。如果 CSS 檔案較大或網路狀況不佳， CSS 檔案要求可能會大幅增加網頁轉譯時間。
只要在 HTML 文件的 <head> 中內嵌擷取的樣式，就不必再發出擷取這些樣式的要求。您可以透過非同步方式載入 CSS 的其餘部分。
縮短轉譯時間可以大幅改善感知效能，特別是在網路條件不佳的情況下。使用行動網路時，無論頻寬為何，都會造成高延遲的問題。
如果「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 檔案。反之，同時執行多項工作的效果不錯。