最大內容繪製 (LCP) 是 Lighthouse 報告「效能」部分追蹤的其中一項指標。每項指標都會擷取網頁載入速度的部分面向。
Lighthouse 以秒為單位顯示 LCP:
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 元素完全載入之間之間的差距。 |