Critical CSS
Critical CSS 是首屏渲染必需的最小 CSS。把它內嵌可加速首屏,其他 CSS 可延後載入。
定義
Critical CSS 指首屏渲染所需的最小 CSS 集合。你可以把 critical CSS 內嵌到 HTML,讓瀏覽器不必等待外部 CSS 就能先渲染首屏,並把其餘 CSS 延後載入,改善 FCP/LCP。
為什麼重要
- 降低 render-blocking CSS 對首屏的影響
- 改善 FCP/LCP 與速度體感
- 對大量 CSS 的站點效果更明顯
怎麼做(實作重點)
- 抽出首屏必要樣式內嵌到 HTML
- 其餘 CSS 以非阻塞方式載入(例如 preload + onload)
- 避免 critical CSS 過大(反而增加 HTML 下載量)
常見問題
關於這個詞彙的常見問答。