懒加载播放器

2 min read

音频播放器默认采用懒加载方式。在访客滚动到播放器附近之前,不会加载其JavaScript或CSS。这能让页面的最大内容绘制(LCP)保持快速。

懒加载的作用

  • 页面加载时,在播放器位置渲染一个小型占位符
  • 完整播放器的JavaScript和CSS尚未加载
  • 当访客滚动到距离播放器500px以内时,完整播放器加载并替换占位符
  • 过渡效果视觉上流畅(通常在100毫秒以内)

为什么有助于核心网页指标

若不使用懒加载,每个包含播放器的页面在初始加载时都要承担播放器JS和CSS的开销。使用懒加载后:

  • LCP:不受影响 - 播放器不在首屏内容中
  • INP:不受影响 - 加载时不运行繁重的JS
  • CLS:不受影响 - 占位符与最终播放器高度相同

何时关闭懒加载

懒加载默认开启。在以下情况下可以关闭:

  • 播放器始终位于首屏(极少见)
  • 使用自动播放并希望播放器立即就绪(非常少见)
  • 需要在调试时测试无懒加载的效果

如何关闭懒加载

  1. 前往 文字转语音 - TTSWP → 高级设置
  2. 懒加载播放器 切换为关闭。
  3. 保存。

技术原理

  • 插件使用 IntersectionObserver 检测播放器何时滚动进入视图
  • 触发后,动态加载所需的JS和CSS
  • 加载完成后,脚本在本次会话中保持浏览器缓存状态

不支持IntersectionObserver的浏览器(极旧版本)会回退到在页面加载时加载脚本。

已知边界情况

播放器位于隐藏元素内

如果播放器位于 display: none 的区块内(例如折叠的手风琴组件),懒加载不会触发,直到该区块变为可见。通常这是预期行为,隐藏的内容没有必要提前加载。

音频自动播放

如果为播放器设置了自动播放且启用了懒加载,则在访客滚动到播放器之前不会播放。播放器加载完成后自动播放立即启动。

相关页面