延迟加载是在需要而不是提前加载资源的策略。这种方法在初始页面加载期间释放资源，并避免加载从未使用过的资产。

在初始页面加载期间屏幕外的图像是此技术的理想候选者。最重要的是，​​lazysizes​​使这是一个非常简单的实现策略。

什么是懒惰尺寸？

​​lazysizes​​是最流行的延迟加载图像库。它是一个脚本，可以在用户浏览页面时智能地加载图像，并对用户很快会遇到的图像进行优先级排序。

添加延迟大小

添加延迟大小很简单：

  • 将 lazysizes 脚本添加到您的页面。
  • 选择要延迟加载的图像。
  • 更新这些图像的和/或标签。

添加lazysizes脚本

将 lazysizes​​脚本​​添加到您的页面：

<script src="lazysizes.min.js" async></script>

更新和/或标签

 标签说明

前：

<img src="flower.jpg" alt="">

后：

<img data-src="flower.jpg" class="lazyload" alt="">

当您更新标签时，您会进行两项更改：

  • 添加​​lazyload​​类：这向lazysizes 表明应该延迟加载图像。
  • 将​​src​​属性更改为​​data-src​​：当需要加载图像时，lazysizes 代码​​src​​​使用属性中的值设置图像​​data-src​​属性。

 标签说明

前：

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

后：

<picture>
  <source type="image/webp" data-srcset="flower.webp">
  <source type="image/jpeg" data-srcset="flower.jpg">
  <img data-src="flower.jpg" class="lazyload" alt="">
</picture>

当您更新标签时，您会进行两项更改：

  • 将​​lazyload​​类添加到标记中。
  • 将标签​​srcset​​​属性更改为​​data-srcset​​.




验证

打开 DevTools 并向下滚动页面以查看这些更改的实际效果。当您滚动时，您应该会看到新的网络请求发生并且标签类从​​lazyload​​​变为​​lazyloaded​​。

此外，您可以使用 Lighthouse 来验证您是否没有忘记延迟加载任何屏幕外图像。运行 Lighthouse 性能审计（Lighthouse > Options > Performance）并查找Defer 屏幕外图像审计的结果。