如何实现WordPress图像和视频懒加载

根据HTTP Archive,网页平均体积为3719 kB,其中图像和视频占总体积的近78%。 这对于网站访问者的浏览器下载和渲染来说是很多字节,并且未来的趋势网页越来越大及使用更多的图像或者视频内容。 在共享媒体和将媒体文件整合到网站设计中时,WordPress正在引领潮流。 使用WordPress,可以轻松地将图像和视频集成到文章,页面甚至主题的背景中。

但是,过多的媒体资源使得网页加载变得非常缓慢,因为用户在查看网页之前必须等待下载大文件(包括最初未显示的文件)。 这是为什么我们要对WordPress做图片或者视频懒加载(延迟加载)的原因。

什么是延迟加载以及它如何工作

延迟加载(又称懒加载)是一种加载可见内容的优化技术,即延迟下载和呈现在首屏下方需要显示的内容。这也是谷歌极力推广的网页优化策略“缩减首屏内容的大小”,如果您的WordPress文章和页面包含大量嵌入式视频和高分辨率图像,这是一种应该考虑的技术。

延迟加载的工作方式如下:

  • 浏览器在不下载图像和预加载视频下构建网页DOM而。
  • JavaScript用于确定要下载哪些图像以及根据页面加载时最初可见的内容预加载哪些视频。这些图像和视频会根据需要下载和预加载。
  • 下载和呈现其他视频会延迟,直到网站访问者向下滚动页面并且其他内容进入视图。
    最终结果是,在实际需要之前,不会下载图像和加载视频。这可以为包含大量高分辨率图像和嵌入视频的网站实现显着的性能提升。

WordPress延迟加载

与许多其他网站性能问题一样,WordPress延迟加载也是可以通过插件来解决。 实际上,WordPress插件库有许多插件可用于延迟加载图像和视频。 这样的插件林林总总,我们从中挑了五个可以显着提高网站性能的插件。 如果您已准备好实施延迟加载,可以考虑这五个插件。

BJ Lazy Load

如何实现WordPress图像和视频懒加载插图
该插件安装和设置都非常简单。只需通过“插件-安装插件”搜索该插件,并安装启用。启用后,通过“设置 ”>“BJ Lazy Load”即可进入插件设置界面。默认情况下会选择所有延迟加载选项,除非您在启用插件后,网站前端遇到问题,否则您无需对插件执行过多的设置。

Lazy Load XT

如何实现WordPress图像和视频懒加载插图(1)
启用插件后,通过WordPress仪表盘“设置>Lazy Load XT”配置插件。 你会注意到这个插件不仅仅提供延迟加载图片和视频支持,还提供压缩JS和CSS文件,使用Cloudflare CDN加载JavaScript和CSS库,并将脚本移动到站点页脚等功能。

a3 Lazy Load

如何实现WordPress图像和视频懒加载插图(2)
启用插件后,在WordPress仪表盘新增了“设置>a3 Lazy Load”菜单。 出于测试目的,使用了插件的默认设置,但有一个例外,“Loading Background Colour ”选项将占位符颜色与网页背景的颜色相匹配。

Lazy Load

如何实现WordPress图像和视频懒加载插图(3)
此插件适用于缩略图,文章内容或小部件文本中的所有图像,头像和表情符号。 这个插件的最大优点是没有使用JavaScript库,例如jQuery,脚本大小不到10 KB。 没有配置选项,只需安装插件,延迟加载即可实现。

Lazy Load for Videos

如果您只需要延迟加载视频,Lazy Load for Videos 插件即可。 虽然上面的一些插件也支持视频延迟加载,但对于视频内容来说Lazy Load for Videos是一个很好的解决方案。
如何实现WordPress图像和视频懒加载插图(4)

懒加载对SEO的影响

无论你最终使用哪个插件进行WordPress延迟加载,都要考究到对SEO的影响。需要确保以下两件事:

  1. :确保搜索引擎仍然可以抓取延迟加载的图片。 您可以使用Google Search Console中抓取菜单下的“Fetch as Google” 工具进行检查。其实如果可以在源代码中看到图像内容,那么很可能就没问题。
  2. 确保懒加载图片上使用alt,因为这对搜索引擎图片搜索排名很重要

人已赞赏
WordPress教程

WordPress免插件配置SMTP邮件功能教程

2020-2-5 15:51:41

WordPress教程

给WordPress系统博客用户评论添加验证码

2020-2-12 14:54:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索