其中 图片 和视频 网站的典型载荷可能相当可观 遗憾的是，项目相关方可能不愿意从他们现有的 应用。 这种僵局令人沮丧， 尤其是当所有相关方都希望提升网站性能时， 但又不知如何前往目的地 幸运的是，延迟加载是一种可减少初始网页载荷并 但不会省略内容。
什么是延迟加载？
延迟加载是一种技术，可延迟加载网页中的非关键资源 加载时间。这些非关键资源会在 。涉及图片的情况为“非关键”通常等同于 “屏幕外”。如果您使用过 Lighthouse，并发现过一些优化机会， 您可能在这方面看到了一些指导， 推迟屏幕外图片审核：
您可能已经见过延迟加载的实际应用了， ：
- 您到达一个页面，并开始滚动阅读内容。
- 在某个时间点，您将占位符图片滚动到视口中。
- 占位符图片突然替换为最终图片。
您可以在热门发布平台上找到图片延迟加载的示例 中：用于在以下位置加载轻量级占位图片： 并在用户滚动到这些图片时将其替换为延迟加载的图片 视口
如果您不熟悉延迟加载，您可能想知道 具体技术是什么，以及有什么好处请阅读下文，一探究竟！
为什么要延迟加载图片或视频，而不是直接加载它们？
因为您可能会加载用户可能永远不会看到的内容。这是 可能的原因有以下几种：
- 会浪费数据。在使用不按流量计费的网络时，这并不是 （虽然您可能会将这些宝贵的带宽用于 用户实际会看到的其他资源）。数据流量有限时 然而，加载用户永远不会查看的内容实际上是一种浪费 自己的钱财。
- 这会浪费处理时间、电池电量和其他系统资源。媒体播放完毕后 浏览器必须将其解码，并以 视口
延迟加载图片和视频可缩短初始网页加载时间 页面��量和系统资源使用情况，所有这些都会对 性能
实现延迟加载
您可以通过多种方式实现延迟加载。 您在选择解决方案时必须考虑您支持的浏览器， 以及您尝试延迟加载的内容
现代浏览器实现了浏览器级延迟加载，
可以在图片和 iframe 上使用 loading 属性启用该功能。
为了与旧版浏览器兼容
或者在没有内置延迟加载的情况下对元素执行延迟加载
您可以使用自己的 JavaScript 实现解决方案。
有许多现有的库可以帮助您执行此操作。
如需详细了解所有这些方法，请参阅此网站上的帖子：
此外，我们还汇总了延迟加载的潜在问题列表， 以及在实现过程中需要注意的事项
总结
谨慎使用延迟加载图片和视频可以显著降低 加载时间和网页载荷，包括核心网页指标。用户不会产生不必要的网络 包括在慢速连接上出现网络争用，以及可能永远看不到、但 也可以根据需要查看这些资源
就性能改进方法而言，延迟加载是合理的， 无争议。如果您的网站包含大量内嵌图像， 减少不必要的下载的有效方式。您网站的用户和 项目利益相关方将不胜感激！