修复最大内容绘制 (LCP) 的 4 种专家

最后更新于 2024 年 11 月 13 日 |8 分钟

在推出核心网络生命力指标三年后，全球仍有 33% 的网站难以通过这一极具挑战性的指标——最大内容绘制 (LCP)

为了解决这个问题，我们与 Google 合作，推出了由四部分组成的网络研讨会系列“您的业务的核心网络要素”。第三集专门介绍如何掌握 LCP 优化，现在可以在 YouTube 上重播：

在此会议上，Google 顶尖人才 Barry Pollard 和 Adam Silverstein 与 NitroPack 的 CTO Ivailo Hristov 一起讨论：

请继续阅读网络研讨建筑师数据库会的亮点和可操作的清单，以将您的 LCP 从“失败”修复为“通过”。

什么是最大内容绘制 (LCP)？

最大内容绘制 (LCP) 是一项核心 Web 指标，用于衡量视口中最大元素相对于页面首次开始加载时的渲染您可以在以下任一级别指示浏览器时间。它对用户体验尤其重要，因为它可以帮助您从用户的角度了解感知到的加载性能。

延迟的 LCP 可能表示页面加载其主要内容的时间过长，从而导致用户感觉加载缓慢。使用以下阈值来衡量您的 LCP 分数：

根据网页的结构和内容，各 CA 细胞数种元素都可以被视为最大的内容元素。

以下任意一项均可归类为最大内容元素候选：

图像：包括使用img 标签加载的图像，以及通过 CSS 用作视口内显示的背景图像。
svg元素内的图像元素：如果 SVG 包含图像元素（例如通过图像标签），则可以将其报告为 LCP。
视频：视频的海报图像（视频播放前显示的图像）可以作为 LCP。如果没有海报图像，视频会自动播放而无需用户交互，则视频帧本身也可以作为 LCP。
动画媒体：例如，使用第三方动画应用程序创建的动画 GIF 的第一帧
块级文本元素：这涉及文本元素，例如标题（h1、h2 等）、段落（p）、列表（ul、ol 等）等。在视口中占用最大空间的文本块可以作为 LCP 候选。
通过 CSS 加载背景图像的元素：如果元素（例如div 或section）使用 CSS 中的 background-image 属性设置了背景图像，并且该图像是最大的可见内容，则它可以是 LCP。

在内部，Chrome 浏览器将在页面内容呈现时识别不同的 LCP 元素。这意味着在初始页面加载期间，LCP 元素将发生变化，直到首屏加载完毕才显示最终最大的元素。

重要提示：根据不同的屏幕尺寸，同一网页的 LCP 元素可能会有所不同。

幸运的是，借助 Chrome DevTools 和 WebPageTest 等工具，您可以轻松识别特定页面加载场景的特定 LCP 元素。1

. 使用 Chrome DevTools

2. 使用 WebPageTest