最大的内容绘画：为什么它很重要，以及如何改进 LCP？
Largest Contentful Paint 最大内容绘制 （LCP） 是一种 Web 性能指标，用于衡量给定网页的最大元素何时在用户的浏览器中可见。
如果加载内容的关键元素所需的时间比预期的要长，网站的访问者可能会感到沮丧并离开，这将反映在高跳出率和糟糕的 LCP 分数上。
为什么这很危险？因为与其他 Core Web Vitals 指标类似，LCP 直接影响用户体验。用户在浏览网站时的感受会影响你的转化率并同时影响你的收入。
在 2021 年，解决与 LCP 相关的问题对于网站的 SEO 也变得至关重要，因为 LCP 已作为 Google 排名因素引入页面体验更新中。 在本文中，我介绍了优化 LCP 以提高页面渲染性能和改善用户体验的分步指南。
文章目录
究竟什么是 Largest Contentful Paint？
Largest Contentful Paint 是一个 Core Web Vitals 指标 ， 用于计算在用户视区中呈现页面最大元素所需的时间。
根据 Google 的说法 ，“（…），一个元素只有在渲染并被用户看到后才能被视为最大的内容元素。
换句话说，LCP 是从页面上最大的元素开始加载到它对用户完全可见的那一刻进行测量的。
LCP 是一个以用户为中心的指标，因为视口中最大的元素通常是最重要的，但也是最能反映页面加载速度的元素。
LCP 元素必须位于首屏上方，以便用户无需滚动即可看到它。
通常是 LCP 元素的主要内容示例包括：
- 主图，
- 文本段落，
- 图像轮播，
- 视频缩略图等
不要将最大内容绘制 （LCP） 与首次内容绘制 （FCP） 混淆
Largest Contentful Paint 和 First Contentful Paint 都是 Web 性能指标，用于衡量呈现给定网页内容所需的时间。但是，它们的区别是显着的。
LCP 和 FCP 之间的区别在于它们在页面加载期间关注的元素。Largest Contentful Paint 测量加载页面最大元素所需的时间 ，First Contentful Paint 侧重于该页面上的第一个元素完全呈现所需的时间 。
重要的是， 用户在加载过程中看到的第一个元素不一定是最大的元素 ，例如徽标或背景图像。
此外，这两者之间的另一个区别是 First Contentful Paint 不被视为 Core Web Vitals 指标之一。但这并不意味着 FCP 根本不值得优化。
相反，First Contentful Paint 可能是一个需要改进的关键指标。用户看到页面的第一个元素的速度可能会影响他们是否愿意等待最大的元素显示在他们的视口中并留在您的页面上。
此外，First Contentful Paint 还可以作为测量总阻塞时间 （TBT） 的起点——该指标反映了页面在页面加载期间的响应能力。
Largest Contentful Paint 对 SEO 重要吗？
随着页面体验更新于 2021 年 6 月上线 ，LCP 与累积布局偏移和首次输入延迟一起 ，现在被用作桌面和移动搜索中的排名因素。
谷歌选择 LCP 作为相关 SEO 指标的原因是它直接影响用户体验。页面上最大元素的加载决定了用户能够多快查看其内容并与之交互。
此外，LCP 与用户行为指标密切相关。如果在提高转化率、页面停留时间或任何其他对你的业务有直接影响的行为指标方面陷入困境， 那么通过降低 LCP 分数来提高渲染性能一定会有所帮助。
什么是好的 LCP 分数？
由于 LCP 测量的是渲染时间， 因此分数越低越好，因为用户会更快地看到重要内容。
话虽如此，以下是 Google 为 LCP 值指定的阈值：
- 良好 – LCP 为 2.5 秒或更短，
- 需要改进 – LCP 在 2.5 秒到 4 秒之间，
- 差 – LCP 为 4 秒或更高。
因此，如果想“通过”Core Web Vitals，需要 2.5 秒或更低的 LCP 分数才能获得 75% 的页面浏览量。
LCP 是如何计算的？
在用户与页面交互之前，有关可见的最大图像或文本绘制的详细信息，可通过 Largest Contentful Paint API 检索 。
该 API 让网站管理员有机会了解他们的页面是如何加载和呈现的。
让我们分析一下它是如何工作的，以确定和计算最大的内容元素。
通常被视为 LCP 的元素
只有某些内容类型可以被视为 LCP 的候选项，即：
- <img> 元素
- SVG 文档中的 <image> 元素
- <video>的海报图像（视频加载时或用户点击 “播放 ”之前显示的占位符）
- <background-image> 元素
- text 节点，如 <p>
这是因为 LCP API 依赖于 Element Timing API 来跟踪最大元素的渲染时间戳，而 Element Timing 只支持上述格式。
确定元素的大小
通过算法选择要报告的最大元素的过程很复杂，应该了解一些注意事项：
- 对于延伸到视区之外的元素，仅考虑视区中可见的部分。
- 对于调整大小的图像，考虑的大小是其固有大小或可见大小 – 以较小者为准。
- CSS 边距、填充或边框不会影响元素大小，
- 对于文本元素，考虑适合所有文本节点的最小矩形。
跟踪最大的元素
当页面加载时，其最大的元素可能会随着加载在其阶段中的进行而更改。
选择最大元素的算法将查看整个加载周期中视区中呈现的所有内容元素。
加载第一帧时，浏览器会调度 largest-contentful-paint PerformanceEntry。
当加载新元素并且算法在视区中找到新的、更大的元素时，将调度新的 PerformanceEntry 对象。
至关重要的是，元素必须呈现并对用户可见，才能被视为最大的内容元素。
一旦用户与正在加载的页面交互，测量就会停止。
关于计算 LCP 你应该知道的其他事情
- 对于图像，渲染时间是紧跟在图像加载之后的 Paint 时间。这意味着图像的渐进式加载无助于降低 LCP。
- 对元素大小或位置的更改不会生成新的 LCP 候选项。仅考虑元素在视区中的初始大小和位置。
- 如果 LCP 是文本元素，则考虑最早的字体加载。因此字体可以更新，并且 LCP 渲染时间保持不变。
- 如果使用的是 CSS font-display： 块，则测量会等待文本可见。
LCP 评分不佳的最常见原因
在加载页面的整个过程中， LCP 分数可能会受到负面影响。
但是，具体来说，LCP 评分不佳通常是由以下原因引起的：
- 服务器响应时间慢（可以通过 TTFB 指标来衡量），
- 阻止渲染的 CSS 或 JavaScript 文件，
- 页面上资源的加载时间缓慢，
- 客户端渲染速度慢。
解决上述问题对于加快 LCP 加载速度并使 LCP 分数走上正轨至关重要。
让我们通过学习如何测量 LCP 并找到 LCP 元素来深入了解 LCP 优化的过程。
如何测量 Largest Contentful Paint？
可以使用实验室和现场数据来测量站点的 LCP，这两种类型的数据都有其用途：
- 实验室数据是使用预定义的设置（设备、位置等）收集的，最适合调试和测试环境。
- 现场数据是从访问网站的真实用户那里收集的，并向你展示他们的实际体验。
实验室数据工具
以下工具可以帮助你跟踪在实验室中测量的 LCP：
Lighthouse 灯塔
Lighthouse 会测量页面的 Web 性能，并生成一份报告，其中包含所有指标的细分以及如何改进它们。对于 LCP，将看到页面的分数和关于你可以采取哪些措施来改进它以及改进可以应用于哪些元素的建议。
WebPageTest 网页测试
WebPageTest 为你提供所选页面的详细分析，包括每个 Core Web Vitals 指标的特定报告。可以逐步查看 LCP 的加载方式，获取有关 LCP 事件的所有信息，并查看哪个页面元素被视为 LCP，这可以帮助你集中精力进行优化。
可以通过多种方式设置测试规范——可以调整位置、连接速度和类型、浏览器等。这个工具肯定更先进，可以让你对指标进行更彻底的分析。
Chrome 开发者工具
Chrome DevTools 包含许多功能，用于分析页面的性能和页面上发生的进程。
可以转到 性能 选项卡并勾选包含 Web 指标的框。重新加载后，将在页面上看到所有正在运行的指标。录音将显示 FCP 和 LCP。
要快速查看指标分数，可以通过导航到 Rendering （渲染） 选项卡来查看这三个指标的 Core Web Vitals 叠加。
现场数据工具
Google 使用从 Google Chrome 用户那里收集的网站现场数据来确定 LCP 分数，这就是为什么我建议专注于这些工具来衡量它。
字段数据存储在 Chrome 用户体验报告 （CrUX） 中，这意味着可以根据 Google 用于排名的相同数据来优化你的网站。
可以通过以下工具访问 CrUX 数据：
PageSpeed Insights
Google 的 PageSpeed Insights 是用于分析 Core Web Vitals 的关键工具之一。它在移动和桌面设备上提供实验室 （Lighthouse） 和现场 （CrUX） 数据。它显示了真实世界数据的概述，并包括改进每个指标的有用建议。
CrUX Report API
可以使用 API 访问 CrUX 数据，这些数据代表了 Chrome 用户在网络上的真实体验。
这种访问数据集的方式为开发人员和网站管理员提供了一个快速而全面的解决方案，以深入了解用户如何体验页面以及如何使其在每个 CWV 指标方面变得更好。
Google Search Console（Core Web Vitals 报告）
Core Web Vitals 报告基于来自真实用户的数据。它显示了一个适用于移动设备和桌面设备的图表，其中细分了哪些页面显示为良好、需要改进和较差。
可以打开每个报告，了解具有相应分数的 URL 的详细概述。选择 URL 后，可以查看每个指标评分的详细信息。从该视图中，可以转到 PageSpeed Insights 以查找改进建议。
Web Vitals Chrome 扩展程序
此扩展程序测量 Core Web Vitals 指标并提供有关这些指标的反馈。可以查看你的 LCP 是否通过了所需的阈值并查看确切的分数。
该扩展程序通过 Chrome 用户体验报告 （CrUX） API 显示页面上的本地 Core Web Vitals 体验与真实用户数据之间的比较。
Google’s BigQuery
还可以使用 BigQuery 访问原始 CrUX 数据，并查看具有指定连接速度和设备类型的站点的 Core Web Vitals 性能结果，还可以选择跟踪一段时间内的指标。
阅读本文，准确了解如何在 BigQuery 中编写查询来访问 CrUX 数据 。
Google Data Studio
访问 CrUX 数据的另一种方法是通过 Google Data Studio。可以使用它来创建一个 CrUX 仪表板，为你提供相关数据的可视化。
在 web.dev 上阅读本指南，了解如何将 CrUX 数据与 Data Studio 结合使用 。
JavaScript API
与其他 Core Web Vitals 一样，如果有一些 JavaScript 经验，则可以使用 LCP API。这允许对正在测量的内容进行更精细的控制，但也有一些缺点。
以下是 API 报告的数据与 LCP 计算方式的不同之处：
API 将为 background 选项卡中加载的页面调度 largest-contentful-paint 条目，但在计算 LCP 时应忽略这些页面。在页面置于后台后，API 将继续调度 largest-contentful-paint 条目，但在计算 LCP 时应忽略这些条目（只有当页面始终处于前台时，才能考虑元素）。当页面从后退/向前缓存中恢复时，API 不会报告 largest-contentful-paint 条目 ，但在这些情况下应测量 LCP，因为用户会将它们体验为不同的页面访问。API 不考虑 iframe 中的元素，但要正确测量 LCP，您应该考虑它们。子帧可以使用 API 将其 largest-contentful-paint 条目报告给父帧进行聚合。
还可以使用 web-vitals JavaScript 库 ，这可以帮助你解决这些不一致问题。
如何找到 Largest Contentful Paint 元素？
优化 LCP 归结为找出哪个元素是 LCP 元素，并使其在用户浏览器中呈现得更快。
需要采取的第一步是确定哪个 LCP 候选者触发最终的 largest-contentful-paint 条目，并决定 LCP 分数。
以下是使用 Google Chrome 查找 LCP 元素的方法：
- 打开要查找其最大元素的页面。
- 打开 Chrome DevTools（在 Windows 上为 Ctrl+Shift+I，在 Mac 上为 Command+Option+I）。
- 导航到 Performance （性能） 选项卡。
- 单击 Record （或 Ctrl+E – 这将开始分析打开的页面的性能）。
- 使用 Ctrl+Shift+R 重新加载页面（在处理 Web 性能时，始终使用此方法而不是 F5 – 此方法可在不使用缓存资产的情况下重新加载页面）。
- 在 DevTools 中停止录制，并在 Timings （计时） 部分中查找 LCP。
- 将鼠标悬停在 LCP 上或单击 LCP 将显示决定 LCP 分数的最大元素。
应该如何继续优化 LCP 取决于它的元素类型。
如果它是一张图像并且你的服务器不是罪魁祸首，那么适当的压缩通常已经将你置于“良好”的 LCP 支架中。
对于文本，请确保将其放置在浏览器从服务器获取的初始 HTML 响应中。
下面，将找到有关如何更快地交付 LCP 的具体指南。
如何加快 Largest Contentful Paint 加载速度？
优化服务器响应时间
如果服务器对浏览器发送的请求反应缓慢， LCP 将受到影响。
服务器响应缓慢可能是由以下原因引起的：
- 在响应浏览器之前必须运行复杂的计算，
- 动态生成页面服务器端，而不是提供静态页面，
- 服务器请求超载，无法及时处理所有请求。
以下是一些修复服务器性能缓慢的方法：
选择更快的托管服务
更快的托管可以提高页面性能的许多方面，因此最好有意识地为网站选择合适的托管服务。例如，考虑找到一个服务器位于大多数用户附近位置的解决方案。
使用 CDN
CDN（内容交付网络）可以帮助你更快地将资产交付给位于世界不同地区的用户。
如果使用的是单个服务器，则世界另一端的用户将不得不等待更长的时间，直到他们的浏览器可以呈现内容。使用 CDN，您可以将你的资产托管在全球的多个服务器上，并且能够更快地将内容交付给世界上任何地方的用户。
启用缓存
缓存是一种在资产下载一次后存储资产副本的技术，这样就不必在每次浏览器需要时都下载它们。如果想要一个高性能的网站，这一点至关重要，利用缓存将对你的性能有益，而不仅仅是提高 LCP。
尽早建立第三方连接
服务器可能需要建立第三方连接，尤其是当需要它们显示关键内容时，这可能会对 LCP 分数产生负面影响。
尽早建立连接的最佳解决方案是在页面代码中使用 rel=“preconnect”。此外，由于某些浏览器不支持 preconnect，请使用 rel=“dns-prefetch” 以及回退。
优化渲染阻塞资源
当浏览器开始解析从服务器下载的初始 HTML 时，加载网页的过程开始。
每当浏览器需要加载外部 CSS 或 JavaScript 资产时，解析 HTML、基于它生成 DOM 树并最终呈现页面都会暂停。
这就是这些资源被称为渲染阻塞的原因。
优化渲染阻塞资源是一个复杂的过程，涉及以下选项：
延迟或内联非关键 JavaScript
JavaScript 文件特别有可能对 LCP 分数产生负面影响。
如果为非关键 JS 脚本分配延迟状态，浏览器可以在加载和处理 JS 之前解析 HTML 并构建 DOM。因此，JS 的渲染阻塞影响会减少，并且可以获得更好的 LCP 分数。
还可以在 HTML 中内联 JS，以防止渲染延迟，并在页面加载中尽早运行它。
内联或减少关键 CSS 文件
关键 CSS 代码需要尽快加载。为了加快 CSS 加载速度，可以做的一件事是将 CSS 内联到 HTML 中。
或者，如果 CSS 太大，可以减小其大小以使其小于 LCP 元素。要减小大小，可以：
- 延迟非关键 CSS，
- 缩小（删除多余的空格、缩进和注释）和压缩 CSS，
- 删除未使用的 CSS 文件。
压缩图像
图像压缩是在图像质量和资产大小之间保持平衡的艺术。
由于对于大多数网站来说，LCP 元素是图像，因此优化图像对于获得良好的 LCP 分数至关重要。
还可以通过以下方式调整图像：
- 为图像提供最佳图像大小，
- 使用适当的现代图像格式。
压缩文本资源
呈现页面所需的任何文本文件（HTML、CSS 和 JavaScript） 都可以使用 Gzip、Brotli 或其他压缩方法进行压缩，以最小化其交付大小并降低 LCP 分数。
你是否正在为自己的 LCP 分数而苦苦挣扎？查看我们的网站性能服务 。我们可以帮助您提高 Web 性能。
LCP 与衡量性能的其他渲染指标
LCP 是渲染指标之一，这意味着它可以捕获网页的特定部分在用户浏览器中呈现的时刻。
尽管 Google 选择在排名算法中包含 LCP，但可以为你的网站优化其他渲染指标：
- Load Event 在加载整个页面时触发，
- First Paint 标记浏览器呈现与之前在屏幕上呈现的任何内容不同的点。
- First Contentful Paint 标记了呈现第一部分内容的点，
- First Meaningful Paint 显示何时呈现基本内容（与 LCP 相比，根据不同的启发式方法进行选择），
- DOMContentLoaded 在初始 HTML 完全加载和解析时触发。DCL 和 load 之间的区别在于，不需要加载图片等外部资源即可发生 DCL。
虽然所有这些指标在你优化网站时都很有用，但它们并不是专门衡量页面主要内容加载和用户可见的速度的最佳选择。
较旧的指标（如 load 或 DOMContentLoaded） 并不好，因为它们不一定与用户在屏幕上看到的内容相对应。而较新的、以用户为中心的性能指标，如 First Contentful Paint （FCP）， 只能捕获加载体验的开始。如果页面显示启动画面或显示加载指示器，则此时刻与用户不是很相关。
LCP 具有一些优势和改进 – 以下是定义 LCP API 的文档中的解释：
如今，开发人员没有与用户的视觉渲染体验相关的可靠指标。现有指标（如 First Paint 和 First Contentful Paint）侧重于初始渲染，但没有考虑绘制内容的重要性，因此可能表明用户仍然认为页面没有用。
LCP 旨在成为一种新的页面加载指标：
- 与现有页面加载量度相比，与用户体验的相关性更高
- 易于理解和推理
- 减少游戏的机会
从用户的角度来看，页面加载过程中最大的 Paint 可能表示有意义的事件。 因此，我们希望默认向开发人员公开它，使性能团队、分析提供商和基于实验室的测量工具能够收集这些指标，而无需创建内容本身的人进行额外的注释工作。
结束语
Largest Contentful Paint 指标是一种看似简单但有效的方法来衡量关键内容何时显示在用户的视口中。借助所有其他可用的指标，我们越来越接近一种一致、通用的方法，即在 考虑用户体验的情况下准确衡量网站性能 。
Nat H.
您好！我是Nat，imrnat的创始人。感谢您将宝贵的时间托付给我们，我希望您在这篇博文中找到了问题的答案。
如果您仍然想知道如何确切地推进您的自然增长，请查看我们的服务页面并安排一次免费的对话，我们将为您完成所有繁琐的工作。
希望能尽快与您交谈！
