每个网页都由数十或数百个元素组成。其中包括文本、图像、按钮、小部件等等。每个元素的大小各不相同，最大的调用会告诉您很多关于使用称为最大内容绘制 (LCP) 的指标优化您的网站的情况。

在本文中，我们将解释LCP（英文全称Largest Contentful Paint）的概念。我们还将向您展示如何测量此数据点并解释结果。最后，我们将讨论如何优化您的LCP分数。

什么是最大内容绘制 (LCP)？

在大多数网页上，有一个元素因其大小和突出程度而与众不同。例如，考虑这个着陆页，其中巨无霸Banner部分在视口中占主导地位：

那个巨无霸Banner部分代表这个特定页面的最大内容绘制（LCP）。也就是说，LCP是网站渲染包含最多内容的元素所花费的时间。

如果您想找出此页面的LCP，您需要测量加载英雄部分所需的时间。理论上，如果您的LCP分数较低，则意味着您的网站优化得很好，并且可以为用户快速加载。

重要的是要了解LCP分数可能（并且希望会）与您网站的整体加载时间不同。您可能有一个页面需要 3 秒才能完全加载，但它的LCP可能只有 2 秒。这是因为大多数现代网站还在文本和媒体文件之上加载脚本。

通常，LCP与First Contentful Paint (FCP) 齐头并进。这是一个指标，它告诉您当有人访问您的网站时，呈现任何内容的第一个元素需要多长时间 。结合使用这些指标（或 Google的Core Web Vitals），您可以比整体加载时间更深入地了解网站的性能。

请记住，在衡量您网站的LCP时，Google不会考虑所有内容。它将忽略可缩放矢量图形 (SVG) 文件和视频等元素，但这些元素可能会包含在Google的Core Web Vitals的未来更新中。

如何测量LCP

通常，确定您网站上最大的内容元素是很容易的。您所要做的就是等待页面完全加载并环顾四周。在大多数情况下，有一个部分或元素比其他部分或元素更突出。正如我们上面提到的，它可能是英雄部分，也可能是博客中的实际帖子内容。

它通常是一个图像或文本块（例如上面的英雄部分或一般的博客内容）。LCP也因用户而异，因为它基于他们的视口（或首屏内容）。

LCP的真正诀窍在于测量特定元素加载所需的时间。（不是页面本身。）幸运的是，如果您曾经使用过可以衡量加载时间的工具或服务，那么它很可能还包含详细的指标，例如FCP和LCP分数。

例如，考虑PageSpeed Insights。您可以输入任何URL，服务将对该页面进行完整的性能测试。在结果中，您将看到总体性能得分。实测数据部分下还有其他指标的细分——包括LCP：

PageSpeed Insights收集来自多个用户的真实性能数据，并使用它为您提供一段时间内的汇总分数。这种方法比使用单个测试来确定您网站的性能要精确得多。

此外，您可以获得每个分数的百分比细分。在上面的例子中，我们可以看到89%的页面加载发生在1.5秒内，这是一个了不起的分数。但是，其余11%的页面加载不在该范围内。这意味着对于某些用户来说，LCP需要更长的时间来解决。

重要的是要了解，即使您的网站优化得很好，加载时间也会 因用户群而异。某些访问者的Internet连接速度可能较慢或距离您的服务器太远。这些只是在某些情况下加载时间可能更长的众多原因中的两个。这就是为什么有一个平均分数作为参考至关重要。

如果您进一步向下滚动PageSpeed Insights结果页面，您将看到实验室数据部分。在这里，Google为您提供了它刚刚在您的网页上运行的测试的精确结果：

PageSpeed Insights使用此实验室数据为您提供您在结果开始时看到的总分。实验室数据不能像汇总的实测数据信息那样提供全面的信息。但是，它仍然可以让您对网站的性能有一个很好的了解。

理想情况下，您的LCP分数应低于2.5秒（相比之下，FCP是理想的1.8秒）。这个时间越低越好。为了获得最佳分数和体验，您的整体加载时间应保持在3秒以下。在那之后，您通常会开始看到跳出率显着增加。

根据我们的经验，PageSpeed Insights 是您可以用来衡量LCP和整体加载时间的最佳工具。但是，如果您为您的网站设置了Search Console，您也可以访问相同的信息，我们绝对推荐用于搜索引擎优化 (SEO) 目的。

如果您想查看 Google 之外的内容，您还可以使用浏览器的开发工具手动测量LCP时间。大多数开发工具包使您能够测量页面加载时间，提供有关加载每个元素和处理每个请求所需时间的详细信息。然而，这种手动方法涉及到很多 比使用第三方服务更多的工作。

您还可以使用GT Metrix和Pingdom等速度测试服务来查看对LCP和其他页面加载指标的更多了解。

如何优化网站LCP分数

如果您可以识别页面上最大的元素，则应该能够对其进行优化。例如，如果该元素是图像，您始终可以使用压缩工具来减小其文件大小并提高LCP分数。

但是，这种方法仅适用于您的网站没有得到很好的优化。如果您已经采取措施提高网站的性能，那么您需要考虑不同的方法来优化其LCP分数。

根据我们的经验，您可以通过以下最有效的优化来提高网站的LCP分数：

• 调整大小和压缩图像。在大多数情况下，图像将决定您的 LCP 分数。根据经验，您应该调整和优化上传到网站的每张图片（可以考虑图片压缩插件）。WordPress 5.8开始兼容WebP图片，这可以帮助许多网站进入LCP时代。
• 选择更好的托管服务。如果您已经努力优化您的网站，但加载时间仍然太长，这可能是由于您的网络主机。您可能使用的计划跟不上您网站的受欢迎程度，或者您的虚拟主机可能无法提供您需要的性能。无论您在网站上投入多少工作，可靠的托管计划都可以成败。
• 使用内容交付网络 (CDN)。 CDN可以在世界各地的服务器集群上缓存您网站的副本，并将其提供给访问者。一些 CDN 还提供特定于图像的服务，这有助于极大地降低 LCP 分数。
• 消除渲染阻塞资源。如果资源在执行之前停止加载您网站上的元素，则该资源是“渲染阻塞”的。通常，这些是您网站的关键结构，例如HTML、CSS和JavaScript。根据经验，您希望消除或推迟执行此操作的元素，或者在其他所有内容加载完成后强制它们运行。许多插件，例如WP Rocket可以通过切换为您完成此操作。

总的来说，如果您正在以任何方式改善网站的性能，所有这些优化方法都是标准建议。如果你花时间优化你的网站，你的LCP分数应该会相应地下降，你的用户会因此而感到高兴。

关于最大内容绘制 (LCP) 的常见问题

理解像LCP这样的概念比理解页面的单个整体加载时间更不直观。考虑到这一点，以下是我们看到的有关LCP分数的一些最常见问题。

LCP如何影响我网站的性能？

在衡量您网站的性能时，单一的整体加载时间并不能让您准确了解您的页面优化的程度。专注于 LCP 等特定指标可让您更好地了解服务器的响应方式。它还告诉您用户完整查看您的网站需要多长时间。专门针对 LCP 或其他指标只会提高您网站的整体性能，因为它们是更大整体的一部分。

LCP与页面加载时间相同吗？

网站所有者通常会测试他们的页面并查看每个页面的加载时间。一些性能测量工具给你一个单一的数字，没有别的。但是，LCP等个别指标可帮助您更好地了解用户访问您的网站时实际发生的情况。

LCP很可能在整个页面加载之前发生。并且一些元素可能会在它之后填充（更大的文件大小或图像）。理想情况下，您的LCP时间将比您的整体页面加载时间更快。

除了LCP，还有哪些其他Web核心要素？

当谷歌试图确定一个网站是否能提供强大的用户体验（UX）时，其Core Web Vitals是衡量标准。

LCP只是其中之一。其他包括首次输入延迟 (FID) 和累积布局偏移 (CLS)。您还可以检查First Contentful Paint (FCP)，它与用户对页面加载速度的看法更相关。

小结

在评估您网站的性能时，最好不要关注单个数字，例如加载主页所需的时间。虽然这很重要，但 LCP 等个别指标可以帮助您确定可能需要改进的特定元素和领域。

每个页面的最大内容绘制让您了解访问者必须等待多长时间，直到页面加载到足以让他们理解它。使用 FCP，它是查看页面所需的时间。即便如此，他们也可能需要等待更长的时间，直到它成为可交互的，这可能会在 LCP 之后出现。这个指标是一个难题。但是，通过优化此分数，您可以在您的网站上提供更好的用户体验。