Core Web Vitals 中的 LCP(Largest Contentful Paint) 是什麼？

目前 Google 所制定的 Core Web Vitals 包含了 3 個指標，分別是：LCP、FID 和 CLS。

在本文中，我們將深入探討 LCP(Largest Contentful Paint) 的定義、其重要性。

了解 LCP(Largest Contentful Paint)

LCP，全名為「最大內容繪製」(Largest Contentful Paint)，白話來說就是「網頁上最大塊的內容顯示出來所需的時間」。這個指標和另一個常見的指標 FCP（首次內容繪製）息息相關，兩者一起看更容易理解。

FCP 代表的是網頁載入過程中，第一個內容元素出來的時間點。不過，這個「第一個」元素不一定就是使用者最關心的內容。對使用者來說，視覺上最大、最顯眼的內容，往往才是最重要的。這也是 LCP 誕生的原因，它更能反映使用者實際感受到的網頁載入速度。

舉個例子（如下圖），假設你在逛一個新聞網站，FCP 可能就是頁面上方的小小標題文字出現的時間。但對你來說，最重要的可能是中間那張吸睛的大幅新聞圖片，而這張圖片完全顯示出來的時間，就是 LCP。

值得注意的是，隨著網頁載入，視覺上最大的內容可能會不斷變化。比如一開始最大的是網站標誌，接著變成一個文字段落，最後才是那張最重要的新聞大圖。因此，LCP 會以最後那個最大元素的載入時間為準。

LCP 的分數

為提供良好的網頁體驗，網頁應在使用者點選連結後的 2.5 秒內顯示最大元素內容。如果載入時間超過 4 秒，則會被視為「不佳」。

• LCP 等於或小於 2.5 秒 表示頁面具有良好的回應能力
• LCP 在 2.5 秒 到 4 秒 之間的頁面的反應能力需要改進
• LCP 大於 4 秒 表示頁面回應能力不佳

如何測量 LCP 的分數

常見的測量方式包括：

1. 透過 Google 的網站 PageSpeed Insights 來評估 LCP 的數值
2. 我們也可以透過 Chrome DevTools 開發者工具直接分析
3. Google 也提供 web-vitals 的套件，可以讓開發者直接從真實用戶端中，獲取實際資料結果

我們會在下一篇文章中，繼續討論優化 LCP 的策略。

參考資料

• Largest Contentful Paint (LCP)