使用延迟加载和 BlurHash 改善核心 Web Vitals 的基本指南

如今，网站速度变得越来越重要，因为研究表明70% 的消费者表示页面速度会影响他们的在线购买决策。但除了消费者体验之外，谷歌最近还更新了其 Core Web Vitals (CWV) 报告，并就有关页面性能的最重要指标提供了指导。这意味着在搜索算法方面，用户体验和页面性能的质量现在越来越受到重视。

快速回顾一下：Core Web Vitals 衡量网络体验的三个关键方面：加载、交互性和视觉稳定性。改进 Core Web Vitals (CWV) 和 SEO 的最有效方法之一是优化图像资产。有几种方法可以实现这一点，包括适当的图像压缩、调整大小和下一代图像转换。

除了这三种技术之外，您还可能会看到 Defer Offscreen Images（也称为延迟加载）作为PageSpeed Insights 分析中的改进机会之一。使用占位符（例如BlurHash）也是改善感知加载时间并在连接或站点加载图像缓慢时提供更好用户体验的绝佳选择。

什么是延迟加载？

想象一个带有 100 张高分辨率鞋子照片的电子商务页面。如果浏览器一次加载所有照片，页面底部的一些照片可能会在您滚动到它们之前出现，而视口中的照片可能不会出现，这会造成糟糕的用户体验。

延迟加载是一种技术，可以延迟屏幕外图像的加载，直到访问者滚动并且图像进入视口。它允许在任何给定时间加载更少的图像并加快每个图像的加载时间，这可以改进 Largest Contentful Paint。

延迟加载也可以改善首次输入延迟 (FID)。 FID 是页面响应用户第一次交互（例如点击）所花费的时间。通过策略性地延迟加载图像等大型组件，该网站可以处理 JavaScript 并更快地响应交互。在下面的示例中，对于nytimes.com ，在分析当天，如果实施延迟加载，它可以将页面速度提高 1.5 秒。

如何实现延迟加载

您如何实现延迟加载取决于您的代码库和您支持的浏览器。除了 loading=“lazy”（Chrome 支持的 HTML 属性）之外，开发人员还可以使用 JavaScript 和/或路口观察器API要求。以下图表来自caniuse.com显示哪些浏览器支持 HTML 延迟加载属性：

然而，考虑到浏览器的变化速度及其独特的功能，开发人员越来越多地考虑将 lazysizes.js JavaScript 作为最佳实践。在下面的视频中，我们在 Cantilever 的合作伙伴演示并比较了 loading=“lazy” 和 lazysizes.js 实现。

最佳实践：lazysizes.js + imgix.js

将 lazysizes.js 与 imgix.js 一起使用是结合 imgix 图像优化和延迟加载优势的好方法。这是一个如何将其作为元属性完成的示例：

<头>

<meta property="ix:srcAttribute" content="data-src">

<meta property="ix:srcsetAttribute" content="data-srcset">

<meta property="ix:sizesAttribute" content="data-sizes">

</头>

这是一个如何在 JavaScript 中完成的示例：

imgix.config.srcAttribute = 'data-src';

imgix.config.srcsetAttribute = 'data-srcset';

imgix.config.sizesAttribute = '数据大小';

在延迟加载中使用占位符

延迟加载的风险在于它可能会增加页面布局的不稳定性，从而导致更差的 CLS 分数。例如，当访问者快速向下滚动并开始阅读图片说明时，图片可能会突然出现，将说明推到视线之外。缓解此问题的方法是使用低质量的占位符或模糊散列, 它将占用一个框架，直到它适合加载一个完整的详细版本。

将 BlurHash 代码应用到图像后，生成的占位符将如下所示：

使用 BlurHash 作为占位符

模糊散列是一种算法，可让您创建图像占位符的紧凑版本。该算法创建一串字符，对图像的模糊表示进行编码，字符的数量由图像的质量决定。该字符串足够短，您可以直接在页面标记中提供它，然后可以将该字符串解码为模糊图像，而无需获取和下载图像文件。

BlurHash 的一个主要优点是您可以将大型图像文件转换为较小的数据量，以便在原始文件仍在加载时显示图像的模糊表示。Wolt 的工程师提出了 BlurHash 的想法同时试图找到一个更好的解决方案来解决图像在较慢的互联网连接上的加载方式。

如何使用 BlurHash 功能

要创建模糊图像，只需将 fm=blurhash 添加到任何图像以获取 BlurHash 字符串。获得 BlurHash 字符串后，就可以在 BlurHash 组件中使用它。 BlurHash 组件负责将哈希解码为可以显示的图像。

在此特定示例中，React BlurHash 组件在最终标记中生成一个画布元素。注意：生成的标记可能会略有不同，具体取决于使用的库或框架解码器。

导入'./App.css'；

从“react-imgix”导入 Imgix；

从“react-blurhash”导入{Blurhash}；

功能应用程序（）{

返回 （

<div className="应用程序">

<section className="App-header">

<模糊散列

hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"

宽度={600}

高度={400}

/>

<图片

src="https://assets.imgix.net/example-images/puffins.jpg"

宽度={600}

高度={400}

/>

</节>

</div>

);

}

将 BlurHash 代码应用到图像后，生成的占位符将如下所示：

在构建时将 BlurHash 字符串包含在您的标记中，以确保用户立即看到图像的模糊版本。

外卖

您的 CWV 指标比以往任何时候都更加重要，但好消息是您可以通过一些快速有效的方法来改进它们。将延迟加载与图像优化相结合并使用有效的占位符（如 BlurHash）是获得经过验证的结果的两种方法。您可以使用 imgix 轻松实现这些技术，查看我们的文档或者免费尝试.