有许多不同的方法可以在网站上实现懒加载。欢迎查看我们列出的支持慢加载的 WordPress 顶级插件列表。
WordPress 目录中有许多免费插件,可用于懒加载图片和视频。在考虑了几十个插件并测试了几个之后,我们发现有两个插件可以显著提高网站性能。如果你热衷于实施懒加载,请考虑以下选项。
目录
切换使用 WP Rocket(高级版)
WP Rocket 是在网站上实现慢加载的最直接方法。 而且,启用过程不到一分钟。LazyLoad 是 WP Rocket 中作为懒图像加载版本的插件名称。
开启 LazyLoad 后,WP Rocket 会立即停止 WordPress 本机图片的懒加载,以防止出现任何可能的问题。
按照以下步骤启用 WP Rocket 的 LazyLoad 功能:-
- 您可以通过导航至 WordPress 安装中的 "设置">"WP Rocket">"媒体面板 "来激活 LazyLoad。
- 点击屏幕上方 LazyLoad 区域下的 "启用图片"。
- 选择后点击 "保存更改"。
这就是必须完成的其他一切工作。因此,访问者会感到照片加载缓慢。
与 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 类:
默认设置启用了所有选项。我们强烈建议您保留这一设置。创建一个 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 上找到。