最大内容绘制 (LCP) 是一项核心 Web 指标，用于衡量网页主要内容（最大内容）的加载速度以及用户（在视口/首屏）看到网页的速度。LCP 通常为图像（博客文章中的特色图像、背景英雄图像），但也可以是文本（标题）或视频元素。

为什么它很重要？快速的 LCP 意味着用户可以立即看到最有可能是最重要的内容或文本之一。这可以带来更好的用户体验和感知性能（网站感觉有多快）。因此，Google 和 Core Web Vitals 非常重视优化 WordPress 网站上的 LCP。

下面我们将深入了解 LCP、对其进行测量以及如何优化它。

什么是好的 LCP？

为了满足 Google 的门槛，LCP 需要 在页面首次开始加载后的2.5 秒内发生 。如果低于这个时间，则为“良好”且符合要求。Google 会将 2.5 秒至 4 秒之间的任何内容标记为“需要改进”，将超过 4 秒的内容标记为“差”。

他们使用第 75 个百分位数来确定您的立场。75％ 的访问/抓取需要达到“良好”阈值，您才能获得该分类。

您确实希望将时间控制在 2.5 秒以下，因为 Google 在抓取您的网站时会使用受限制的 4G 移动连接。他们故意使用较慢的连接来测量您的网站，以确保所有用户都能获得良好的体验，而不仅仅是那些使用快速连接的用户。

如何测量 LCP

您可以使用多种不同的工具来测量 LCP。以下是我们经常使用的一些工具：

PageSpeed 洞察

• 自由的
• 您可以快速检查 LCP 元素的加载时间。请记住，这不一定是警告，而是您应该尝试改进的测量值。
• 
• 我们还喜欢使用 PageSpeed Insights 中的“过滤器”，轻松查看影响整体 LCP 时间的所有内容。请记住，LCP 元素本身可以进行优化，其他所有影响它的元素（我们将在下文中深入介绍）也可以进行优化。

调试熊

• 免费和付费
• 我们非常喜欢 DebugBear，因为它有 LCP、预加载等属性的标签。这些标签在微调时非常有用。

GT矩阵

• 免费但有限制，收费。
• 选择 GTmetrix 绝对没错。它的用户界面非常容易理解。

网页测试

• 免费，但限制宽松，收费较高。

我们始终建议在查看数据之前至少进行三次测试。这是因为任何因素都可能在第一次测试中影响 LCP。缓存、网络延迟等因素永远不要只依赖一个数据点。

了解实验室数据和真实用户数据之间的区别很重要。实验室数据位于报告底部的“诊断性能问题”部分下。此顶部部分是真实用户数据。它是 在用户访问您的网站时平均 28 天内收集的 ，并记录在核心网络指标中。或者说，它们是唯一真正重要的指标。但请记住，它总是会延迟。

另外，请注意此选项卡，查看您的个人 URL 是否有足够的数据。否则，将显示您网站的来源（平均值）。

减少服务器响应时间（TTFB）

改善 LCP 的最重要因素之一是降低 TTFB 。我们强烈建议您阅读有关如何减少服务器响应时间的深入文章，该文章涵盖了您需要了解的有关 TTFB 的所有信息，并尽可能提高性能。以下是一些要点的简要总结：

• 使用高质量的托管服务提供商（强大的服务器、网络、DNS 等）。查看我们的WordPress 托管建议。
• 使用最新版本的 PHP（或更低版本）。PHP 8.3 比 8.1 快约 10%（来源）。
• 使用轻量级 WordPress 主题减少 HTML 大小：GeneratePress、Kadence/Kadence Blocks 或 Bricks。
• 外部文件通常更有利于 LCP，因此不要内联所有内容。HTML 越小，LCP 的访问和绘制速度就越快。我们在 Perfmatters 中为 Remove Unused CSS 功能提供了一种“ File ”方法。GeneratePress、Bricks 和 WS Form 等许多其他解决方案都有使用外部文件的选项。我们已经看到，仅通过减少内联代码量，LCP 就降低了 25% 以上。
• 有一个缓存解决方案（服务器级、插件）。
  • 在同一地理位置的服务器上启用缓存时：LCP减少了20.67%。
• 如果您为全球访问者提供服务，请使用边缘缓存（Cloudflare）。
  • 没有边缘缓存：LCP增加140.1%。

启用文本压缩

压缩是一种在不丢失任何信息的情况下减少数据大小的方法。可以将其视为图像优化，但针对的是 HTML 和 CSS/JS。

托管服务提供商、CDN（Cloudflare）和缓存插件通常应该自动为 GZIP 或 Brotli（最新方法）添加压缩标头。然而，我们仍然发现它总是缺失，很多时候是由于托管或缓存配置错误造成的。

如果您看到此警告，请将修复它作为首要任务，因为压缩对性能有很大影响。在下面的示例中，您可以看到，只需启用压缩，单个文件就可以节省 86.02% 。您可以使用GiftOfSpeed等第三方工具来验证是否已启用压缩。我们见过一些情况，有些资产被压缩（通常是动态生成的资源），而其他资产则没有。这并不总是一个全有或全无的问题。

压缩 JS 和CSS

接下来，我们将从使用我们的 Perfmatters 插件改进 LCP 的一些最简单的方法开始。首先是启用 JS 和 CSS 压缩。这是从代码中删除不必要字符（空格、注释、缩短函数和变量名称等）的过程，以及额外的标记清理。

1. 在 Perfmatters 中启用JS 最小化。
2. 在 Perfmatters 中启用CSS 最小化。

.min.js带有或 的文件.min.css会被自动跳过，因此此功能非常轻量且快速。我们还有排除项和过滤器，以便在需要时微调缩小。但是，缩小很少需要任何更改。

 

减少未使用的CSS

接下来是未使用的 CSS。许多主题和插件只是在任何地方加载其整个样式表。因此，您将拥有大量未使用的代码。

您可以使用Perfmatters 插件中的Remove Unused CSS功能来清理它。在我们对数百个网站的测试中，我们发现LCP 平均下降了 19.66%。

如果需要的话，我们有排除项和过滤器来对事物进行微调。

 

减少未使用的JavaScript

接下来，我们有未使用的 JavaScript。与未使用的 CSS 一样，许多主题和插件只是在任何地方加载它们的 JS。第三方脚本也是如此。因此，您可能有很多未使用的代码不一定需要立即加载。

您可以使用Perfmatters 插件中的延迟 JavaScript功能，根据用户交互（滚动、移动鼠标​​、移动设备触摸等）延迟不需要立即执行的脚本。我们有排除、快速排除和用于微调的 过滤器。

 

消除渲染阻塞资源

接下来您可以做的是修复任何阻止渲染的资源。大多数 CSS 和 JavaScript 天生就具有阻止渲染的特性。有几种方法可以解决这个问题。

首先，使用上面的“删除未使用的 CSS”和“延迟 JS”功能将自动修复这些资产上的渲染阻塞问题。这就是为什么我们建议首先关注未使用的 CSS 和 JS。

其次，您可以在我们的 Perfmatters 插件中延迟 JavaScript。JS在 HTML 解析期间下载，并在页面加载完成后执行。任何未延迟的 JavaScript 都将自动延迟，因此您可以同时使用这两个功能。我们有排除和过滤器来微调事物。

还要注意的是，在许多网站上，jQuery 无法优化。虽然我们确实有高级选项可以在可能的情况下推迟 jQuery，但如果主题或插件不需要立即加载，则可以延迟加载。

 

确保文本在网页字体加载期间保持可见

接下来是“确保文本在加载 webfont 期间保持可见”警告。现代浏览器会等到字体完全下载后才显示它。这可能会导致不可见文本闪烁，也称为 FOIT。这也意味着它可能会阻碍 LCP。

为了解决这个问题，我们建议做一些事情（可以在 Perfmatters 中完成）：

• 首先，您应该在本地托管您的 Google 字体以获得更快的性能。
• 其次，您应该为字体添加交换功能。这意味着可以暂时回退到系统字体。
• 第三，您应该预加载字体以尽量减少 CLS。是的，这听起来违反直觉。
• （可选）第四，您可以异步Google 字体 CSS 以修复渲染阻塞问题。由于 CLS，我们建议开启和关闭测试。

如今，许多主题和页面构建器还允许您在本地上传自定义字体。使用哪种方法并不重要；重要的是将字体上传到本地以获得更好的性能和隐私保护。

 

避免链接关键请求

接下来是避免链接关键请求警告。正如 Google所说，“链越长，下载量越大，对页面加载性能的影响就越大。”这将影响 LCP。

好消息是，我们所做的其他事情，例如删除未使用的 CSS、延迟 JS、推迟 JS、预加载本地字体等，都将减少关键请求。所以到这个时候，你可能就没什么可做的了。不过，你可以使用 Perfmatters 中的脚本管理器进一步微调。

 

 

避免巨大的网络负载

接下来是“避免巨大的网络负载”警告。本质上，这意味着任何大型资源（JS、CSS、图像、字体等）都会影响您网站的性能。这可能会影响您的 LCP。

这对于任何在首屏上方加载的资产尤其重要。每个 KB 都很重要。以下是一些常见示例：

• 特色图片或英雄背景图片的尺寸或优化不正确。
  • 我们始终建议将单张图片保持在 100 KB 或更小，尤其是对于移动设备。您可以使用ShortPixel或Imagify等图片优化插件。Google 提供的免费Squoosh工具也非常适合微调单张图片。如果需要，请使用 WebP/AVIF 格式。
• 大型外部 JS 文件。
• 字体过大。许多不考虑性能的主题和插件可能会在仅使用 1% 的字体图标库的情况下在整个站点范围内加载整个字体图标库（Font Awesome、Dashicons 等）

字体优化

说到字体，这里我们推荐一些优化字体的技巧和工具。

• 使用Yellow Lab Tools查看字体库的使用量。例如，在此网站上，客户使用的字体库不到 1%。
• 
• 使用Font Awesome 套件。这样您就可以收集套件中所需的所有图标，然后将其部署到整个网站，而不是部署所有图标。
• 使用允许您单独添加 SVG 图标的主题或页面构建器。例如，在GenerateBlocks中，您只需从 Font Awesome 复制/粘贴 SVG 代码即可。使用免费SVGViewer工具的“优化”功能来减少 SVG 代码大小。
• 使用Google Webfonts Helper工具下载具有最少字符集的最小 Google 字体。我们发现用户将字体大小减少了 76%。（例如：Montserrat 从 64.6 KB 减小到 15 KB）

 

延迟屏幕外图像

说到网络负载大小，延迟加载折叠下方的每一张图像非常重要。这将修复“延迟屏幕外图像”警告。

我们的 Perfmatters 插件和过滤器中有广泛的延迟加载选项来微调内容。

• 排除主要图片
• 延迟加载 iframe 和视频（YouTube 预览缩略图功能）
• 排除（个人和父母选择器）
• 阈值（视口）设置

 

适当调整图片尺寸

图像应始终保持适当大小，或尽可能接近。原因之一是它只会减小文件的整体大小并减少不必要的数据传输。如果这是您的 LCP 元素，它肯定会影响测量时间。这就是“适当调整图像大小”警告所指的。

WordPress 实际上会自动裁剪媒体库中的图片，并使用srcset来处理响应式图片。因此，使用许多主题和页面构建器，您应该可以做到，或者说非常接近。

如果您确实经常看到此警告，您应该首先检查您的主题或页面构建器，看看他们是否有针对媒体库设置的推荐尺寸。

如果您需要更进一步，您可以使用ShortPixel AI或EWWW等服务来动态缩放图像。

 

优化 LCP 元素

接下来是最大内容绘制元素。无论它是图像、文本等，您始终都会有 LCP。您不是要修复 LCP，而是要减少时间。您希望将其置于良好的阈值内以通过核心 Web 生命力。

我们倾向于将 LCP 优化分为两个部分。第一部分是可能对其产生影响的所有其他因素（我们刚刚讨论过的内容），第二部分是 LCP 元素本身。

我们建议做的第一件事是启用Perfmatters 插件中的预加载关键图像。这将预加载图像，从 HTML 中的第一个图像开始。本质上，这会强制图像尽快加载，将其移动到瀑布的顶部。

我们有广泛的预加载过滤器。您可以排除单个图像、排除添加某些预加载的位置，以及按父类排除。例如，假设您有一个运行的大型菜单，其中包含一些可能仍在视口或 HTML 中的图像。您可以排除它们的父类。您可以根据需要真正微调哪些是预加载的，哪些不是。

那么 CSS 中的背景英雄图像呢？如果需要，您仍然可以使用我们的单独预加载功能手动预加载这些图像。您可以选择要加载该图像的位置，并根据需要为每个设备（移动设备/桌面设备）单独预加载。

另一种与预加载一起使用的替代方案是获取优先级。这是告诉浏览器资源应具有更高优先级的提示。可以将其视为预加载，但功能不那么强大。

最新版本的 WordPress 实际上会自动添加抓取功能。但是，我们发现这并不准确，很多时候它会将抓取功能添加到错误的图像（折叠下方）。因此，我们在 Perfmatters 中添加了禁用核心抓取选项。如果他们以后改进核心，我们可能会删除此选项。

然后，您可以在 Perfmatters 中更好地进行微调。在<img>、<link>和<script>标签上添加获取，并指定高或低优先级。如果某些内容没有唯一的类，您还可以使用父选择器。

预加载 LCP 图像或利用获取优先级后，您需要确保它们被排除在延迟加载之外。您永远都不想延迟加载您的 LCP 元素。

好消息是，我们会自动将使用预加载关键图像功能和获取优先级的图像排除在延迟加载之外。这将防止PageSpeed Insights 中出现“最大内容绘制图像是延迟加载的”警告。

我看到人们使用的另一个小技巧是故意将 LCP 元素设为文本/标题。您不一定总是需要在首屏上方放置一张大图像。但请记住，图像只是影响 LCP 的一部分。

禁用插件（CSS/JS）

改进 LCP 的另一种方法是确保插件和主题的脚本和 CSS 不会在不该加载的地方加载。

Perfmatters 中的脚本管理器允许您以每篇文章/页面或整个网站为单位禁用脚本。MU模式允许您禁用整个插件的运行（MySQL 查询、内联代码等）。

这可能非常强大，但它也是一个更高级的功能。对于许多刚开始使用的用户，我们建议先从其他优化开始（这些优化更自动化），然后在最后使用脚本管理器进行微调。

推测加载技术

并非所有事情都与最终的页面速度分数或测试有关。您始终需要考虑用户体验和感知性能（网站感觉有多快、导航速度有多快等）。您可以使用不同的推测加载机制。这将有助于在用户浏览您的网站时大幅提高 LCP 。

1. Preconnect允许浏览器在 HTTP 请求之前建立早期连接，从而消除往返延迟并为用户节省时间（DNS + TCP + TLS）。这对于可能尚未延迟的第三方请求或 CDN URL（cdn.domain.com）非常有用。我们在 Perfmatters 中有一个预连接功能。
2. 预取功能可让您在用户将鼠标悬停在链接上后自动获取在后台呈现 URL 所需的大部分资源。这可加快加载时间和导航速度。我们在 Perfmatters 中提供了即时页面功能，可实现此功能。
3. Prerender比 prefetch 更进了一步，它实际上会在用户将鼠标悬停在链接上后渲染内容以供显示。这几乎可以实现即时加载。WordPress 性能团队推出的全新免费Speculative Loading 插件可为您实现这一点。强烈推荐！

目前，预取功能得到了更多浏览器的支持，但预渲染功能也更强大。您实际上不应该同时使用两者，因此这取决于对您来说哪个最重要。您的大部分流量是否已经来自 Chrome？如果是，那么预渲染可能是最佳选择。