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 的策略。