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