适用于WordPres的最佳延迟加载插件

图像,信息图表和奇特效果都是在网站上推广任何类型内容的出色辅助工具。他们是吸引注意力的工具,可以在一帧中传达内容的实质。难怪我们依靠图像来吸引读者的眼球并增强用户在互联网上的参与度.


另一方面,图像通常需要一些时间才能加载到网页上。而且,如果您的连接速度较慢,则似乎需要永久加载。对于用户而言,这可能是一个很大的选择,他们可能会离开页面.

免责声明: WPExplorer是以下一个或多个产品的会员。如果您点击链接并完成购买,我们可以收取佣金.

我们如何使较重的页面加载速度更快?

为什么图像需要花费时间才能加载?好吧,我们可以这样解释-网页由许多元素组成-文字,图像,媒体,脚本等等。要加载每个元素,您的浏览器会向网站发出一个请求(称为HTTP请求)。许多元素,尤其是图像,都是字节繁重的,需要花费一些时间来加载。通常,所有元素都会尝试同时加载,这会延迟整个网页的加载.

合理的做法是使快速加载的内容首先出现在浏览器中,并引起观众的注意。同时,延迟加载数据繁重的图像。这种方法可能会说服用户等待,因为屏幕上有东西可以吸引他们的注意力.

什么是延迟加载?

我们可以使用延迟加载技术延迟图像-首先仅加载文本或所选内容,然后允许图像或缓慢加载的元素滞后。图像的加载是交错的,因此可以缩短网页的第一个字节的时间。当用户向下滚动时,一次获取一个图像。因此,减少了同时到达服务器的HTTP请求的数量.

图像放置在占位符中,以便以后加载。当图像到达查看区域时,将从服务器获取图像。当它们移动到“折叠上方”区域时,它们会出现在屏幕上。在无限滚动的情况下,当用户点击屏幕底部时,使用ajax加载更多内容.

延迟加载如何提供帮助

延迟加载减少了加载时间。更快的网站有利于用户体验和搜索引擎。通过仅在真正需要时加载图像,它还减少了服务器带宽。这样可以节省服务器端和用户端的带宽。您可以将延迟加载应用于选定的页面或整个站点.

延迟加载的一个缺点是,折叠后出现的内容可能不会被搜索引擎找到. 搜索引擎可能无法识别无限滚动内容. 为了至少部分地克服此缺陷,我们需要构造URL,以便搜索引擎可以处理它们。这可以使占位符对搜索引擎更可见,直到图像加载为止.

有许多插件可以延迟加载以在WordPress网站上工作。让我们看一些流行的插件,

BJ懒加载

要使用占位符替换您的全部或任何帖子图像,缩略图,图形图像和内容iframe,请使用 BJ懒加载. 它也可以替代iframe,这意味着您可以从YouTube和Vimeo延迟加载嵌入式视频。也适用于文本小部件。使用简单的滤镜,可以延迟主题中的图像和iframe.

懒惰的负载

要使该插件在您的网站上正常运行,只需下载,安装并激活即可。然后,您可以访问设置并确定加载时应延迟哪些元素。如果需要,添加自己的占位符图像.

该插件使用JavaScript。结果,没有JavaScript的访问者将看到原始元素,而没有任何延迟加载.

延迟加载

一个向WordPress网站添加延迟加载的常用插件, 延迟加载 是一个简单的安装和激活插件。您可以放心地尝试它,因为它是使用Automattic的WordPress.com VIP团队,TechCrunch 2011重新设计团队和Jake Goldman(10up LLC)的代码混合开发的。.

延迟加载

另外,激活后无需执行任何其他操作。但是,如果您要进行一些更改,可以通过编辑php文件来进行。作者提供了一些有用的代码段,您可以参考这些代码段来更改占位符图像,在主题中延迟加载图像或通过输出缓冲延迟加载所有图像。.

Ajax加载更多–无限滚动

Ajax加载更多 易于延迟加载通过向下滚动查看的长网页。使用它来延迟加载帖子,自定义帖子类型,单个帖子,页面和评论.

Ajax加载更多

此外,您可以使用Shortcode Builder构架自定义WordPress查询。将生成的简码添加到通过内容编辑器选择的页面上,或直接添加到模板文件中。从前端查看页面并检查Ajax Load More,即使您向下滚动也可以加载内容.

此外,Ajax Load More可与WooCommerce和Easy Digital Downloads配合使用,因此适用于较长的产品页面.

视频的延迟加载

如果您经营的网站上嵌入了许多视频,那么这个视频适合您. 视频的延迟加载 用可点击的图片替换您的嵌入式视频。访客调用该页面后,该网页不会立即加载视频。仅在单击图像时才加载视频.

视频的延迟加载

该插件检查嵌入的视频,并用静态图像和播放按钮替换所有外部文件。仅在访客单击按钮时加载视频。这可能会对页面加载速度产生真正的影响,尤其是其中有很多视频时。对于用户而言,这是一种流畅的体验.

a3延迟加载

随着越来越多的网站在手持设备上浏览网站,它们也需要针对移动体验进行优化. a3延迟加载 旨在通过延迟选定页面元素的加载来提高手机上的网站速度。可以在管理员设置中选择元素.

a3延迟负载

该插件支持对放置在内容或窗口小部件中任意位置的iframe中的内容的支持。可以选择WordPress嵌入式媒体,Facebook带有个人资料的“喜欢”框,“喜欢”按钮,“推荐”按钮,“ Google+个人资料”,“ Google地图”和其他类似媒体内容,以进行延迟加载.

此外,加速移动页面(AMP)不会发生冲突-延迟加载不会应用于 / amp 端点。仅当浏览器显示一个URL而没有 / amp 懒惰的负担开始起作用.

WP YouTube Lyte

如果您的网站在YouTube上吸引了很多人, WP YouTube Lyte 可以使您受益匪浅。它会插入“ Lite YouTube Embeds”,看起来类似于YouTube embed。但是只有在点击时才需要视频.

wp-youtube-lyte

为了使该插件在您的网站上正常工作,必须以新申请人的身份向YouTube注册。该插件使用每个视频的YouTube API从YouTube存储库中获取视频。要在您的网站上使用该API,必须启用YouTube提供给您的API密钥。您需要填写从YouTube收到的服务器密钥.

启用YouTube API密钥后,调整设置以使播放器的尺寸和位置符合您的喜好.

带加载屏幕的加载页面

带加载屏幕的加载页面, 用户可以了解页面加载之前的等待时间。该插件显示一个屏幕,显示加载进度(占完成百分比).

带加载屏幕的加载页面

选择仅在主页或所有页面上显示进度。对于免费版本,仅显示进度条。有关更多选项,您需要升级到 高级版. 此外,高级版本将延迟加载应用于图像.

其他一些插件,

  • “加载更多”在较长的产品页面中是一项有用的功能。这些通常可以在WooCommerce网站上找到. WooCommerce无限滚动和Ajax分页 将默认产品分页转换为无限滚动或Ajax分页。对于用户而言,这意味着他们不必重复单击“下一页”。当用户到达页面底部时,将自动检索并加载下一组产品。移动设备可使用不同的分页选项.
  •  为WooCommerce加载更多产品 可以添加以使用具有无限滚动功能的Ajax或“加载更多”按钮从下一页加载更多产品。用于动画效果和自定义, 专业版 可用.
  • 图片懒惰和幻灯片 –使用此插件,您可以选择向任何图像添加灯箱效果或自定义画廊效果,以及延迟加载。它带有3种效果,您也可以添加自己的效果.
  • 火箭懒加载 –非常轻(小于2kb)。它将少量Javascript注入您网站的标题中,该标题可用于缩略图,帖子中的所有图像,小部件文本或头像中。它在不使用任何JavaScript库(例如jQuery)的情况下延迟了整个网站的图片.
  • 疯狂的懒惰 –轻巧,易于安装和使用,并且无需设置即可完成相同的工作。只需将属性添加到图像即可排除任何图像.
  • 延迟加载XT –是一个快速插件,适用于图像,帧,YouTube视频和Vimeo。它是完全可定制的.

许多滑块喜欢 皇家滑子 和 WP电动旋转木马 还结合了惰性加载原理来加载图像. 活动预订专业版 支持延迟加载日历.

结论

延迟加载是提高网站速度的有效方法,尤其是在播放大量图像和视频的网站上。还有许多其他方法,例如图像优化和缓存,也可以帮助提高站点速度。选择最适合您的网站的插件并优化性能以使其为用户带来更好的体验.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map