最大的内容油漆解释：如何改善你的时间

为如何改进您网站上的 Largest Contentful Paint 而苦恼？ 或者不确定 Largest Contentful Paint 的含义以及为什么您一开始就需要关心它？

无论您从哪里开始，这篇文章都适合您，因为您将学习关于 Largest Contentful Paint 的所有知识。

这包括 Largest Contentful Paint 的含义、重要性、衡量方式以及改进方式。

您可以使用下面的目录根据您当前的知识水平跳转到特定部分。 或者，继续阅读以从头开始。

什么是 Largest Contentful Paint (LCP)？ 解释最大的内容绘画意义

Largest Contentful Paint 是一种性能指标，用于衡量加载网页主要内容所需的时间。

Largest Contentful Paint 是 Google Core Web Vitals 指标的一部分，还有 Cumulative Layout Shift (CLS) 和 First Input Delay (FID)。

在更技术层面上，Largest Contentful Paint 测量从用户启动页面加载到最大文本块、图像或视频在视口中呈现所需的时间。

就 LCP 而言，“主要内容”是什么意思？

好吧，主要内容将取决于所讨论的实际页面，但它可以是以下任何一种：

• 文本——更具体地说，任何包含文本节点或其他行内文本元素的块级元素。
• Image – <img> 元素内的元素或 <svg> 元素内的 <image> 元素。
• 视频——任何 <video> 元素（它使用海报图像）。
• 具有背景图像的元素——仅当通过 CSS url() 函数加载时（它不适用于 CSS 渐变）。

在这篇文章的后面，您将学习如何为您网站上的任何页面找到确切的 Largest Contentful Paint 元素。

Largest Contentful Paint 与 First Contentful Paint

您可能会遇到的一个常见问题是 Largest Contentful Paint 与 First Contentful Paint 之间的区别是什么，这是另一个常见的性能指标。

虽然这两个术语相似，但主要区别在于 Largest Contentful Paint 衡量页面“主要内容”加载所需的时间，而 First Contentful Paint 衡量“第一个对象”加载所需的时间（无论是否这是主要内容）。

基本上：

• LCP = 仅主要内容
• FCP = 第一条内容，无论该内容是什么

因此，您的 LCP 时间几乎总是略高于 FCP 时间，因为“主要内容”元素通常不是最先加载的。

为什么您网站的最大内容绘制时间很重要？

您网站的 Largest Contentful Paint 时间很重要的主要原因有两个：

1. 用户体验
2. 搜索引擎优化

用户体验

您应该关心站点的 Largest Contentful Paint 时间的最大原因是该指标可以很好地代表了解用户在站点性能方面的体验。

大多数用户不关心您的网站完全加载每个脚本和元素需要多长时间。 相反，他们关心他们需要多长时间才能开始从您的网站获得价值。

Largest Contentful Paint 通过查看加载主要内容需要多长时间来很好地尝试衡量“价值”时刻。

如果您优化您的站点以实现快速的 Largest Contentful Paint 时间，您可以非常自信地为用户提供可靠的站点体验，至少在性能方面（您还需要一个客户友好的设计和良好的可用性）。

当然，这并不意味着您应该忽略其他性能指标。 我们始终建议全面了解您网站的性能和瓶颈，这就是我们创建自己的应用程序性能监控 (APM) 工具的原因，如果您使用 Kinsta 托管 – Kinsta APM，该工具可免费使用。

搜索引擎优化 (SEO)

在搜索引擎优化方面，Largest Contentful Paint 是谷歌核心网络生命指标三重奏的一部分，谷歌开始在其 2022 年页面体验算法更新中将其用作 SEO 排名因素。

这意味着 Largest Contentful Paint 时间不佳可能会拖累您的网站在 Google 搜索结果中的表现。

虽然内容质量/相关性和反向链接等其他因素仍然在您的网站排名中发挥更大的作用，但重要的是要优化您网站的 Largest Contentful Paint 时间，以确保您从 SEO 工作中获得最大收益。

什么会影响最大的内容绘画分数？

两种“主要”类型的问题会影响页面的 Largest Contentful Paint 时间：

1. 服务器响应初始 HTML 文档需要多长时间。
2. 加载实际 LCP 资源需要多长时间。

第一类问题涉及服务器响应时间，即首字节时间 (TTFB)。 在用户的浏览器甚至可以考虑加载主要内容之前，它首先需要从服务器获得响应。

以下是影响这一点的一些常见问题：

• 不使用页面缓存——不使用页面缓存会强制服务器在响应 HTML 文档之前做更多的“工作”。
• 慢速托管——无论您做什么，慢速托管服务提供商的 TTFB 总是很慢。
• 不使用 CDN – 内容分发网络 (CDN) 可以通过从其全球网络提供页面来加速 TTFB，而不是要求用户从您站点的原始服务器下载它们。

在您站点的服务器交付初始 HTML 文档后，在加载实际主要内容元素时可能会出现进一步的瓶颈。

以下是影响这一点的一些常见问题：

• 呈现阻塞的 JavaScript 或 CSS（或一般未优化/不必要的代码） ——如果用户的浏览器在加载主要元素之前需要下载和/或处理不必要的 JavaScript 或 CSS，这将减慢您的 LCP。
• 未优化的图像——如果 LCP 元素是图像，使用未优化的图像会减慢您的时间，因为较大的图像需要更长的下载时间。
• 未优化的字体加载——如果 LCP 元素是文本，以未优化的方式加载自定义字体会使该文本显示的时间更长。
• 未压缩的文件——如果您没有使用 Gzip 或 Brotli 等压缩技术，这将使用户的浏览器需要更长的时间来下载您网站的文件。

根据您的站点，您可能会在两个领域或其中一个领域遇到瓶颈。 您稍后将在本文中了解如何解决所有这些问题。

什么是良好的最大内容绘画时间？

Google 将“良好”的最大内容绘制时间定义为低于 2.5 秒。

如果您页面的 Largest Contentful Paint 时间在 2.5 到 4.0 秒之间，Google 会将其归类为“需要改进”。 如果您的页面时间超过 4.0 秒，Google 会将其定义为“差”。

这是来自 Google 的图形，直观地显示了这一点：

如何测量最大含量的油漆：最好的 LCP 测试工具

您可以使用多种工具来测试您网站的 Largest Contentful Paint 性能——让我们来看看一些最有用的……

PageSpeed 洞察力

PageSpeed Insights 是评估 Largest Contentful Paint 的最佳工具之一，因为它提供了四个有用的信息：

1. 您可以从 Chrome 用户体验报告（如果您的网站有足够的流量可以包含在报告中）中看到您网站与真实用户的最大内容绘制时间。
2. 您可以运行模拟测试来查看您的站点的性能。
3. Google 会告诉您它用于测试的实际 LCP 元素，这让您知道要优化哪个元素。
4. Google 将提供有关如何改进 LCP 时间的建议。

下面是如何使用它：

1. 转到 PageSpeed Insights 网站。
2. 输入要测试的页面的 URL。
3. 单击分析。

然后，Google 会向您显示移动设备和桌面设备的结果——请确保同时选中这两项。

要找到 Google 用于计算 LCP 的主要元素，您可以向下滚动到Diagnostics部分并展开Largest Contentful Paint 元素部分：

同样，确保检查移动设备和桌面设备，因为每个设备的 LCP 元素可能不同。

Chrome 开发者工具

您还可以使用 Performance 选项卡或其 Lighthouse 审核功能直接从 Chrome 开发人员工具测试 Largest Contentful Paint 时间。 我们建议使用“性能”选项卡，因为它可以为您提供更多信息。

以下是如何开始：

1. 打开您要测试的页面。
2. 打开 Chrome 开发者工具。
3. 转到“性能”选项卡。
4. 确保选中Web Vitals框。
5. 单击重新加载按钮（如下所示）。

您现在应该看到对您网站的完整分析。

如果将鼠标悬停在网络选项卡中的 LCP 上，您可以看到时间：

如果将鼠标悬停在Timings选项卡中的 LCP 上，您可以看到实际的 LCP 元素：

谷歌搜索控制台

虽然 Google Search Console 不允许您测试单个页面的 Largest Contentful Paint 时间，但它对于评估整个网站的性能非常有用。

您网站上的每个页面都有不同的 LCP 时间，因此您不能只测试您的主页然后就此收工。

使用 Google Search Console，您将能够看到您网站上的每个页面在 Google 的“好”、“需要改进”和“差”分类中的位置。 性能数据来自 Chrome UX 报告，因此它基于真实的用户数据。

如果您还没有这样做，您首先需要使用 Google Search Console 验证您的网站。

完成后，以下是访问 LCP 报告的方法：

1. 打开您网站的 Google Search Console。
2. 转到“体验”选项卡下的Core Web Vitals 。
3. 单击移动或桌面图表旁边的打开报告。
4. 在为什么 URL 不被认为是好的部分中查找任何问题。 如果单击问题，您可以看到有关哪些 URL 导致问题的更多信息。

*确保同时检查桌面和移动结果，因为每个结果中的数据可能不同。

网页测试

WebPageTest 是运行模拟性能测试的另一个方便的选项。

与 PageSpeed Insights 不同，WebPageTest 允许您完全自定义各种测试指标，例如测试位置、连接速度、设备等。 这是与其他工具相比使用它的主要好处——它为您提供了更多配置测试的选项。

以下是运行测试的方法：

1. 转到网页测试。
2. 添加要测试的页面 URL。
3. 展开高级配置选项以完全配置您的测试。

在结果页面上，您将看到 LCP 数据以及大量其他性能指标（包括瀑布分析）。

如何找到最大的内容绘画元素

如果您想改进 Largest Contentful Paint，准确了解 Google 正在使用哪个元素来计算您的 LCP 时间会很有帮助。

例如，如果您知道 Google 正在使用您的主页图片作为主页上的 LCP 元素，您就会知道如果您想改善主页的 LCP 时间，就需要找到尽快提供该主页图片的方法。

正如我们之前提到的，您可以使用 PageSpeed Insights 或 Chrome 开发者工具找到最大的 Contentful Paint 元素。

确保同时检查移动和桌面结果，因为您的 LCP 元素在不同设备上可能会有所不同。

如何改进 WordPress（或其他平台）中最大的内容绘制

现在您已经了解了 Largest Contentful Paint 的全部内容，让我们了解一些有关如何改进 WordPress 中 Largest Contentful Paint 的可行技巧。

虽然我们将重点关注 WordPress 的这些技巧，但所有技巧都是通用的，适用于其他类型的网站。

设置缓存以缩短服务器响应时间

缓存可以减少服务器在将完成的 HTML 文档传送到访问者浏览器之前需要执行的处理工作，从而缩短服务器响应时间。

如果您使用 Kinsta 托管 WordPress 网站，则无需担心配置缓存，因为 Kinsta 会自动为您实施优化的缓存。

如果您在其他地方托管，您可以使用 WP Super Cache 等免费插件或 WP Rocket 等付费插件在您的网站上启用缓存。

有关更多选项，请查看我们关于最佳 WordPress 缓存插件的帖子。

升级到更快的 WordPress 托管

虽然此列表中的所有策略都可以帮助您缩短 LCP 时间，但绝非拐弯抹角：

如果您使用缓慢、未优化的 WordPress 托管，您的 LCP 时间总是会受到主机质量的限制。

您也许可以让事情变得更好一些，但如果您的主机速度很慢，您将始终难以实现低于 2.5 秒的 LCP 时间。

如果您想以最简单的方式改善最大的内容绘画时间，您可以将您的网站迁移到 Kinsta。 Kinsta 不仅提供性能优化的托管基础​​设施，而且我们还有内置功能来处理此列表中的许多其他优化。

这意味着您可以专注于发展您的网站，而不是忙于优化 Largest Contentful Paint 时间。

如果您有兴趣，Kinsta 将免费从任何主机迁移无限的网站——在此处了解有关免费迁移的更多信息。

如果您仍然犹豫不决——请先尝试此列表中的其余提示。 但是，如果您在完成此列表中的所有操作后仍在苦苦挣扎，那么您可能只需要更好的托管服务。

使用内容分发网络 (CDN)

如果没有 CDN，您网站的所有访问者都需要从您的托管服务器下载页面的 HTML 和静态资产。

如果您的访问者靠近您的服务器，这通常不是问题。 但是，如果您的访问者分布在世界各地，那么由于访问者与您网站的服务器之间的物理距离，这可能会降低您的网站速度。

使用 CDN，您可以将站点的静态资产（甚至站点的已完成 HTML 页面）分发到 CDN 的全球网络。 这样，访问者就可以从CDN最近的位置下载文件，速度会快很多。

如果您使用 Kinsta 托管，我们建议使用 Kinsta 的边缘缓存功能以获得最佳效果。

Kinsta 的边缘缓存功能通过将您站点的完整 HTML 页面和静态资产缓存到 Cloudflare 的全球网络（而不是像大多数 CDN 解决方案那样只缓存静态资产）来工作。

这意味着您网站的访问者可以从最近的边缘位置下载完整页面，从而加快服务器响应时间和加载 LCP 资源所需的时间。

要启用 Kinsta 的边缘缓存，请转到 MyKinsta 中站点仪表板中的边缘缓存选项卡。

如果您在其他地方托管，您可以使用流行的 CDN 服务（例如 KeyCDN、Bunny、StackPath 等）为您站点的静态资产设置 CDN。

避免渲染阻塞 JavaScript（延迟或删除）

呈现阻塞 JavaScript 是在您的主要 LCP 元素之前加载的 JavaScript，即使当时不需要它。

通过延迟加载 LCP 元素，它会减慢您的 LCP 加载时间。

要解决此问题，您可以实施一些策略：

• 如果可能，删除不必要的 JavaScript。
• 推迟 JavaScript，这样它就不会阻止加载您网站的主要元素。
• 延迟 JavaScript，直到用户与您的站点交互。

对于大多数人来说，实现此功能的最简单方法是通过 Autoptimize 或 WP Rocket 等插件。

有关如何执行此操作的完整指南，我们有两个非常详细的帖子：

• 如何消除 WordPress 上的渲染阻塞资源
• 如何延迟 JavaScript 的解析

避免渲染阻塞 CSS 并优化 CSS 交付

正如未经优化的 JavaScript 会减慢您的网站速度一样，未经优化的 CSS 也会造成同样的后果。

本质上，您希望加载尽可能少的 CSS。 对于确实需要加载的 CSS，您希望以最佳方式加载它。 通常，这意味着您希望尽早加载重要的 CSS，同时将非关键 CSS 延迟到加载过程的后期。

如果您不是开发人员，实现此目的的最简单方法是使用性能优化插件，如 Perfmatters、WP Rocket 或 FlyingPress。

例如，WP Rocket 提供了内置功能，可以逐页删除未使用的 CSS 并以最佳方式提供 CSS。

如果您想更深入地了解如何执行所有这些操作，请查看我们关于如何优化 CSS 的完整指南。

精简 HTML、CSS 和 JavaScript

除了上述代码优化技术之外，您还需要精简网站的 HTML、CSS 和 JavaScript。

从本质上讲，这会从您网站的代码中删除不必要的字符和空格以缩小其大小。

如果您使用 Kinsta 托管，Kinsta 可以通过我们的 Cloudflare 集成自动处理缩小。 以下是控制此功能的方法：

1. 在 MyKinsta 中打开您网站的仪表板。
2. 转到CDN选项卡。
3. 单击图像优化旁边的设置。
4. 选中CSS和JS复选框并保存设置。

如果您在其他地方托管您的网站，您可以使用 Autoptimize 等免费插件来缩小您的代码，或者使用 Perfmatters、WP Rocket 或 FlyingPress 等高级综合插件之一。

或者，查看我们的完整代码缩小教程以了解更多信息。 虽然本教程侧重于 JavaScript，但您也可以使用相同的方法和插件来缩小其他代码。

使用服务器级压缩（Gzip 或 Brotli）

服务器级压缩可让您使用 Gzip 或 Brotli 等技术缩小站点文件的大小。

例如，我们对 Kinsta 网站使用的压缩将 Kinsta 主页的文件大小减少了 85.82%。

如果您使用 Kinsta 托管 WordPress 网站，则无需担心这一点，因为 Kinsta 会自动为所有站点启用 Brotli 压缩。

如果您在其他地方托管您的网站，您可以使用 GiftOfSpeed 的这个免费工具来检查您的网站是否启用了 Gzip 或 Brotli。

如果您的网站没有使用压缩，您可以按照我们关于如何启用 Gzip 压缩的指南进行设置。

如果您使用 Cloudflare 来提供您网站的内容，Cloudflare 也有一个内置设置来启用 Brotli 压缩：

1. 在 Cloudflare 仪表板中打开您的站点。
2. 转到侧边栏菜单中的速度 → 优化。
3. 启用Brotli开关。

压缩和调整图像大小

如果您的 LCP 元素是图像，找到减小该图像文件大小的方法将减少用户浏览器下载图像所需的时间（从而加快您的 LCP 时间）。

要减小图像的大小，您应该将图像的大小调整为您实际使用它的尺寸，使用有损或无损压缩对其进行压缩，并以优化的格式（例如 WebP）提供它。

这种方法通常只是一种性能优化最佳实践——它并不特定于 Largest Contentful Paint。

如需更全面的了解，请查看我们的网站图像优化详细指南。

哦，是的 - 如果您使用 Kinsta 托管您的 WordPress 网站，您无需担心这一点，因为 Kinsta 提供了一个内置功能来自动优化您网站的图像，而无需任何第三方工具。

以下是启用此功能的方法：

1. 在 MyKinsta 中打开您网站的仪表板。
2. 转到CDN选项卡。
3. 单击图像优化旁边的设置。
4. 选择您喜欢的图像优化级别并保存设置 - 使用有损将提供最大的速度改进，尽管它可能对图像质量影响很小。

预加载最大的内容绘画图像

如果您的 LCP 元素是图像，另一个改进 LCP 的策略是预加载 Largest Contentful Paint 图像。 这就是为什么您可能会在 PageSpeed Insights 中看到“预加载最大的内容绘画图像”之类的建议。

通过预加载，您可以告诉用户的浏览器优先下载某些资源，例如作为您站点的 LCP 元素的特定图像。

预加载 LCP 图像的最非技术性方法是使用像 Perfmatters 这样的插件，它提供了专用的预加载关键图像功能。 您需要做的就是指定要预加载的图像数量——我们建议从一个开始，因为预加载太多资产会产生负面影响。

WordPress.org 上也有一些免费插件可以实现这一点，例如 WPZOOM 的 Preload Featured Images 插件，以及其他高级插件，例如 FlyingPress。

检查延迟加载问题

另一个可以在 PageSpeed Insights 中触发“Preload Largest Contentful Paint image”消息的问题是您的 WordPress 网站如何延迟加载图像的问题。

或者，这也会在 PageSpeed Insights 中触发“最大的 Contentful Paint 图像被延迟加载”警告。

延迟加载让您可以等待加载某些资源（如图像）直到用户开始与您的网站交互，从而加快网站的初始加载时间。

虽然这通常是一件好事，但如果您的站点试图延迟加载作为 LCP 元素的图像，它可能会减慢您的 LCP 时间。 出于这个原因，您需要确保您的网站没有延迟加载任何在初始视口中可见的图像。

如果您使用的是 WordPress 在 WordPress 5.5 中引入的本机浏览器延迟加载功能，您应该不会遇到此问题，因为从 WordPress 5.9 开始，WordPress 已经自动排除了第一个内容图像。

如果你想排除的不仅仅是第一张图片，你可以使用 wp_omit_loading_attr_threshold 函数（但大多数人不需要在这里做任何事情）。

但是，如果您使用的是 JavaScript 驱动的延迟加载插件，则可能需要在插件设置中手动设置此排除项。 例如，Perfmatters 插件包含一个选项，可让您从延迟加载中排除第一个“X”图像。

如果您的延迟加载插件不允许您设置这种类型的排除，您可以切换到可以设置的其他插件。

使用字体显示优化字体加载：可选

如果您的 LCP 元素是文本，您网站的字体加载过程可能会延迟文本的显示，这会减慢您的 LCP 时间。

通常，在使用自定义字体时会发生这种情况。 如果您的站点配置为等待在自定义字体加载后呈现任何文本，如果自定义字体文件需要很长时间加载，这将减慢速度。

要解决此问题，您可以使用 Font-Display: Optional CSS 描述符。

如果自定义字体没有在小窗口（通常大约 100 毫秒或更短）内加载，这会告诉浏览器使用后备字体。

用简单的语言来说，这基本上意味着浏览器应该给自定义字体一个加载的机会。 但是，如果自定义字体加载速度不够快，浏览器应该只使用后备系统字体以避免进一步延迟内容。

或者，您也可以使用 Font-Display: Swap，它会立即加载后备字体，然后在自定义字体加载后“交换”自定义字体。 但是，如果字体大小不同，这种方法可能会导致 Cumulative Layout Shift 出现问题，因此您需要小心。

除非您的自定义字体对您的网站设计绝对必要，否则从 Core Web Vitals 的角度来看，使用 Font-Display: Optional 通常是最佳选择。

如果您习惯于直接使用 CSS，您可以在子主题的样式表中手动编辑 Font-Display 属性。

如果你不想使用 CSS，你也可以找到插件来帮助你做到这一点，尽管它们中的大多数都专注于优化谷歌字体：

• Asset CleanUp – 支持免费的 Google Fonts 和 Pro 版本的自定义本地字体。
• Perfmatters – 为谷歌字体提供一个功能。

如果您使用 Elementor 来设计您的网站，Elementor 还包含一个内置选项，让您可以将其用于您使用 Elementor 创建的页面：

1. 转到Elementor → 设置。
2. 打开高级选项卡。
3. 将Google Fonts Load下拉菜单设置为Optional 。

概括

学习如何改进 Largest Contentful Paint 对于改进网站的用户体验和最大化搜索引擎排名非常重要。

改进 Largest Contentful Paint 通常有两个部分 - 加快服务器响应时间，然后优化站点代码以尽快呈现 LCP 元素。

如果您不想担心服务器响应时间变慢，您可以将您的 WordPress 网站移至 Kinsta。 Kinsta 的性能优化架构专为尽快交付您的网站而设计。

此外，借助 Kinsta 的边缘缓存功能，您可以将您网站的页面缓存到 Cloudflare 的全球网络，这意味着来自世界各地的访问者将享受闪电般快速的服务器响应时间（以及闪电般快速的 LCP 时间）。

如果您想了解更多信息，可以查看这些页面以获取有关 Kinsta 的托管 WordPress 托管或 Kinsta 的托管 WooCommerce 托管的更多信息。

如果您希望专业人士帮助您进行一些自定义 LCP 性能优化，您还可以在 Kinsta Agency Directory 中找到提供商。