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

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


与许多其他网站性能问题一样,WordPress延迟加载也是可以通过插件来解决。 实际上,WordPress插件库有许多插件可用于延迟加载图像和视频。 这样的插件林林总总,我们从中挑了五个可以显着提高网站性能的插件。 如果您已准备好实施延迟加载,可以考虑这五个插件。
以下截图是在添加任何图片或视频之前,使用Pingdom查阅更多网站测速工具)对网站进行速度测试的结果。

无加载
no-images-or-videos.png

正如您所看到的,页面非常小,只有不到155 kb,并且在不到半秒的时间内加载。 如果网站加载包含大型图片文件和嵌入式YouTube视频,测速结果将会如何?
加载图片和视频
images-or-videos.png

在测试网站添加图片和视频后,我们可以看到页面体积到了1.7 MB,页面加载时间增加到1.3秒。 我们可以看到添加图像和视频后使页面体积变大,并大大降低了页面加载速度。


使用延迟加载插件提高页面加载速度

这次墨轩部落格将对五个WordPress延时加载插件BJ Lazy Load,Lazy Load XT,a3 Lazy Load和Lazy Load(Lazy Load for Videos)进行测试。 让我们来看看每个插件变现如何。 当你尝试使用WordPress延迟加载插件时,一定要做一个前后测试,以确保能够达到你预期的结果。

1. BJ Lazy Load

BJ Lazy Load是一个非常受欢迎的懒加载插件。目前它在超过9w+个启用安装,获得4星评分。

BJ Lazy Load
bj-lazy-load-plugin-wordpress.jpg

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

在使用了懒加载插件BJ Lazy Load后,页面加载速度变化如下:

使用BJ Lazy Load
lazy-load-xt-plugin-wordpress.jpg

再经过多次测试统计后,结论是使用BJ Lazy Load插件可以让页面加载时间保持在300到400毫秒之间。

虽然安装此插件后页面加载速度惊人,但页面的大小实际上还是增加。 怎么回事? 理论上,激活延迟加载后,页面大小也应该会减少,因为并非所有图像都是在初始页面加载时下载的。


2. Lazy Load XT

Lazy Load XT在我们的测试中表现良好,是另一个值得考虑的WordPress延迟加载插件。 但需要注意的是这个插件不像BJ Lazy Load那么受欢迎,且已经有三年未更新了(鉴于技术支持保障及安全性考虑,不建议优先考虑此插件)。

Lazy Load XT
lazy-load-xt-plugin-wordpress.jpg

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

您可以使用其他选项来微调网站性能。 但由于我们本次只是测试延迟加载,此次仅采用了默认设置,并没有缩小或移动CSS和JavaScript,清除服务器缓存。最终通过Pingdom网站运行速度测试结果如下:

启用Lazy Load XT
pingdom-xt.png

启用Lazy Load XT插件后页面体积大小还是2 MB,页面加载时间不如BJ Lazy Load快,但相对于未启用懒加载,页面加载时间减少50%。


3. a3 Lazy Load

a3 Lazy Load是WordPress插件市场其中一个非常流行的WordPress延迟加载插件。 此插件目前已有超过10w+个有效激活安装,并且得到了4.5星评分。

a3 Lazy Load
a3-lazy-load-wordpress-plugin.jpg

启用插件后,在WordPress仪表盘新增了“设置>a3 Lazy Load”菜单。 出于测试目的,使用了插件的默认设置,但有一个例外,“Loading Background Colour ”选项将占位符颜色与网页背景的颜色相匹配。
启用A3后
pingdom-a3.png

启用插件后再次测速,页面加载时间不到半秒。 考虑到此网页上包含的图像和视频数量,这样的效率还是非常不错的。


4. Lazy Load

推荐的第四个插件是Lazy Load,这是知名的WP Rocket团队开发的免费插件。 该插件目前已经有4w+的激活安装,并且获得了4星评分。 如果您正在寻找一个速度很快且简单WordPress延迟加载方案,这个插件是一个很好的选择。

Lazy Load
Lazy-Load-wp-rocket.png

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


5. Lazy Load for Videos

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

Lazy Load for Videos
lazy-load-for-videos-plugin.jpg


懒加载对SEO的影响

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

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

小结和建议

那会给我们留下什么?所有这四个选项都通过延迟加载图像和视频来提高页面加载速度。选择哪个最好取决于个人偏好以及如何在将图像上传到WordPress网站之前准备图像。

  • 如果在上传前没有对图像进行任何优化 – 建议使用a3 Lazy Load,因为该插件内置图像优化功能。
  • 如果在上传前优化图像且是个懒人,那么BJ Lazy Load和Lazy Load比较适合。
  • 如果在上传前优化图像,并希望有额外的选项给到你配置CSS和JS资源发送处理,那么建议你选择Lazy Load XT。

延迟加载只是一种可用于优化WordPress网站的技术。但是,如果您使用大量图像和视频,它可能会对网站速度产生深远影响。尽管如此,一旦您实施了延迟加载,您可以考虑并实施几种其他技术来提升网站性能。关于WordPress延迟加载解决方案?或者你有更好的建议,欢迎留言交流。

Last modification:December 18th, 2019 at 03:39 pm
如果觉得我的文章对你有用,请随意赞赏