如何充分利用 WordPress 中 WP Rocket 的延迟加载

几乎每个网站都使用图像,因为它们非常善于吸引访问者的注意力。 但是,它们也会大大降低您的网站速度,尤其是当图像文件很大时。 使用延迟加载技术可以帮助加速您的网站。

这种技术只会在访问者看到它时在页面上加载图像。 因此,页面的整体加载速度要快得多。 这对于有照片库的网站尤其重要。

今天,我将演示如何使用延迟加载插件来做到这一点。

延迟加载可以为您的网站做什么?

延迟加载是一种强大的技术,可供开发人员使用,它的影响可能超出您的想象。

首先,让我们从显而易见的图像开始。 实际上,这项技术是专门为他们开发的,而且效果惊人。 改善您网站的加载时间不仅可以改善用户体验,还可以改善您网站的 SEO。

毕竟,速度是谷歌和其他搜索引擎用于排名的公认因素。

虽然图像仍然非常流行,但视频内容已成为互联网上最令人向往的内容。 您现在甚至可以延迟加载视频。 事实上,这个插件会专门用预览缩略图替换 YouTube iframe。

并非每个访问者都会点击视频,因此没有理由让它减慢您的页面速度。

笔记: 这不应影响设置为在加载页面时自动播放的视频。

如何将延迟加载添加到 WordPress

第 1 步:安装延迟加载

延迟加载 WP Rocket 的插件设置起来非常简单,并且有超过 100,000 次活动安装。 该插件允许您在图像和视频上使用延迟加载。 您还可以选择禁用对特定内容的延迟加载。 这非常适合您希望访问者看到的东西。

让我们首先单击插件并选择左侧管理面板上的添加新选项。

添加插件

在可用的搜索框中搜索延迟加载。 这将提取您可能会发现有用的其他插件。

延迟加载

向下滚动直到找到延迟加载插件,然后单击“立即安装”按钮并激活插件以供使用。 它是由 WP Rocket 创建的。

现在安装

笔记: 值得一提的是,如果您当前使用 Jetpack,您将在其中看到启用延迟加载模块的选项。 这是另一个值得考虑的好选择,特别是如果您已经安装了 Jetpack。

第 2 步:启用延迟加载

现在我说,这个插件使用简单,我没有撒谎。 实际上,它由三个复选框组成,您可以使用它们在不同类型的内容上打开和关闭该功能。

在左侧管理面板上,单击设置并选择 LazyLoad 选项。

延迟加载

可以与三个复选框进行交互,以启用图像、iframe 和视频的延迟加载,以及用缩略图替换 YouTube 视频的能力。

如果您选中图像或 iframe 框,这将减少页面在加载时发出的 HTTP 请求数。 因此,它的加载速度要快得多。

延迟加载缩略图替换选项完全符合听起来的样子。 这会对包含视频内容的页面产生巨大影响。 这对于移动用户来说尤其重要。 智能手机已经走了很长一段路,但与台式机相比仍然相形见绌。

因此,在一个页面上加载多个视频可以为移动用户增加几秒钟的时间,尤其是在旧硬件上。 请记住,如果视频是页面的主要功能,则此选项不是很好。

勾选您认为合适的复选框。

复选框

您还将看到此插件的高级版本 WP Rocket 的广告。 这个高级插件专注于最大限度地提高您网站的速度,而不仅仅是为图像和视频添加延迟加载。 对于希望加快网站速度的任何开发人员来说,它都是一个不错的选择。

单击“保存更改”按钮。

保存更改

然后,您可以开始查看您的页面加载速度有多快。 确保在图像和视频内容上进行测试以查看结果。

第 3 步:禁用延迟加载

上一步中可用的选项是全局选项,这意味着它们会影响您网站上的所有内容。 实际上,您可能只想排除几个页面来实现此功能。

在某些情况下,您可能只想排除单个图像。 但是,该插件至少在本机上没有此功能。 相反,插件页面确实提供了实现这些结果所需的代码。

笔记: 由于您将不得不编辑您网站的代码,我强烈建议您备份您的网站。 这将确保如果出现问题,您可以恢复您的网站并避免任何停机时间。 也就是说,没有什么是很难的。

要关闭特定页面上的延迟加载,请将以下代码添加到您的函数文件中:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]

add_action(‘wp’, ‘deactivate_rocket_lazyload_on_single’);

功能 deactivate_rocket_lazyload_on_single() {

如果 ( is_single() ) {

add_filter(‘do_rocket_lazyload’, ‘__return_false’);

}

}

[/ht_message]

如果您有兴趣在某些图像上禁用插件,可以将以下属性添加到您的 img 或 iframe 标签:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]数据不懒惰=“1”[/ht_message]

禁用此功能的唯一其他方法是取消选中该框。 希望将来会添加更多禁用选项以帮助初学者。

恭喜您在 WordPress 中设置了延迟加载插件。

优化您的图像和视频

利用延迟加载是提高网站性能的好方法,但它不能替代优化图像。 事实上,即使你确实使用它,优化你的图像仍然会提高页面性能和用户体验。

毕竟,这些图像需要在某个时候加载。

这不仅会影响您的网站性能,还可以节省服务器空间。 典型的图像总共应该只有几个 kb。 只有非常大的图像才应该超过这个数量。 对于拥有数千张图片的网站,这是必不可少的。

在某些情况下,网站所有者可能会为额外的服务器空间支付数百美元,因为他们没有优化图像。

这些技巧也适用于视频,甚至可能更适用。 视频是巨大的文件,特别是如果您选择在自己的网站上实际托管视频。 绝不建议这样做,而是始终将其上传到 YouTube 并将其嵌入您的网站以获得最佳加载时间。

请记住,YouTube 上确实存在私人视频,并且是会员网站的绝佳选择。

让您的网站快速

毫无疑问,快速网站对用户体验和排名都有好处。 没有理由不满足于快速和精简的网站。 但是,图像和视频内容可能会大大减慢帖子和页面的速度,但这可以得到缓解。

也就是说,它们远非唯一会影响网站速度的因素。 例如,您知道插件会减慢您的网站速度吗? 这就是为什么许多开发人员尽可能避免添加新插件的原因。

因此,本教程可能只是实现最快结果的第一步。

您是否选择在任何页面上禁用延迟加载插件? 您的页面加载速度有多快?

  如何将 Tidio 实时聊天添加到 WordPress 以提高访客参与度

类似文章