跳过到主内容
< 返回
当前位置:
打印

图片懒加载

目录

图片懒加载可以通过延迟加载支持的图片和视频海报,直到它们接近视口,从而改善初始页面加载速度。WoodMart 还为 Gutenberg 区块中的背景图片懒加载提供了单独的选项。

配置图片懒加载

导航至 仪表盘 → 主题设置 → 性能 → 懒加载

懒加载设置

可用选项

图片懒加载

为支持的 WordPress、WooCommerce、主题和页面构建器图片启用 WoodMart 懒加载。当图片接近视口时,才会加载原始图片。

背景图片懒加载

延迟加载 Gutenberg 区块中使用的背景和叠加图片,直到区块接近视口。此选项可以独立于常规图片的懒加载进行启用。

偏移量

决定图片在进入视口前多久开始加载。可用范围为 0–1000 像素:

  • 0 像素 — 当项目到达视口时开始加载。
  • 更高的值 — 加载开始得更早,这可以使图片在滚动过程中显示得更平滑,但可能会在需要之前下载更多图片。

出现效果

控制懒加载图片加载后如何出现。选择 立即显示,或选择 淡入 应用淡入过渡效果。

上传自定义占位图片

使用自定义图片替换 WoodMart 的默认占位图,该图片在原始图片加载前显示。请使用与您网站视觉风格相匹配的轻量级图片。

禁用 WordPress 原生懒加载

移除 WordPress 添加的原生 loading="lazy" 属性。这是一个高级兼容性选项。除非您的优化配置特别要求关闭 WordPress 原生懒加载,否则请保持禁用状态。

最佳实践

  • 仅使用一个主要的懒加载系统。如果优化插件或 CDN 已经处理了懒加载,请保持相应的 WoodMart 选项为禁用状态。
  • 不要对首屏上方的主要图片或被视为最大内容绘制(LCP)元素的图片进行懒加载。详情请参阅 预加载 LCP 图片选项指南