由 Awesome Motive 提供支持。
了解更多 海鹰博客。

如何在 WordPress 中懒散加载图片和视频?

如何在 WordPress 中进行懒加载

有许多不同的方法可以在网站上实现懒加载。欢迎查看我们列出的支持慢加载的 WordPress 顶级插件列表。

WordPress 目录中有许多免费插件,可用于懒加载图片和视频。在考虑了几十个插件并测试了几个之后,我们发现有两个插件可以显著提高网站性能。如果你热衷于实施懒加载,请考虑以下选项。

使用 WP Rocket(高级版)

WP Rocket 是在网站上实现慢加载的最直接方法。 而且,启用过程不到一分钟。LazyLoad 是 WP Rocket 中作为懒图像加载版本的插件名称。

开启 LazyLoad 后,WP Rocket 会立即停止 WordPress 本机图片的懒加载,以防止出现任何可能的问题。

按照以下步骤启用 WP Rocket 的 LazyLoad 功能:-

  • 您可以通过导航至 WordPress 安装中的 "设置">"WP Rocket">"媒体面板 "来激活 LazyLoad。 
  • 点击屏幕上方 LazyLoad 区域下的 "启用图片"。
  • 选择后点击 "保存更改"。 
WP rocket 的懒加载设置

这就是必须完成的其他一切工作。因此,访问者会感到照片加载缓慢。

与 WordPress 提供的本机方法不同,LazyLoad 为附加 HTML 元素(如iframe和视频)提供了懒加载功能。此外,如果背景图片是内联应用于特定的 HTML 组件,它也会使用懒加载。

如果您希望使用 WordPress 本机的图片懒加载功能,可以停用 WP Rocket 中的 LazyLoad 选项。另一方面,并非所有浏览器都支持新的加载属性。此外,WordPress 的安装只专注于照片。因此,WP Rocket 的 LazyLoad 仍然是更好的选择,尤其是当您的网站有许多图片、视频和嵌入内容时。

激活 WP Rocket 本地懒加载时的注意事项

尽管 WP Rocket 并不自动兼容使用本地懒加载的 Chrome 浏览器,但您仍然可以选择通过辅助插件启用对 Chrome 浏览器本地懒加载的支持。同样,即使 WP Rocket 不自动兼容其他使用本地懒加载的浏览器,情况也是如此。

使用这个有用的插件,您可以确保以下事项:

  • 您的每张照片都将包含使用本地懒加载的基本 HTML 语法;与 Chrome 浏览器兼容的浏览器将自动使用本地懒加载;所有其他浏览器将自动使用 WP Rocket 的 LazyLoad。
  • 您可以选择继续使用我们强大的 LazyLoad 技术,或者切换到 Chrome 浏览器内置的懒加载功能。

一切都取决于您!首先,在您的地点对两种方法进行试验,然后选择最适合您的一种。

使用 a3 Lazy Load(免费)

如果您正在寻找一个免费选项,我们建议您使用 a3LazyLoad插件。您可以使用 a3 插件禁用特定图片和页面的懒加载功能。此外,它还允许在网站上延迟加载视频: 

此外,该插件还可以帮助懒加载外部图片和视频。WordPress 的核心功能不会执行此类操作。

您可以在 WordPress 仪表板上安装并激活该插件。现在,您可以自定义工具的设置。

第 2 步:调整插件图像设置

进入设置 > a3 Lazy Load 下一步。在 Lazy Load Activation 下,插件在安装后默认已激活。

现在,打开 LazyLoad 图像选项卡。你可以:(1) 选择要延迟加载的网站图片;(2) 为拒绝接受 JavaScript 的网络浏览器提供后备方案。对于不想延迟加载的图片,你可以 (3) 设置一个 CSS 类:

在 a3 lazy load 插件中配置懒加载哪些图像

默认设置启用了所有选项。我们强烈建议您保留这一设置。创建一个 CSS 类,以便跳过特定图片的延迟加载。

第 3 步:调整插件视频设置

懒加载视频和 iframe 标签是下一步。有了 a3 Lazy Load,你就可以像处理图片一样,为特定片段选择延迟加载。

该插件允许在(1)内容和部件中使用视频,并为(2)不支持 JavaScript 的浏览器提供了回退功能:

配置懒加载视频设置

您可以在视频设置 (3) 中指定一个 CSS 类,将特定视频排除在延迟加载之外。如果您想要更直接的配置,请使用您在图像部分选择的相同类别。

更多 WordPress 的懒加载插件

除了 WP rocket 和 a3 Lazy Load 外,还有几款实用的懒加载插件可供您考虑:

  • 懒加载视频
  • BJ 懒惰加载
  • 为 WooCommerce 载入更多产品
  • WordPress 无限滚动 - Ajax 加载 更多内容
  • Disqus 条件加载
  • 评论懒加载

最终想法 

无论何时更新或修改网站,都必须注意任何潜在的冲突。如果发现允许懒加载已导致网站的任何方面无法运行,请查看与懒加载相关的常见问题列表。

由于懒加载功能不适用于 Revolution Slider 和 Envira Gallery 等插件上传的图片,因此可能会出现不兼容问题。兼容插件的完整列表可在此处找到。

这篇文章以及其他许多文章可在Seahawk Media Blog 上找到。

使用 WordPress 的网站需要可靠的支持,以防止网站中断并保持客户满意度。无论是

联属营销是一种以业绩为导向的战略,它允许联属会员通过代言产品赚取佣金

在谈论成为 WordPress 开发人员之前,首先让我们简单了解一下 WordPress 是什么。

科马尔-博特拉 2024 年 4 月 23 日

Google 缓存页面已删除?查看 Google 缓存:最佳替代方案

大家都知道,谷歌会通过爬虫机器人分析网页并扫描内容。但是

技术
科马尔-博特拉 2024 年 4 月 22 日

如何建立成功的白标合作伙伴关系?

白标合作已成为公司扩展其产品的一种战略方式。

机构
科马尔-博特拉 2024 年 4 月 22 日

Webflow 与 WordPress - 2024 年哪个平台适合您的业务?

Webflow 和 WordPress 是两种截然不同的网站建设工具,可满足不同用户的需求。WordPress

比较

开始使用海鹰

在我们的应用程序中注册,查看我们的定价并获得折扣。