最大的内容绘制 (LCP)：它是什么以及如何为此优化您的网站

By WordPress花园官方账号

2021年11月3日

0

269

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

在本文中，我们将解释 LCP 的概念。我们还将向您展示如何测量此数据点并解释结果。最后，我们将讨论如何优化您的 LCP 分数。让我们开始工作吧！

订阅我们的 YouTube 频道

什么是最大内容涂料 (LCP)？

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

Divi 登陆页面示例

那个英雄部分代表这个特定页面的最大内容绘制（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 结果屏幕

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

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

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

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

PageSpeed Insights 实验数据

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（或 Divi 主题本身）可以通过切换为您完成此操作。

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

如果您是 Divi 用户，其中许多事情都是自动为您完成的。例如，Divi 主题的关键 CSS 功能会自动取出阻塞渲染的资源并推迟它们的加载。这就是 Divi 速度如此之快并且开箱即用地获得出色 LCP 分数的众多原因之一！

关于最大内容涂料 (LCP) 的常见问题

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

LCP 如何适应我网站的整体性能？

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

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

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

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

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

Core Web Vitals 是 Google 在尝试确定网站是否提供强大的用户体验 (UX) 时考虑的指标。 LCP 只是其中之一。其他包括首次输入延迟 (FID) 和累积布局偏移 (CLS)。您还可以检查 First Contentful Paint (FCP)，它与用户对页面加载速度的看法更相关。