Core Web Vitals 中的 LCP(Largest Contentful Paint) 是什麼?
2024年7月21日
💎 加入 E+ 成長計畫 與超過 400+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源
目前 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 會以最後那個最大元素的載入時間為準。
![cnn.com 網頁 FCP 與 LCP 的時間軸](https://explainthis.s3-ap-northeast-1.amazonaws.com/63d0b119635b4c22829615ed4046ebea.png)
LCP 的分數
為提供良好的網頁體驗,網頁應在使用者點選連結後的 2.5 秒內顯示最大元素內容。如果載入時間超過 4 秒,則會被視為「不佳」。
- LCP 等於或小於 2.5 秒 表示頁面具有良好的回應能力
- LCP 在 2.5 秒 到 4 秒 之間的頁面的反應能力需要改進
- LCP 大於 4 秒 表示頁面回應能力不佳
![LCP 分數](https://explainthis.s3-ap-northeast-1.amazonaws.com/653a0f6846324e7eb398fac4bc2bc2f7.png)
如何測量 LCP 的分數
常見的測量方式包括:
- 透過 Google 的網站 PageSpeed Insights 來評估 LCP 的數值
- 我們也可以透過 Chrome DevTools 開發者工具直接分析
- Google 也提供 web-vitals 的套件,可以讓開發者直接從真實用戶端中,獲取實際資料結果
我們會在下一篇文章中,繼續討論優化 LCP 的策略。