想知道 Largest Contentful Paint 意味着什么以及它如何影响您的 UX 和 SEO 性能？继续阅读！您将了解 LCP 是什么、如何测试它以及影响其等级的因素。您还将了解如何优化您的 Largest Contentful Paint 等级并修复移动和桌面上不良的 LCP 分数（Largest Contentful Paint 长度超过 2.5 或 4 秒）。
目录
什么是最大内容绘制 (LCP) 又为何重要？
最大内容绘制 (LCP) 是一个核心 Web 重要指标，用于测量最大元素在视口中变得可见所需的时间。在 LCP 未加载之前，您在页面上几乎看不到任何内容。这是因为 LCP 元素始终位于折叠上方 – 即页面顶部。
LCP通常是图像或文本块。然而，它也可以是视频或动画。移动设备和桌面设备上的 LCP 元素可能有所不同。
如前所述，最大的元素是与用户体验和感知加载速度最相关的元素。
想想看：如果页面最大的元素加载速度不快，您的用户体验就不会很好。您会看到一个几乎空白的页面，等待页面加载……您甚至可以离开该网站！浏览时，几秒钟的时间就可以产生巨大的差异。
这就是为什么 Google 将 LCP 作为核心 Web Vitals 指标之一- 该指标衡量您的用户体验有多好。
LCP 作为新排名因素“页面体验信号”的一部分，因此，最大的内容绘制不仅对于提供出色的用户体验很重要，而且对于提高 SEO 性能也很重要。
更重要的是，LCP 占PageSpeed Insights 总体得分的 25%。通过提高性能，您可能会提高页面速度等级。
简而言之，LCP 是目前最重要的性能指标之一。
什么是好的 LCP 分数
好的分数意味着LCP 应小于或等于 2.5 秒。如果是，该页面将获得绿色分数并通过评估。
如果 LCP 介于 2.5 和 4.0 秒之间，则分数“需要改进”——您将获得橙色等级。
假设LCP 超过4 秒。那么分数就是“差”，需要尽快修复。
现在让我们看看如何找到 LCP 元素。
如何找到并测量最大的内容绘制
有多种方法可以使用实验室和现场数据来查找和测量 LCP 元素。以下是可用于测试 LCP 的最流行的工具。
实验室数据工具：
现场数据工具：
- PageSpeed Insights (if available)
- Chrome User Experience Report (Field Data)
- Search Console – Core Web Vitals report (Field Data).
您可以在我们关于 PageSpeed Insights 的文章中了解有关实验室数据和现场数据之间差异的更多信息。
让我们来看看一些最简单、最有效的工具：PageSpeed Insights 和 Search Console。
使用 PageSpeed Insights 测量和查找 LCP
PageSpeed Insights 是测量和查找 LCP 元素的最简单方法。
测试您的 URL 页面后，您将在实验室数据和现场数据（如果有）中获得 LCP 等级。您还将获得 PageSpeed 建议来提高您的性能。
转到诊断区域并查找“最大内容绘制元素”部分。您将发现您正在分析的页面的 LCP 元素是什么。
让我们看几个例子。
来自 Mobile 的 LCP 示例
让我们分析移动设备上的 WP Rocket 博客页面。
我们在工具中测试页面的性能并转到“诊断”区域。LCP 元素是 H1，它是博客文章标题：
只要主标题加载速度快，页面就会提供出色的用户体验。
桌面上最大的内容绘制示例
现在让我们从桌面上看一下相同的 URL。
我们再次前往诊断区域并寻找 LCP 元件。毫不奇怪，LCP 与移动领域不同。对于桌面，LCP 是一个图像：
更准确地说，是帖子的图像。
由于 PageSpeed Insights 是基于页面的工具，因此我们建议您对不同页面运行多个测试。
为了进行整体分析，您还应该利用 Search Console。
在 Search Console 上测量和查找最大内容绘制
您可以使用 Search Console 中的 Core Web Vitals 报告评估整个网站的性能并检测任何问题。
您将能够通过移动设备和桌面设备访问表演：
打开报告后，您将看到您网站的页面根据每个阈值的表现：良好、需要改进和差。
Search Console 报告按状态、问题类型和网址对每个 Core Web Vital 性能进行分组。
例如，您可能有一些 URL 对于 LCP 表现不佳。如果是这样，在报告中，您可能会看到“ LCP问题：超过2.5秒（移动）” 。”
通过单击与该特定问题相关的行，您将进入一个提供需要修复的 URL 列表的页面。虽然这些 URL 是一个示例，但它们可以让您非常准确地了解正在发生的情况。
找到 URL 模式并继续修复和验证将非常容易。
哪些因素会影响 LCP 并导致得分低
对于 WordPress 网站，三个因素会影响 LCP：服务器响应时间慢、阻塞渲染的 JavaScript 和 CSS 以及资源加载时间慢。
服务器响应时间慢
浏览器向服务器发出请求，但服务器发送请求的内容的时间过长。由于浏览器接收内容的速度不够快，因此需要一段时间才能在屏幕上呈现一些内容。因此，加载时间并不长。LCP 分数受到影响。
您可以通过改进首字节时间、使用 CDN 以及尽早建立第三方连接来解决该问题。
渲染阻塞 JavaScript 和 CSS
浏览器发出请求并从服务器获取内容。此时浏览器就会渲染内容并显示出来了，对吧？没那么快。
为了呈现任何内容，浏览器必须分析（或解析）页面的 HTML 并使其“可读”到页面的 HTML 结构中——这就是 DOM 树。之后，内容将被渲染并完全显示 – 除非某些脚本和样式表阻止 HTML 解析。这些脚本和样式表是渲染阻塞资源。
由于此块，解析被延迟。再次，您请求的内容需要一些时间才能加载。LCP性能再次受到影响。
您将通过推迟和删除未使用的 JS 文件来解决这些问题。不用担心！您将在下一部分中找到所需的所有信息。
资源加载时间慢
其他文件也可能导致性能不佳和用户体验不佳：图像、视频以及HTML 和 CSS 文件等块级元素。
如您所知，LCP 与页面顶部的元素相关。当这些文件呈现在首屏并且加载时间过长时，就会出现这个问题。结果，加载时间和 LCP 再次受到影响。
您将通过优化图像、缩小和压缩 CSS、JS、HTML 文件以及预加载关键资源来管理资源加载时间。
底线：浏览器接收和呈现请求内容的速度决定了 LCP 分数。
让我们详细了解如何解决所有这些问题。
如何在移动设备和桌面设备上优化最大内容绘制
以下是提高最大内容绘制性能并修复 Search Console 状态“ LCP 问题：长于 2.5 秒或LCP 问题：长于 4 秒”的十种方法，无论是从移动设备还是桌面设备。
- 改善第一个字节的时间并减少服务器响应时间
- 使用CDN
- 延迟 JavaScript
- 删除未使用的 JavaScript
- 推迟非关键 CSS、内联关键 CSS 和删除未使用的 CSS
- 缩小 CSS 和 JS 文件
- 优化你的图像
- 压缩文本文件
- 对关键资产使用预加载
- 尽早建立第三方联系。
让我们看看具体操作。
🚀 对于每条建议，您都会找到一条有关其性能影响的信息（从低到高）。影响越大，最大内容绘制分数在遵循该特定建议后提高的机会就越大。
1. 改善第一个字节的时间并减少服务器响应时间
性能影响：高🚀🚀🚀
LCP 不良的主要原因之一是服务器响应时间慢。
您可以通过查看第一个字节的时间 (TTFB)来测量服务器响应时间。
每次您想要使用任何内容时，浏览器都会向服务器发送请求。TTFB 测量浏览器从服务器接收第一个内容字节所需的时间。
通过改进 TTFB，您将提高服务器响应时间和 LCP 分数。
请注意，良好的 TTFB 应低于 200 毫秒 — 您可以通过在WebPageTest上测试您的 URL 网站来快速检查此指标。
有两种方法可以修复错误的服务器时间：
A. 启用页面缓存
通过启用页面缓存，您网站的页面将在页面首次加载后以 HTML 文件形式存储在服务器上。结果，内容将显示得更快。这是改进 TTFB 的一种简单有效的方法。
您还可以选择包含服务器级缓存选项的顶级 WordPress 托管提供商之一。
B. 选择快速的服务器托管服务
快速的托管可以使性能产生巨大的差异。也许是时候升级您的托管计划了！
首先，您的托管提供商应该拥有靠近大多数用户的服务器。用户距离服务器越近，发送数据的速度就越快。
您还应该选择正确的服务器主机类型。专用的托管服务器将确保最快的性能。考虑您的网站获得了多少流量，然后做出决定。
通过启用缓存并选择快速托管，您将遵循以下 PageSpeed Insights 建议：
- 减少服务器响应时间 (TTFB)
- 通过高效的缓存策略提供静态资源。
2.使用CDN
性能影响：中🚀🚀
CDN 可帮助您缩短用户请求和服务器响应之间的时间长度。这段时间就是延迟。浏览器请求和服务器响应之间的来回时间就是往返时间 (RTT)。
如果您的用户距离服务器位置较远，则可能需要一段时间才能发送所有资源（例如图像、JS 和 CSS 文件、视频）。延迟和 RTT 会很高，并会影响加载时间和 LCP 分数。
您已经了解了服务器的位置如何影响站点的性能。
CDN 借助全球服务器网络解决了这个问题。无论您的用户位于何处。每次他们请求页面时，他们都会从最近的服务器接收资源。就那么简单。
如果您想了解更多有关 CDN 优势和不同类型的信息，您可以阅读我们的文章。
选择 CDN 将帮助您满足以下 PageSpeed 建议：
- 通过高效的缓存策略提供静态资源
- 启用文本压缩。
请注意，只有正确配置后，CDN 才会解决此类建议。默认选项可能不足以按预期提高性能。
3. 延迟 JavaScript
性能影响：高🚀🚀🚀
JavaScript 文件等渲染阻塞资源是导致 LCP 分数不佳的主要原因之一。
推迟 JavaScript 文件将帮助您解决这个问题。换句话说，您将更改正在加载的 JS 文件的优先级。
记住？浏览器解析 HTML，构建 DOM 树，然后渲染页面 – 除非有任何阻塞资源减慢该过程。
通过延迟 JavaScript，浏览器只有在解析 HTML 文档并构建 DOM 树之后才会处理和加载 JS 文件。由于不会有任何东西阻碍该过程，因此渲染速度会快得多，而且 LCP 指标也会提高。
您可以将 defer 属性添加到 JavaScript 文件中，以便浏览器可以检测要延迟的资源。浏览器将不间断地分析 HTML 并构建 DOM 树。
以下是 defer 属性的示例：
[pastacode lang=”markup” manual=”%3Cscript%20defer%20src%3D%22%2Fexample-js-script%22%3E%3C%2Fscript%3E” message=”” highlight=”” provider=”manual”/]4. 删除未使用的 JavaScript
性能影响：中🚀🚀
- 您的网站上不再使用它们。它们仍然在代码中，但完全没用。
- 它们不包含在首屏内容中。因此，它们对于构建 DOM 树并不重要。然而，这些文件的存在是有原因的（例如，Google Analytics 跟踪代码）
您可以在 PageSpeed 报告中的“删除未使用的 Javascript”部分找到未使用的 JS 文件列表：
在 WordPress 中，有两种方法可以解决此问题：
A. 仅在需要时加载 JavaScript 文件。
例如，文件应该只在需要该特定文件的页面上加载——在任何其他情况下，应该禁用 JS 的执行。您可以使用 Perfmatters 和 Assets Cleanup 等插件来处理这方面的问题。
B. 延迟JavaScript 文件。
在第一次用户交互（例如，滚动、单击按钮）之前，JavaScript 文件不会被加载。如果没有用户交互，则根本不会加载 JS 文件。通过延迟 JavaScript，JS 文件将不会被 Lighthouse 检测到，也不会列在“删除未使用的 Javascript 文件”建议中 – 尽管并非 PageSpeed 推荐列表中的所有脚本都可以安全地延迟。 例如，Google Analytics 跟踪代码通常包含在此 PageSpeed Insights 建议中。如果您延迟 JS 文件，Google Analytics JS 文件将不再报告。
注意：延迟 JS 文件本身并不能解决此 PSI 建议。然而，它在解决此 PageSpeed 审核和提高 LCP 分数方面效果很好。
正如我们前面提到的，通过删除未使用的 Javascript 文件，您将解决特定的 PageSpeed 建议。总的来说，您将致力于“消除渲染阻塞资源”和“减少 javascript 执行时间”。您的 LCP 成绩将再次提升。
5. 推迟非关键 CSS、内联关键 CSS 和删除未使用的 CSS
性能影响：中🚀🚀
至于 JS 文件，您还应该推迟非关键 CSS — 所有与渲染页面无关的文件。换句话说，您也应该更改这些文件的优先级。
它们将在浏览器呈现页面上最相关的内容后加载。
在推迟 CSS 文件的同时，您还应该内联关键 CSS——需要尽快加载的首屏资源。这意味着您应该识别关键 CSS（或关键路径 CSS）并将它们内联到 HTML 结构中。
如果您想在 WordPress 上实现这两个操作，流程如下：
- 首先，您应该使用一个可用的生成器工具提取并内联关键路径 CSS (CPCSS)。您可以在这里找到一个。
- 然后，您应该通过应用以下模式异步加载其余的类。
您可以在专用的 Google 资源中阅读有关该流程的更多信息。
另一个技巧是避免将大量非关键 CSS 代码放置在代码的 <head> 中。
通过实施这些操作，您将解决“消除渲染阻塞资源” 、“减少未使用的 CSS”和“避免链接关键请求” PageSpeed Insights 建议。
6. 缩小 CSS 和 JS 文件
性能影响：低🚀
优化 Largest Contentful Paint 的另一个有效方法是缩小 CSS 和 JS 文件。
缩小归结为通过使其更加紧凑来优化代码。这意味着删除代码中包含的所有空格、换行符和注释。因此，缩小将减少 CSS 和 JS 文件的大小并使它们加载速度更快。
听起来很简单，但现实要复杂得多。缩小这两种文件类型并不总是那么简单，并确保排除所有正确的资源 – 特别是如果您不是开发人员。无论哪种方式，这都是耗时的。
处理缩小问题最简单、最有效的方法是使用 WP Rocket 这样的插件。在文件优化选项卡中，您将有机会缩小 CSS 和 JavaScript 文件。
您将解决以下 PageSpeed Insights 建议：
- 缩小CSS
- 缩小 JS
- 避免巨大的网络负载。
7. 优化你的图像
性能影响：高🚀🚀🚀
优化图像是修复不良 LCP 分数的另一种相关方法。
图像通常是移动设备或桌面设备上的 LCP 元素。通过缩短加载时间，您将提高最大内容绘制的性能。
您可以采取以下措施来解决有关图像的任何性能问题。
压缩图像并调整图像大小。您应该在不损失质量的情况下减小文件大小。图像尺寸越小，加载时间越快。
需要明确的是：如果您使用工具来优化桌面上的图像，您只会优化原始尺寸。您在 WordPress 上上传的图像不会调整大小。您可能知道，在 WordPress 中，有不同的图像尺寸。除非您使用正确的图像优化插件，否则您将无法优化任何性能。
要优化一些图像，您可以使用ImageOptim等工具。另一方面，如果您想批量优化更多图像及其缩略图，Smush Pro是完美的解决方案。可以在不牺牲图像质量的情况下减轻图像的体积，节省大量时间！
将图像转换为新格式。总体而言，Google 推荐使用 WebP 格式。这就是为什么所有 WordPress 图像优化器插件现在都包含将图像转换为 WebP 的选项。您可以考虑的其他格式有 JPEG 2000 和 JPEG XR。这些格式比 JPEG、PNG 和 GIF 更小，有助于提高性能。
使用响应式图像。您不应该在桌面和移动设备上使用相同的图像尺寸。例如，如果桌面图像尺寸较大，则移动图像尺寸应为中等。
Elementor 等页面构建器允许用户根据设备上传不同的图像尺寸。移动端图像优化非常重要，其中移动端得分最为重要。不要低估它对您的 LCP 等级的影响！
从延迟加载中排除 LCP 元素。虽然整体延迟加载有助于缩短加载时间，但它可能会使 LCP 分数变差，尤其是当 LCP 元素是图像并进行延迟加载时。这就是为什么从延迟加载中排除 LCP 元素并直接在页面的 HTML 中显示它是优化 LCP 分数的绝佳方法。
使用静态图像而不是滑块。由于代码的原因，滑块的加载可能会非常繁重。另一方面，由 HTML 代码制作的静态图像更轻、更快。
通过优化图像，您将解决以下 PageSpeed Insights 审核问题：
- 以下一代格式提供图像
- 适当调整图像大小
- 高效地编码图像
- 避免巨大的网络负载。
8. 压缩文本文件
性能影响：高🚀🚀🚀
您还应该压缩文本文件，例如 HTML、CSS 或 JavaScript 资源。
压缩意味着以更小、更轻的格式“压缩”文件，以便加载速度更快。一旦减小它们的大小，浏览器和服务器之间的传输就会更快。浏览器将能够更快地加载这些资源。加载时间和 LCP 将得到改善。
您可以使用 GZIP 和 Brotli 等压缩格式。一方面，大多数主机都支持GZIP。另一方面，Brotli 性能更高，目前最受推荐。在我们的博客文章中了解有关 GZIP 与 Brotli 的更多信息。
您可以使用插件轻松在 WordPress 上启用 GZIP 压缩。您可以选择不同的选项，从简单的启用 Gzip 压缩插件到自动包含 GZIP 压缩的 WP Rocket。此外，某些主机默认启用 GZIP 压缩。
无论哪种方式，您都将解决“启用文本压缩”PageSpeed 建议。
9. 对关键资产使用预加载（特别是图片）
性能影响：低🚀
此时，您知道首屏资产对于获得良好的性能分数有多重要。这些关键资源可以是字体、图像、视频、CSS 或 JavaScript 文件。
为了提高 LCP 分数，您应该始终尽可能快地加载关键资产。
因此，您可能想知道如何预加载最大内容绘制图片。
预加载选项派上用场。它告诉浏览器优先加载这些资源。换句话说，预加载会阻止浏览器发现并加载这些关键文件（包括 LCP 图像），直到很久以后。
您可以在代码中包含 rel=”preload”：
[pastacode lang=”markup” manual=”%3Clink%20rel%3D%22preload%22%20as%3D%22script%22%20href%3D%22script.js%22%3E%0A%3Clink%20rel%3D%22preload%22%20as%3D%22style%22%20href%3D%22style.css%22%3E%0A%3Clink%20rel%3D%22preload%22%20as%3D%22image%22%20href%3D%22img.png%22%3E%0A%3Clink%20rel%3D%22preload%22%20as%3D%22video%22%20href%3D%22vid.webm%22%20type%3D%22video%2Fwebm%22%3E%0A%3Clink%20rel%3D%22preload%22%20href%3D%22font.woff2%22%20as%3D%22font%22%20type%3D%22font%2Fwoff2%22%20crossorigin%3E” message=”” highlight=”” provider=”manual”/]要预加载 LCP 图像，您还可以使用 Perfmatters 等插件。
您可以在我们的专门文章中阅读有关网络字体预加载最佳实践的更多信息。
通过对关键资产使用预加载，您将解决“预加载关键请求”PageSpeed 建议。
10.尽早建立第三方连接
性能影响：低🚀
加快第三方连接速度是优化 LCP 性能的另一种方法。
您应该使用预连接选项。
假设第三方（例如 Facebook 或 Google Analytics）请求了一个 CSS 或 JS 文件。浏览器将请求外部资源。
如果启用，预连接选项会告诉浏览器尽快与外部域建立连接。然后，浏览器将与正在进行的渲染过程并行处理该请求。
您可以在代码中包含 rel=”preconnect”：
[pastacode lang=”markup” manual=”%3Clink%20rel%3D%22preconnect%22%20href%3D%22https%3A%2F%2Fexample.com%22%3E.” message=”” highlight=”” provider=”manual”/]作为替代方案，您可以使用 Perfmatters 插件。
由于您的浏览器可能不支持预连接选项，因此最好将 dns-prefetch 作为后备技术来实现。然后您将更快地解析 DNS 查找。换句话说，外部文件的加载速度会更快，尤其是在移动网络上。
您可以将 rel=”dns-prefetch” 添加到您的代码中 — 作为 preconnect 属性的单独标记：
[pastacode lang=”markup” manual=”%3Chead%3E%0A%20%E2%80%A6%0A%3Clink%20rel%3D%22preconnect%22%20href%3D%22https%3A%2F%2Fexample.com%22%3E%0A%3Clink%20rel%3D%22dns-prefetch%22%20href%3D%22https%3A%2F%2Fexample.com%22%3E%0A%3C%2Fhead%3E” message=”” highlight=”” provider=”manual”/]通过尽早建立第三方连接，您将缩短首字节时间和服务器响应时间。您还将解决“预连接到所需来源”PageSpeed 建议。
发表回复