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)