轻松改善您网站上最大的内容绘制 (LCP)

优化您在网站上提供的用户体验对于任何在线业务的成功都至关重要。谷歌确实使用不同的用户体验相关指标来为 SEO 对网页进行排名，并继续提供多种工具来衡量和提高网络性能。

在最近尝试简化衡量和理解什么是良好用户体验的过程中，Google 对页面的用户体验指标进行了标准化。

这些标准化指标被称为核心 Web 指标，有助于评估您网页上的真实用户体验。

最大的内容绘制或 LCP 是 Core Web Vitals 指标之一，用于衡量视口中最大的内容元素何时可见。虽然 TTFB 和 First Contentful Paint 等其他指标也有助于衡量页面体验，但它们并不代表页面何时对用户变得“有意义”。

通常，除非页面上最大的元素变得完全可见，否则页面可能不会为用户提供太多上下文。因此，LCP 更能代表用户的期望。作为 Core Web Vital 指标，LCP 占 Performance Score 的 25%，使其成为最重要的优化指标之一。

检查您的 LCP 时间

根据 Google 的说法，Largest Contentful Paint 考虑的元素类型是：

• <img> 元素
• <image>元素内的<svg>元素
• <video> 元素（使用海报图片）
• 具有通过该url()函数加载的背景图像的元素（与CSS 渐变相反）
• 包含文本节点或其他内联级文本元素子级的块级元素。

现在，有多种方法可以衡量页面的 LCP。

衡量它的最简单方法是PageSpeed Insights、Lighthouse、Search Console（Core Web Vitals 报告）和 Chrome 用户体验报告。

例如，Google PageSpeed Insights 在其报告中指明了计算 LCP 时考虑的元素。

什么是好的 LCP 时间？

为了提供良好的用户体验，您应该努力在您的网站上拥有2.5 秒或更短的最大内容绘制。您的大部分页面加载都应该在此阈值下发生。

现在我们知道什么是 LCP 以及我们的目标应该是什么，让我们看看在我们的网站上改进 LCP 的方法。

如何优化最大内容绘制 (LCP)

在下面提到的所有技术中减少 LCP 的基本原理是减少下载到用户设备上的数据并减少发送和执行该内容所需的时间。

1.优化你的图片

在大多数网站上，首屏内容通常包含一个大图像，该图像被考虑用于 LCP。它可以是英雄形象、横幅或旋转木马。因此，优化这些图像以获得更好的 LCP 至关重要。

要优化图像，您应该使用第三方图像 CDN，例如 ImageKit.io。使用第三方图片CDN的好处是可以专注于自己的实际业务，将图片优化留给图片CDN。

图像 CDN 将始终处于技术发展的边缘，您始终可以以最少的持续投资获得最佳功能。

ImageKit 是一个完整的实时图像 CDN，可以与任何现有的云存储（如 AWS S3、Azure、Google Cloud Storage 等）集成。它甚至带有称为媒体库的集成图像存储和管理器。

以下是 ImageKit 如何帮助您提高 LCP 分数。

1. 以较轻的格式交付您的图像

ImageKit 检测用户的浏览器是否支持现代较轻的格式，如 WebP 或 AVIF，并实时自动以最轻的格式提供图像。与 JPEG 等价物相比，像 WebP 这样的格式要轻 30% 以上。

2. 自动压缩您的图像

ImageKit 不仅将图像转换为正确的格式，还将图像压缩为更小的尺寸。这样做时，它平衡了图像的视觉质量和输出大小。

只需更改 URL 参数，您就可以选择实时更改压缩级别（或质量），从而平衡视觉质量和加载时间的业务需求。

3. 为响应式图片提供实时变换

谷歌几乎对所有网站都使用移动优先索引。因此，与桌面相比，更重要的是针对移动设备优化 LCP。每个图像都需要根据布局的要求缩小。

例如，您需要在产品列表页面上使用较小尺寸的图像，在产品详细信息页面上使用较大尺寸的图像。这种调整大小可确保您不会发送除该特定页面所需的任何额外字节。

ImageKit 允许您通过在图像 URL 中添加相应的转换来实时转换响应式图像。例如，通过在其 URL 中添加高度和宽度转换参数，将以下图像调整为宽度 200 像素和高度 300 像素。

4. 缓存图片并缩短交付时间

图像 CDN 使用全球内容交付网络(CDN) 来交付图像。使用 CDN 可确保图像从更靠近用户的位置加载，而不是从您的服务器加载，后者可能位于地球的另一端。

例如，ImageKit 使用 AWS Cloudfront 作为其 CDN，它在全球拥有 220 多个交付节点。绝大多数图像的加载时间不到 50 毫秒。此外，它使用适当的缓存指令来缓存用户设备、CDN 节点甚至其处理网络上的图像，以加快加载时间。

这有助于改进您网站上的 LCP。

2. 预加载关键资源

在某些情况下，浏览器可能不会优先加载影响 LCP 的视觉上重要的资源。例如，折叠上方的横幅图像可以指定为 CSS 文件中的背景图像。由于浏览器在下载 CSS 文件并与 DOM 树一起解析之前永远不会知道此图像，因此它不会优先加载它。

对于此类资源，您可以通过向HTML 文档的 head 部分添加<link>带有rel= "preload"属性的标签来预加载它们。

<!-- Example of preloading -->
<link rel="preload" src="banner_image.jpg" />

虽然您可以在一个文档中预加载多个资源，但您应该始终将其限制为首屏图像或视频、全页面字体文件或关键的 CSS 和 JS 文件。

3. 减少服务器响应时间

如果您的服务器需要很长时间来响应请求，那么在屏幕上呈现页面所需的时间也会增加。因此，它会对每个页面速度指标产生负面影响，包括 LCP。为了改善您的服务器响应时间，您应该执行以下操作。

1. 分析和优化您的服务器

大量计算、数据库查询和页面构建发生在服务器上。您应该分析发送到服务器的请求并确定响应请求的可能瓶颈。它可能是数据库查询减慢速度或在您的服务器上构建页面。

您可以应用最佳实践，例如缓存数据库响应、预渲染页面等，以减少服务器响应请求所需的时间。

当然，如果上述措施没有改善响应时间，您可能需要增加服务器容量来处理传入的请求数量。

2. 使用内容交付网络

我们在上面已经看到，使用像 ImageKit 这样的图像 CDN 可以改善图像的加载时间。您的用户可以在几毫秒内从靠近他们位置的 CDN 节点获取内容。

您应该将同样的内容扩展到您网站上的其他内容。为您的静态内容（如 JS、CSS 和字体文件）使用 CDN 将显着加快它们的加载时间。ImageKit 确实支持通过其系统交付静态内容。

您还可以尝试为 HTML 和 API 使用 CDN，以在 CDN 节点上缓存这些响应。鉴于此类内容的动态特性，将 CDN 用于 HTML 或 API 可能比将 CDN 用于静态内容复杂得多。

3.预连接到第三方源

如果您使用第三方域来交付重要的首屏内容，例如 JS、CSS 或图像，那么您可以通过向浏览器指示需要尽快建立与该第三方域的连接而受益. 这是使用标签的rel="preconnect"属性完成的<link>。

<link rel="preconnect" href="https://static.example.com" />

使用preconnect到位，浏览器可以在稍后下载实际资源时节省域连接时间。

在这种情况下，您的主网站域 example.com 的 static.example.com 等子域也是第三方域。

您还可以在不支持预连接的浏览器中使用dns-prefetch作为后备。该指令指示浏览器完成对第三方域的 DNS 解析，即使它无法建立正确的连接。

4. 使用 Service Worker 优先提供内容缓存

Service Worker 可以拦截来自用户浏览器的请求并为其提供缓存响应。这允许我们在用户设备上缓存静态资产和 HTML 响应，并在不访问网络的情况下为它们提供服务。

虽然 Service Worker 缓存的用途与 HTTP 或浏览器缓存相同，但它提供了细粒度的控制，即使用户离线也能工作。您还可以使用 Service Worker 将缓存中的预缓存内容提供给网络速度较慢的用户，从而缩短 LCP 时间。

5. 压缩文本文件

您在网页上加载的任何基于文本的数据在通过网络传输时都应使用 gzip 或 Brotli 等压缩算法进行压缩。SVG、JSON、API 响应、JS 和 CSS 文件以及主页的 HTML 是使用这些算法进行压缩的理想选择。这种压缩显着减少了在页面加载时下载的数据量，从而降低了 LCP。

4. 移除渲染阻塞资源

当浏览器从您的服务器接收到 HTML 页面时，它会解析 DOM 树。如果 DOM 中有任何外部样式表或 JS 文件，浏览器必须暂停它们，然后继续解析剩余的 DOM 树。

这些 JS 和 CSS 文件称为渲染阻塞资源并延迟 LCP 时间。以下是一些减少 JS 和 CSS 文件阻塞时间的方法：

1.不要加载不必要的bundle

如果不需要，请避免将大量 JS 和 CSS 文件发送到浏览器。如果 CSS 可以稍后下载，或者特定页面上不需要 JS 功能，则没有理由预先加载它并阻止浏览器中的渲染。

假设您不能将特定文件拆分为较小的包，但这对页面的功能也不是关键。在这种情况下，您可以使用 script 标签的 defer 属性向浏览器指示它可以继续进行 DOM 解析并在稍后阶段继续执行 JS 文件。添加 defer 属性可以移除任何 DOM 解析的阻塞。因此，LCP 下降。

2. 内联关键 CSS

关键 CSS 包含出现在页面第一折叠中的 DOM 所需的样式定义。如果页面这部分的样式定义是内联的，即在每个元素的style属性中，浏览器就不需要依赖外部 CSS 来设置这些元素的样式。因此，它可以快速渲染页面，并且LCP下降。

3. 缩小和压缩内容

在将 CSS 和 JS 文件加载到浏览器之前，您应该始终对其进行缩小。CSS 和 JS 文件包含空格以使它们清晰易读，但它们对于代码执行来说是不必要的。因此，您可以删除它们，从而减少生产中的文件大小。较小的文件大小意味着文件可以快速加载，从而减少您的 LCP 时间。

如前所述，压缩技术使用数据压缩算法来减小通过网络传输的文件大小。Gzip 和 Brotli 是两种压缩算法。与 Gzip 相比，Brotli 压缩提供了更高的压缩率，现在所有主要浏览器、服务器和 CDN 都支持。

5、优化LCP客户端渲染

任何客户端呈现的网站都需要大量的 Javascript 才能在浏览器中加载。如果您不优化发送到浏览器的 Javascript，则在 Javascript 下载并执行之前，用户可能看不到或无法与页面上的任何内容进行交互。

我们在上面讨论了一些与 JS 相关的优化，比如优化发送到浏览器的包和压缩内容。您还可以执行更多操作来优化客户端设备上的渲染。

1.使用服务端渲染

您可以在服务器上动态生成页面，然后将其发送到客户端的设备，而不是将整个 JS 传送到客户端并在那里进行所有渲染。这会增加生成页面所需的时间，但会减少在浏览器中激活页面所需的时间。

但是，为同一页面同时维护客户端和服务器端框架可能非常耗时。

2. 使用预渲染

预渲染是一种不同的技术，其中无头浏览器模仿普通用户的请求并让服务器渲染页面。这个呈现的页面在构建周期中存储一次，然后每个后续请求都使用该预呈现的页面，而无需在服务器上进行任何计算，从而加快加载时间。

与服务器端渲染相比，这改进了 TTFB，因为页面是预先准备好的。但是交互的时间可能仍然会受到影响，因为它必须等待 JS 下载才能使页面具有交互性。此外，由于此技术需要预渲染页面，因此如果您有大量页面，它可能无法扩展。