最大内容绘制 (LCP) 是在视口中加载单个最大可见元素所需的时间。它代表正在视觉加载的网站，是 Google 用于衡量页面体验的三个 CWV指标之一。

用户对您网站的第一印象是它的加载速度。

最大的元素通常是特色图像或 <h1> 标签。但它也可能是以下任何一个。

• <img> 元素

• <svg> 元素内的 <image> 元素

• <video> 元素内的图像

• 使用 url() 函数加载背景图像

• 文本块

将来可能会添加 <svg> 和 <video>。

计算时，不会考虑视口之外的任何内容或任何溢出。如果图像占据整个视口，则不会考虑将其用于 LCP。

让我们看看您的 LCP 应该有多快以及如何改进它。

目录

l什么是良好的 LCP 值？

l如何测量 LCP

l如何提高LCP

什么是良好的 LCP 值？  

良好的 LCP 值应小于 2.5 秒，并且应基于 Chrome 用户体验报告 (CrUX) 数据。这是来自您网站上并选择共享此信息的 Chrome 实际用户的数据。您需要 75% 的页面访问在 2.5 秒或更短的时间内加载。

您的页面可能会被归类为以下类别之一：

• 良好：<=2.5s

• 需要改进：>2.5s 且 <=4s

• 较差：>4s

  
  

LCP数据    

截至 2023 年 4 月，57.1% 的站点处于良好的 LCP 范围内。这是整个站点的平均值。正如我们提到的，您需要 75% 的页面访问在 2.5 秒或更短的时间内加载才能在此处显示为“良好”。

LCP 是人们最努力改进的CWV。

当我们对 Core Web Vitals 进行研究时，我们发现与桌面设备相比，移动设备上的页面不太可能具有良好的 LCP 值。

LCP 阈值似乎几乎不可能在较慢的连接上传递。

如何测量 LCP  

您需要了解几种不同的 LCP 测量方法：现场数据和实验室数据。 

现场数据来自Chrome 用户体验报告 (CrUX)，这是来自选择共享数据的 Chrome 真实用户的数据。这可以让您更好地了解不同网络条件、设备、缓存等情况下的真实 LCP 性能。这也是 Google 的Core Web Vitals实际衡量的内容。 

实验室数据基于相同条件下的测试，以使测试具有可重复性。Google 不会将其用于 Core Web Vitals，但它对于测试很有用，因为 CrUX/现场数据是 28 天的滚动平均值，因此需要一段时间才能看到更改的影响。

测量 LCP 的最佳工具取决于您想要的数据类型（实验室/现场）以及您是否想要将其用于一个或多个 URL。

测量单个 URL 的 LCP  

Pagespeed Insights会提取您无法在 CrUX 数据集中查询的页面级字段数据。它还基于Google Lighthouse为您运行实验室测试，并为您提供原始数据，以便您可以将页面性能与整个网站进行比较。

测量多个 URL 或整个站点的 LCP  

您可以在 Google Search Console 中获取 CrUX 数据，这些数据分为良好、需要改进和较差的类别。

单击其中一个问题即可查看受影响的页面组的详细信息。这些组是具有相似值且可能使用相同模板的页面。您在模板中进行一次更改，该更改将在组中的各个页面上得到修复。

如果您想要大量的实验室数据和现场数据，获得这些数据的唯一方法是通过 PageSpeed Insights API。您可以通过 Ahrefs 的站点审核轻松连接到它，并获取详细说明您的绩效的报告。

请注意，显示的 Core Web Vitals 数据将由您在设置期间为爬网选择的用户代理确定。如果您从移动设备抓取，您将从 API 获取移动 CWV 值。

如何提高LCP  

在 PageSpeed Insights 中，LCP 元素将在“诊断”部分中指定。另请注意，有一个用于选择 LCP 的选项卡，该选项卡仅显示与 LCP 相关的问题。这些是您在实验室测试中遇到的需要解决的问题。

有很多与 LCP 相关的问题，使其成为最难改进的指标。

一般理论听起来很简单。更快地给我最大的元素。但实际上，这可能会变得相当复杂。某些文件可能需要先加载其他文件，或者浏览器中可能存在优先级冲突。您可能解决了很多问题，但实际上并没有看到任何改进，这可能会令人沮丧。

如果您不太懂技术并且不想雇用某人，请为您使用的系统寻找性能或页面速度优化插件、模块或软件包。您可以使用以下信息作为您可能需要的功能的指南。

以下是改进 LCP 的几种方法：

1. 找到您的 LCP 元素   

在 PageSpeed Insights 中，您可以单击“诊断”部分中的“最大内容绘制元素”，它将识别您的 LCP 元素。 

2. 优先加载资源  

要通过 LCP 检查，您应该优先考虑如何在关键渲染路径中加载资源。我的意思是您想要重新安排下载和处理资源的顺序。 

您应该首先加载 LCP 元素所需的资源以及首屏内容所需的任何其他资源。在为用户加载最初可见的元素之后，然后加载其余的元素。

许多网站只需添加一些早期提示或预加载语句（例如主图像以及必要的样式表和字体）即可。让我们看看如何优化各种资源类型。

图像：Fetchpriority=”high”  

如果您不需要该图像，最有效的解决方案就是删除它。如果您必须拥有图像，我建议优化尺寸和质量以使其尽可能小。

您还可以使用早期提示。Fetchpriority=”high” 可以用在  或       标签上，告诉浏览器尽早获取图像。这意味着它将提前一点显示。

早期提示并不适用于所有浏览器，因此您可能还需要预加载图像。这将提前一点开始下载该图像，但不会早于 fetchpriority=“high”。 

响应式图像的预加载语句如下所示：

<link rel="preload" as="image" href=“cat.jpg"imagesrcset=“cat_400px.jpg 400w,cat_800px.jpg 800w, cat_1600px.jpg 1600w"imagesizes="50vw">

您甚至可以同时使用 fetchpriority=”high” 和预加载！

图像：loading="lazy"

您应该延迟加载不需要立即使用的任何图像。这会在流程稍后或用户即将看到图像时加载图像。你可以像这样使用loading=“lazy”：

<img src=“cat.jpg" alt=“cat" loading="lazy">

不要延迟加载首屏图像！

内联CSS

你应该缩小你拥有的所有 CSS。如果可能的话，也删除所有未使用的 CSS。

您应该做的另一件主要事情是内联关键 CSS。其作用是获取加载用户立即看到的内容所需的 CSS 部分，然后将其直接应用到 HTML 中。下载 HTML 后，加载用户看到的内容所需的所有 CSS 都已可用。

CSS：rel="preload"

对于任何不重要的额外 CSS，您将需要在此过程中稍后应用它。您可以继续使用 preload 语句开始下载 CSS，但直到稍后使用 onload 事件才能应用 CSS。这看起来像：

字体

我将在这里给你几个选择：

1.好的选择：预加载字体。如果您使用同一服务器来摆脱连接就更好了。

2.更好的选择：Font-display: optional。这可以与预加载语句配对。这将为您的字体提供一小段加载时间。如果字体没有及时加载，初始页面加载将仅显示默认字体。然后，您的自定义字体将被缓存并显示在后续页面加载中

3.最好的选择：只使用系统字体。无需加载任何内容，因此不会有任何延迟。

JavaScript：预渲染，内联，预加载

我们已经讨论过删除未使用的 JavaScript 并缩小您拥有的内容。如果您使用的是 JavaScript 框架，那么您可能需要预渲染或服务器端渲染 (SSR)页面。

您还可以内联早期所需的 JavaScript。这与 CSS 部分中描述的方式相同，您可以从 JavaScript 文件中移动部分内容，而不是使用 HTML 加载。

另一种选择是预加载 JavaScript 文件，以便您更早地获取它们。仅当加载首屏内容所需的资产或某些功能依赖于此 JavaScript 时才应执行此操作。

JavaScript：Defer, Async

任何不需要立即使用的 JavaScript 都应该稍后加载。有两种主要方法可以做到这一点——延迟(Defer)和异步(Async)属性。这些属性可以添加到您的脚本标签中。

通常，正在下载的脚本在下载和执行时会阻塞解析器。Async(异步)将使解析和下载同时发生，但在脚本执行期间仍然阻止解析。Defer(Defer) 在下载过程中不会阻止解析，只会在 HTML 解析完成后执行。

你应该使用哪个？我倾向于异步。

例如，我倾向于在分析标签上使用异步，以便记录更多用户。您需要将不需要的任何内容推迟到以后或没有依赖项。添加属性非常容易。

看看这些例子：

普通的：

<script src="https://www.domain.com/file.js"></script>

异步：

<script src="https://www.domain.com/file.js" async></script>

延迟：

<script src="https://www.domain.com/file.js" defer></script>

3. 缩小文件大小

如果您可以删除任何文件或减小其大小，那么您的页面加载速度将会更快。这意味着您可能想要删除任何未使用的文件或未使用的部分代码。

如何进行此操作在很大程度上取决于您的设置，但删除文件不需要的部分的过程通常称为tree shake。

这通常是通过使用 Webpack 或带有 JavaScript 框架的 Grunt 或有时甚至是 WordPress 等系统的自动化流程来完成的，但大多数常见的 CMS 系统可能不支持这一点。

您可能想跳过此步骤或查看是否有任何插件为您的系统提供此选项。

为了使文件更小，您通常需要压缩它们。

几乎用于构建网站的每种文件类型都可以压缩，包括 CSS、JavaScript、图像和 HTML。此外，几乎每个系统和服务器都支持压缩。

它通常在服务器或 CDN 级别完成，但有些插件支持此功能，例如 WordPress 的 WP Rocket。

4. 为文件提供更贴近用户的服务

信息的传播需要时间。距离服务器越远，传输数据所需的时间就越长。除非您服务的地理区域较小，否则拥有CDN是个好主意。

CDN 为您提供了一种更贴近用户的方式来连接和服务您的网站。这就像在世界各地的不同地点拥有服务器的副本一样。

5. 将资源托管在同一台服务器上

当您第一次连接到服务器时，有一个过程会导航网络并在您和服务器之间建立安全连接。

这需要一些时间，并且您需要建立的每个新连接在经历相同的过程时都会增加额外的延迟。如果您将资源托管在同一台服务器上，则可以消除这些额外的延迟。

如果您无法使用同一服务器，您可能需要使用预连接或DNS 预取来提前启动连接。浏览器通常会在开始连接之前等待 HTML 完成下载。但通过预连接或 DNS 预取，它会比正常情况更早开始。请注意，DNS 预取比预连接有更好的支持。

对于您想要尽早获取的每个资源，您可以添加一个新语句，例如：

<link rel="preconnect" href="https://fonts.googleapis.com/"><link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

6. 使用缓存

当您缓存资源时，系统会在第一次页面视图时下载这些资源，但在后续页面视图时不需要下载这些资源。有了可用的资源，额外的页面加载将会快得多。

在下面的瀑布图中查看第二页加载时下载的文件数量。

页面首次加载：

第二次加载页面：

如果可以的话，也可以在 CDN 上缓存。您的缓存时间应该是您觉得舒服的时间。

理想的设置是缓存很长一段时间，但在对页面进行更改时清除缓存。

7. 其他

您可能还需要了解一些其他技术来帮助提高性能。其中包括推测性预渲染、签名交换和HTTP/3。

最后的想法

有没有更好的指标来衡量可见负载？目前我没有看到任何新的东西出现。我们已经看到了一些尝试测量负载的演变。

Load 和 DOMContentLoaded 并不能真正告诉您用户看到的内容。First Contentful Paint (FCP) 是加载体验的开始。第一含义绘制 (FMP) 和速度指数 (SI) 很复杂，并且不能真正识别主要内容何时加载。

翻译作品，原作者：Patrick Stox

更多文章：

Google SEO: 如何使用 PageSpeed Insights

Google SEO: 首次输入延迟 (FID) – 定义、测量和修复方法

Google SEO: 累积布局偏移 (CLS) – 定义、测量以及如何修复

Core Web Vitals ：页面速度现在对 SEO 更为重要