音频播放器默认采用懒加载方式。在访客滚动到播放器附近之前,不会加载其JavaScript或CSS。这能让页面的最大内容绘制(LCP)保持快速。
懒加载的作用
- 页面加载时,在播放器位置渲染一个小型占位符
- 完整播放器的JavaScript和CSS尚未加载
- 当访客滚动到距离播放器500px以内时,完整播放器加载并替换占位符
- 过渡效果视觉上流畅(通常在100毫秒以内)
为什么有助于核心网页指标
若不使用懒加载,每个包含播放器的页面在初始加载时都要承担播放器JS和CSS的开销。使用懒加载后:
- LCP:不受影响 - 播放器不在首屏内容中
- INP:不受影响 - 加载时不运行繁重的JS
- CLS:不受影响 - 占位符与最终播放器高度相同
何时关闭懒加载
懒加载默认开启。在以下情况下可以关闭:
- 播放器始终位于首屏(极少见)
- 使用自动播放并希望播放器立即就绪(非常少见)
- 需要在调试时测试无懒加载的效果
如何关闭懒加载
- 前往 文字转语音 - TTSWP → 高级设置。
- 将 懒加载播放器 切换为关闭。
- 保存。
技术原理
- 插件使用
IntersectionObserver检测播放器何时滚动进入视图 - 触发后,动态加载所需的JS和CSS
- 加载完成后,脚本在本次会话中保持浏览器缓存状态
不支持IntersectionObserver的浏览器(极旧版本)会回退到在页面加载时加载脚本。
已知边界情况
播放器位于隐藏元素内
如果播放器位于 display: none 的区块内(例如折叠的手风琴组件),懒加载不会触发,直到该区块变为可见。通常这是预期行为,隐藏的内容没有必要提前加载。
音频自动播放
如果为播放器设置了自动播放且启用了懒加载,则在访客滚动到播放器之前不会播放。播放器加载完成后自动播放立即启动。