网站典型负载中的图像和视频部分可能很重要。不幸的是，项目利益相关者可能不愿意从他们现有的应用程序中削减任何媒体资源。这种僵局令人沮丧，尤其是当所有相关方都想提高网站性能，但无法就如何实现这一目标达成一致时。幸运的是，延迟加载是一种降低初始页面负载和加载时间的解决方案，但不会吝啬内容。
什么是延迟加载？
延迟加载是一种在页面加载时延迟加载非关键资源的技术。相反，这些非关键资源在需要时加载。就图像而言，“非关键”通常与“屏幕外”同义。如果您使用过 Lighthouse 并检查了一些改进的机会，您可能已经在Defer offscreen images audit 中看到了该领域的一些指导：
lighthouse的性能审计之一是识别屏幕外图像，这些图像是延迟加载的候选对象。
你可能已经看到了延迟加载的作用，它是这样的：
- 您到达一个页面，并在阅读内容时开始滚动。
- 在某些时候，您将占位符图像滚动到视口中。
- 占位符图像突然被最终图像替换。
在页面加载时加载轻量级占位符图像，并在它们滚动到视口中时将其替换为延迟加载的图像。
为什么要延迟加载图像或视频而不是仅仅加载它们？
因为您可能正在加载用户可能永远不会看到的内容。由于以下几个原因，这是有问题的：
- 它浪费数据。在未计量的连接上，这并不是最糟糕的事情（尽管您可能会使用宝贵的带宽来下载用户确实会看到的其他资源）。然而，在有限的数据计划中，加载用户从未见过的东西实际上可能是在浪费他们的钱。
- 它浪费了处理时间、电池和其他系统资源。下载媒体资源后，浏览器必须对其进行解码并在视口中呈现其内容。
延迟加载图像和视频减少了初始页面加载时间、初始页面权重和系统资源使用，所有这些都对性能有积极影响。
实现延迟加载
有多种方法可以实现延迟加载。您选择的解决方案必须考虑您支持的浏览器，以及您尝试延迟加载的内容。
现代浏览器实现了浏览器级别的延迟加载，可以使用loading图像属性启用它。
您可以使用该loading=lazy属性来推迟图像的加载，直到用户滚动到它们为止。
<img src='dog.jpg' loading='lazy' alt='狗'>
结论
小心使用，延迟加载图像和视频会严重降低您网站上的初始加载时间和页面负载。用户不会因他们可能永远不会看到的媒体资源而产生不必要的网络活动和处理成本，但如果他们愿意，他们仍然可以查看这些资源。
就性能改进技术而言，延迟加载是无可争议的。如果您的站点中有大量内嵌图像，这是减少不必要下载的绝佳方式。您网站的用户和项目利益相关者会很感激的！
