如何优化最大的内容绘画并在谷歌中排名更高

如何衡量您网站的最大内容绘画

运行免费的网站速度测试以找出答案。 您的 LCP 速度将立即显示。

速度测试的结果会告诉您是否：

• 达到 LCP 阈值。
• 您需要优化任何其他 Core Web Vital。

如何计算最大的内容绘画？

谷歌查看体验的第 75 个百分位数——这意味着 25% 的真实网站访问者体验到 3.09 秒或更高的 LCP 加载时间，而 75% 的用户的 LCP 低于 3.09 秒。

在此示例中，真实用户 LCP 显示为 3.09 秒。

我的核心网络生命数据的实验室测试结果是什么？

通过此特定的网络速度测试，您还将看到在受控测试环境中收集的实验室指标。 虽然这些指标不会直接影响 Google 排名，但这些数据有两个优点：

1. 一旦您改进网站，指标就会更新，而 Google 的实时数据需要 28 天才能完全更新。
2. 除了指标之外，您还可以获得详细的报告，这可以帮助您优化网站。

此外，PageSpeed Insights 还提供实验室数据，但请记住，它报告的数据有时可能会产生误导，因为它使用模拟节流来模拟较慢的网络连接。

您如何找到最大的内容绘画元素？

当您使用 DebugBear 运行页面速度测试时，LCP 元素会在测试结果中突出显示。

有时，LCP 元素可能是一个大图像，而其他时候，它可能是一大部分文本。

无论您的 LCP 元素是图像还是一段文本，在您的页面开始呈现之前，LCP 内容都不会出现。

例如，在下面的页面上，背景图像负责最大的绘制。

相反，此页面的 LCP 是一段文本。

要改进您网站的 Largest Contentful Paint (LCP)，您需要确保负责 LCP 的 HTML 元素快速出现。

如何改进最大的内容绘画

要改进 LCP，您需要：

1. 找出使 LCP 元素出现所需的资源。
2. 查看如何更快地加载这些资源（或根本不加载）。

例如，如果 LCP 元素是照片，您可以减小图像的文件大小。

运行 DebugBear 速度测试后，您可以单击每个性能指标以查看有关如何优化它的更多信息。

影响 LCP 的常见资源有：

• 渲染阻塞资源。
• 未优化的图像。
• 过时的图像格式。
• 未优化的字体。

如何减少渲染阻塞资源

渲染阻塞资源是在浏览器开始在屏幕上绘制页面内容之前需要下载的文件。 CSS 样式表通常是渲染阻塞的，许多脚本标签也是如此。

要减少渲染阻塞资源对性能的影响，您可以：

1. 确定哪些资源是渲染阻塞的。
2. 查看资源是否必要。
3. 查看资源是否需要阻止呈现。
4. 查看资源是否可以更快地加载起来，例如使用压缩。

简单方法：在 DebugBear 请求瀑布中，对渲染阻塞资源的请求标有“阻塞”标签。

如何确定和加快 LCP 图像请求的优先级

在本节中，我们将利用图像上新的“fetchpriority”属性来帮助访问者的浏览器快速识别应首先加载的图像。

在 LCP 元素上使用此属性。

为什么？

仅查看 HTML 时，浏览器通常无法立即分辨出哪些图像是重要的。 一张图片可能最终成为大背景图片，而另一张图片可能只是网站页脚的一小部分。

因此，所有图像最初都被认为是低优先级，直到页面被渲染并且浏览器知道图像出现在哪里。

但是，这可能意味着浏览器很晚才开始下载 LCP 图像。

新的 Priority Hints 网络标准允许网站所有者提供更多信息，以帮助浏览器确定图像和其他资源的优先级。

在下面的示例中，我们可以看到浏览器花费了大量时间等待，如灰色条所示。

我们会选择这个 LCP 图像来添加“fetchpriority”属性。

如何为图像添加“FetchPriority”属性

只需将 fetchpriority=”high” 属性添加到 HTML img 标签，浏览器就会优先考虑尽快下载该图像。

<img src="photo.jpg" fetchpriority="high" />

如何适当地使用现代图像格式和大小图像

高分辨率图像的文件通常很大，这意味着它们需要很长时间才能下载。

在下面的速度测试结果中，您可以通过查看深蓝色阴影区域看到这一点。 每行表示到达浏览器的图像块。

有两种减小图像尺寸的方法：

1. 确保图像分辨率尽可能低。 考虑根据用户设备的大小以不同的分辨率提供图像。
2. 使用像 WebP 这样的现代图像格式，它可以以较小的文件大小存储相同质量的图像。

如何优化字体加载时间

如果 LCP 元素是一个 HTML 标题或段落，那么为这块文本快速加载字体很重要。

实现此目的的一种方法是使用可以告诉浏览器提前加载字体的预加载标签。

font-display: swap CSS 规则还可以确保加速渲染，因为浏览器会立即使用默认字体渲染文本，然后再切换到网络字体。

监控您的网站以保持 LCP 快速

持续监控您的网站不仅可以让您验证您的 LCP 优化是否有效，还可以确保您在 LCP 变得更糟时收到警报。

DebugBear 可以随时间监控 Core Web Vitals 和其他站点速度指标。 除了运行基于实验室的深入测试外，该产品还跟踪来自 Google 的真实用户指标。

通过 14 天免费试用试用 DebugBear。