最大內容繪製

最大內容繪製 (LCP) 是 Lighthouse 報告「效能」部分追蹤的其中一項指標。每項指標都會擷取網頁載入速度的部分面向。

Lighthouse 以秒為單位顯示 LCP:

Lighthouse 最大內容繪製稽核螢幕截圖

LCP 測量的項目

LCP 會測量可視區域中最大內容元素算繪到螢幕的時機。這相當於在使用者看得到網頁的主要內容時。如要進一步瞭解如何判定 LCP,請參閱「定義最大內容繪製」。

Lighthouse 如何決定你的 LCP 分數

Lighthouse 會從 Chrome 的追蹤工具擷取 LCP 資料。

下表說明如何解讀 LCP 分數:

LCP 時間
(秒)
顏色標記
0-2.5 綠色 (快速)
2.5-4 橘色 (中等)
超過 4 紅色 (慢)

如何提高 LCP 分數

如果 LCP 是圖片,時間可分成四個階段。瞭解哪些階段花費的時間最長,可協助您將 LCP 最佳化。Lighthouse 會顯示 LCP 元素,以及「最大內容繪製元素」診斷中的階段細目。

LCP 階段 說明
第一個位元組時間 (TTFB) 從使用者開始載入網頁,到瀏覽器收到 HTML 文件回應第一個位元組的時間。進一步瞭解 TTFB
載入延遲 TTFB 與瀏覽器開始載入 LCP 資源時的差異。
載入時間 載入 LCP 資源本身所需的時間。
轉譯延遲 LCP 資源載入完成到 LCP 元素完全載入之間之間的差距。

資源