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