跳至主要內容

    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 下載量)

    常見問題

    關於這個詞彙的常見問答。

    回到詞彙表