使用延迟加载来提高网站加载速度

发布时间:2020-11-17 16:11:38 阅读:8

网站中的图像和视频部分可能很重要。如果图像和视频资源过于臃肿时,会对访问者造成很大的困扰。幸运的是,延迟加载是一种可以减少初始页面有效负载和加载时间,而且不会损失访问者的时间。

什么是延迟加载?

延迟加载是一种在页面加载时推迟非关键资源加载的技术。而是在需要时加载这些非关键资源。在涉及图像的地方,“非关键” 通常与 “屏幕外” 同义。如果你使用了 Lighthouse 并研究了一些改进的机会,那么你可能已经以 Defer offscreen images audit 的形式看到了该领域的一些指导 :

Lighthouse 的性能审核之一是识别屏幕外图像,这些图像适合延迟加载
Lighthouse 的性能审核之一是识别屏幕外图像,这些图像适合延迟加载

你可能已经看到了延迟加载的实际效果,它看起来像这样:

  • 访问页面,并在阅读内容时开始滚动。
  • 在某个时候,将占位符图像滚动到视口中。
  • 占位符图像突然被最终图像替换。

可以在流行的发布平台 Medium 上找到图像延迟加载的示例,该平台 在页面加载时加载轻量级的占位符图像,并在滚动到视口时将它们替换为延迟加载的图像。

图像延迟加载的示例。占位符图像在页面加载时(左)加载,当滚动到视口时,最终图像在需要时加载
图像延迟加载的示例。占位符图像在页面加载时(左)加载,当滚动到视口时,最终图像在需要时加载

如果你不熟悉延迟加载,你可能会想知道该技术的实用性以及它的好处。请仔细阅读本文,找出答案!

为什么要延迟加载图像或视频而不是仅加载它们?

因为你可能正在加载用户可能永远看不到的内容。这是有问题的,原因如下:

  • 浪费数据。在不限流量的连接上,这并不是最糟糕的事情(尽管你可能会使用宝贵的带宽来下载其他用户确实会看到的资源)。但是,在有限的数据计划中,加载用户从未见过的东西实际上可能是在浪费他们的钱。
  • 浪费处理时间,电池和其他系统资源。下载媒体资源后,浏览器必须对其进行解码并在视口中呈现其内容。

延迟加载图像和视频可减少初始页面加载时间,初始页面权重和系统资源使用率,所有这些都会对性能产生积极影响。

实施延迟加载

有多种方法可以实现延迟加载。你选择的解决方案必须考虑到你所支持的浏览器以及你要延迟加载的内容。

现代浏览器实现了内置的延迟加载功能,可以使用 img 和 iframe 上的 loading 属性启用该功能。为了提供与旧版浏览器的兼容性或在没有内置延迟加载的情况下对元素执行延迟加载,你可以使用自己的 JavaScript 实现解决方案。还有许多现有的库可以帮助你完成此任务。有关所有这些方法的完整详细信息,请参见本网站上的文章:

结论

请谨慎使用延迟加载,延迟加载图像和视频会有效地降低站点的初始加载时间和页面有效负载。用户不会产生不必要的网络活动和他们可能从未见过的媒体资源的处理成本,但是如果愿意,他们仍然可以查看这些资源。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"使用延迟加载来提高网站加载速度",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560