向WordPress网站添加延迟加载是加速网站的有效工具。草根SEO已经撰写了大量文章(我们甚至做了一个案例研究),关于页面加载速度的慢速如何对转换,搜索引擎优化和其他在线成功标记产生负面影响,对于SEO而言,网站加载速度越快越好。

减慢站点速度的两个最重要的因素是HTTP请求和页面负载。当然,浏览器发送到服务器的请求越多,处理站点所需的时间就越长。同时,页面越大(例如,它包含许多图像),加载所需的时间就越长。

延迟加载是一种解决这两个因素的技术。这意味着延迟网页某些部分的负载,直到实际需要它们为止。这也是这篇博文的主题。在下文中,您将了解延迟加载的工作原理,优缺点以及向WordPress添加延迟加载的方法。

什么是延迟加载以及您可以使用它?

如前所述,延迟加载是一种阻止浏览器最初加载网页部分(通常是图像)并用占位符替换它们的方法。这样,页面变得更小,需要将更少的数据从服务器传输到浏览器。

结果:更快的加载网站和更快乐的用户。

但是等等,你不需要你网站的那些部分吗?如果你没有,他们就不会在那里,对吧?它不会弄乱页面吗?

好吧,这里是惰性延迟负荷发挥作用的地方,该技术并不是简单地禁止浏览器加载资源和图像,而只是将其延迟直到实际需要它们为止。

例如,图像不需要在页面上,直到访问者向下滚动到足以实际看到它为止。因此,浏览器实际上并不需要在它发生之前加载它,这正是延迟加载的作用。

(顺便说一句,还有其他方法可以优化您网站上的图像,使其加载速度更快。)

延迟加载用例

在网络上,延迟加载最常用于图像。你可能已经在某些图库网站上看到了它,他们使用这种技术让他们的列表在用户的浏览器中显得更快。

但是,这并不是延迟加载能够延迟的唯一因素。其他示例包括视频,脚本和评论。实际上,将JavaScript文件移动到页面的页脚是加快页面加载时间的常用技术。

您可能还会注意到,只有向下滚动时,YouTube才会加载评论。这样,该平台可确保您更快地观看视频。

还有一个称为无限滚动的延迟加载的特殊应用。它是经典分页的替代方案,只要用户到达页面底部,就会加载其他帖子。您可以在Pinterest上看到它,或者如果您是Pocket的用户。

它消除了大量点击,非常适合用户体验。然而,无限滚动并非没有争议,也不会成为本文的重点。

延迟加载的优点

延迟加载的主要优点已经很明显:加载时间更快,当你可以削减一大部分页面重量时,它自然会更快地出现在浏览器中。

一个很好的副作用是为访问者节省相当大的带宽。特别是那些在移动设备上使用数据连接的人将会感激不尽。除了更快地看到您的网站,他们也不必将图像浪费在他们可能从未见过的图像上。

在您的站点上使用延迟加载的缺点

然而,使用延迟加载并不是所有的阳光和彩虹,该技术也有一些缺点。

首先,它并不总是对搜索引擎友好。当您延迟为访问者加载资源时,您对搜索引擎蜘蛛执行相同的操作。因此,他们可能不会为您的某些内容编制索引,当然,这对SEO来说并不是很好。即使存在变通办法。当然,对于帖子使用延迟加载而不仅仅是图像时,这是一个更大的问题(这就是为什么许多人远离它)。

第二个问题是用户体验。当您非常快速地向下滚动网站时,用实际视觉效果替换占位符图像会使页面内容跳转,这可能很烦人。

那么,关于延迟加载的判断是什么?简而言之:在限制范围内使用该技术可以使您的WordPress网站加载速度更快,但是,您需要留意SEO和用户体验。

如何通过插件向WordPress添加延迟加载

虽然可以手动为WordPress添加延迟加载,但更容易的选择是使用下面的插件之一。这里列出的许多优惠都是简单的“即忘即忘”解决方案,您只需在没有任何配置的情况下激活它们。他们中的大多数也非常轻巧。

出于这个原因,在没有插件的情况下向WordPress添加延迟加载对我来说似乎是不必要的努力(除非你这样做以改善你的技术印章,这是正当理由)。对于大多数用户来说,最好选择WordPress球体提供的众多延迟加载插件之一。

Lazy Load

我们的第一个候选人是最流行的免费解决方案,用于延迟加载图像。它拥有超过90,000个安装和稳定的四星级评级。它的受欢迎程度可能部分解释了Automattic团队是其贡献者的事实。

Lazy Load插件使用jQuery.sonar仅在视图出现在视口中时才加载图像(这是您在设备上看到的网站的一部分)。解压缩的插件只有20KB大,您需要做的就是安装并激活它。无需配置。

BJ Lazy Load

最好的延迟加载WordPress插件的王座的亚军是BJ Lazy Load。它拥有超过60,000个安装和类似的良好评级。

该插件会使用占位符替换内容中的所有图片和iframe(包括YouTube和Vimeo视频),直至查看完毕。安装,激活,你很高兴。

Lazy Load by WP Rocket

在这里,我们有一个与流行的缓存插件WP Rocket相同的插件。它可以延迟加载图像和/或iframe,包括缩略图,小部件内容,头像和表情符号。更重要的是,该插件不使用任何JavaScript库。这可能是它重量不到10KB的原因之一。

超过10,000个网站信任WP Rocket的Lazy Load,因此它似乎正在正常工作。WordPress目录中的插件站点还包含用于选择性地停用页面或图像上的延迟加载或更改其加载阈值的代码。否则,没有可用的配置选项。

a3 Lazy Load

a3 Lazy Load声称是“功能最全面,非常容易设置WordPress的延迟加载插件。”它也是这个列表中为数不多的几个实际上带有一些设置的条目之一。

该插件适用于在帖子,页面,小部件,缩略图和/或头像中延迟加载图像,视频和iframe。它也适用于后嵌入并且兼容WooCommerce。

a3 Lazy Load甚至可以提供网站上出现的效果图像。好像这还不够,它还允许您选择是在页眉或页脚中加载其脚本(延迟加载自身的延迟加载插件,如何元)以及忽略图像或视频。

上面,我们已经讨论了延迟加载如何工作以及您可以使用它的方式。除了图像的主要应用程序,您还可以将其应用于视频,脚本,评论甚至帖子和页面。

虽然你需要注意SEO,如果以正确的方式使用,延迟加载仍然是使你的WordPress网站更快的好选择。如果你想尝试一下,这个列表中的一个插件肯定能满足你的需求。