什么是lazy loading延迟加载

什么是lazy loading延迟加载

什么是lazy loading延迟加载

  延迟加载是一种优化技术,它会延迟内容的下载和渲染,直到它们在屏幕上可见,延迟加载本质上是延迟图像的加载,直到用户向下滚动页面(图像进入访客视线),延迟加载WordPress插件是提高 WordPress 页面速度的好方法。

什么是lazy loading延迟加载

  没有人喜欢速度慢的网站,一个漂亮的网站很棒,但如果没人看到它,那就不行了。此外,与其他任何内容相比,图像在您的网站上加载所需的时间最多,延迟加载通过仅加载他/她正在查看的图像极大地改善了用户体验。其余图像在用户向下滚动页面时加载。

  本文晓得博客为你介绍什么是什么是lazy loading延迟加载及WordPress建站中如何使用延迟加载。

lazy loading延迟加载优缺点

  延迟加载是延迟加载或初始化资源或对象的做法,直到真正需要它们以提高性能和节省系统资源。例如,如果网页有一个用户必须向下滚动才能看到的图像,您可以显示一个占位符并仅在用户到达其位置时才延迟加载完整图像。

  延迟加载的好处

  • 减少初始加载时间——延迟加载网页可减少页面重量,从而加快页面加载时间。
  • 带宽节约——延迟加载通过仅在用户请求时才向用户提供内容来节约带宽。
  • 系统资源节约——延迟加载节约了服务器和客户端资源,因为实际上只有一些图像、JavaScript 和 其他代码需要被渲染或执行。

  延迟加载的缺点

  • 用户请求资源的速度可能比预期的要快:例如,如果用户快速向下滚动页面,他们可能必须等待图像加载。这可能会对用户体验产生负面影响。
  • 与服务器的额外通信:当用户与页面交互时,浏览器可能不得不向网站的服务器发送多个内容请求,而不是一次请求所有页面内容。
  • 供浏览器处理的附加代码:如果开发人员在网页中添加几行 JavaScript 来告诉浏览器如何延迟加载页面资源,会增加浏览器必须加载和处理的代码量。

  推荐:WordPress网站如何使用WP Rocket删除未使用的CSS

延迟加载如何工作

lazy-loading延迟加载如何工作

  延迟加载基本上是给懒加载的网页资源(图片、视频等)加上一个引用的 src 属性,并为原始内容添加另一个属性,然后使用 JavaScript 来检测访问者在页面的滚动位置。当滚动位置最接近参考对象时,它将参考 src 属性替换为实际 src 并加载内容。

图像:

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

iFrame:

<iframe src="https://example.com" loading="lazy" width="600"  height="400"></iframe>

  例如,如果访问者打开一个网页并立即离开它,那么除了网页顶部之外,什么都不会加载。在运行时加载资产减少了页面必须发送到服务器以进行初始加载的请求数量,从而在 WordPress 网站服务器和访问者之间一次性实现更快和最少的通信。

  推荐:如何减少WordPress网站HTTP/S请求数

将延迟加载添加到WordPress网站

  WordPress 5.5 添加了延迟加载作为默认功能。但是,如果想自定义图像延迟加载和背景图像延迟加载的方式,则需要使用 WordPress 插件。

  注意:虽然延迟加载有助于提高网站加载速度,但在上传到 WordPress 之前,您应该始终优化网络图像以获得最佳性能。

  推荐:6个最好的WordPress图像优化器插件提高WordPress网站性能

  1、使用 WP Rocket 在 WordPress 中延迟加载图像

  晓得博客使用的是WP Rocket插件在WordPress中延迟加载图像。它是市场上最好的WordPress缓存插件,可让您轻松开启图像延迟加载。除此之外,它还是一个非常强大的插件,可以帮助您优化网站速度,而无需了解复杂的技术术语。

使用 WP Rocket 在 WordPress 中延迟加载图像

  要启用图像延迟加载,您所要做的就是选中几个框。您甚至可以为视频启用延迟加载,这将进一步提高您的网站速度。

  推荐:(图文)WP Rocket插件配置教程

  2、使用 a3 Lazy Load 在 WordPress 中延迟加载图像

  图像是资源密集型的,消耗大量带宽和存储空间。使用a3 Lazy Load插件,您可以在ON/OFF之间切换。不仅如此,当图像的延迟加载打开时,您可以控制它应该在哪里工作。

使用 a3 Lazy Load 在 WordPress 中延迟加载图像

  a3延迟加载不仅限于延迟加载图像,它还允许您延迟加载视频。它支持所有使用 iFrame 在初始加载时加载视频的 WordPress 视频嵌入。同样,它包含开/关切换。包括帖子、页面和自定义帖子类型(所有内容区域),小部件(侧边栏、页眉和页脚),应用于发布缩略图,适用于 Gravatars。

总结

  以上是晓得博客为你介绍的什么是lazy-loading延迟加载的全部内容,希望本文对你的WordPress网站优化有所帮助,如有问题,欢迎留言探讨。

  推荐:Akismet插件教程WordPress阻止过滤垃圾邮件插件

给文章评分

晓得博客,版权所有丨如未注明,均为原创
晓得博客 » 什么是lazy loading延迟加载

转载请保留链接:https://www.pythonthree.com/what-is-lazy-loading/

Claude、Netflix、Midjourney、ChatGPT Plus、PS、Disney、Youtube、Office 365、多邻国Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折

Chatgpt-Plus注册购买共享账号
滚动至顶部