瞭解如何使用重要的 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 檔案。但這麼做的缺點是，很適合同時執行多項工作。