TTSWP 为页面添加音频,同时不损害性能。播放器采用懒加载方式,资源经过优化,除非必要,页面加载时不运行任何代码。以下是我们保护核心网页指标的具体方式。
核心网页指标影响
LCP(最大内容绘制)
影响:无
音频播放器采用懒加载。在访客滚动到播放器附近之前,不会渲染或加载 JavaScript。LCP 衡量折叠线以上主要内容的渲染时间,完全不受影响。
测试方式:分别在启用和禁用插件前后运行 Lighthouse 审计。LCP 评分保持在正常波动范围内。
CLS(累计布局偏移)
影响:零
播放器占位符与完全加载后的播放器尺寸完全相同。懒加载触发从占位符升级为完整播放器时,不会发生任何布局偏移。
INP(下次绘制交互时间)
影响:可忽略不计
播放器的 JavaScript 仅包含一个小文件(压缩后约 15 KB)。点击处理程序经过防抖处理,并在支持的环境下通过 requestIdleCallback 运行。典型 INP 贡献:每次交互低于 5 毫秒。
FID(首次输入延迟,已于 2024 年被 INP 取代)
影响:零
由于播放器采用懒加载,初始页面加载时不会阻塞主线程。
资源大小
播放器使用时每次页面加载的开销:
| 资源 | 大小(压缩后) | 加载时机 |
|---|---|---|
| 公共播放器 CSS | 3 KB | 播放器可见时 |
| 公共播放器 JS | 15 KB | 播放器可见时 |
| 波形辅助(专业版) | 4 KB | 启用波形时 |
| 悬浮底栏 JS(专业版) | 2 KB | 启用悬浮栏时 |
| 管理栏菜单图标 | 0.5 KB | 仅对管理员用户 |
访客首次加载影响:在滚动到播放器之前为 0 字节。
缓存插件兼容性
TTSWP 与所有主流缓存插件兼容,包括 WP Rocket、LiteSpeed、W3 Total Cache、WP Super Cache 和 Cache Enabler。插件会自动注册其资源以确保正确的缓存行为。
音频文件(MP3)拥有独立的缓存头,按需从存储加载,不会占用页面缓存。
参见缓存插件。
CDN 分发
在付费计划中,音频文件通过 Amazon CloudFront 分发。这意味着:
- 即使访客距离您的服务器较远,点击播放后音频也能在毫秒内开始播放
- 您的 WordPress 服务器带宽可专用于 HTML 内容
在免费计划中,音频来自您的 WordPress 服务器。对于大多数博客来说这已足够。高流量网站在音频密集页面上可能会注意到带宽占用。
数据库影响
TTSWP 添加少量数据库表和行:
- 音频缓存表(每个生成文件一行)
- 统计表(每次播放事件一行,为小整数数据)
- 设置行(约数十个选项)
数据库大小随带音频的文章数量线性增长。对于拥有 500 篇文章的网站,数据库总占用空间通常低于 200 KB。
内存与 CPU
- 每次管理页面加载的 PHP 内存开销:约 2 MB
- 带播放器的公共页面每次加载的 PHP 内存开销:可忽略不计(仅 CSS + JS,热路径无 PHP 处理)
- 后台进程:无(不存在每次请求都运行的定时任务)
测试您的网站
使用以下工具验证 TTSWP 不会影响您的性能:
- PageSpeed Insights - Google 官方核心网页指标测试
- WebPageTest - 详细的瀑布图分析
- GTmetrix - 性能评分与优化建议
分别在启用和临时禁用 TTSWP 的情况下各运行一次,然后对比数据。
如果您发现性能下降
请告知我们。我们将性能退步视为缺陷处理:
- 记录哪个页面变慢
- 运行 PageSpeed Insights 并分享该 URL
- 联系专业版支持或在 WordPress.org 论坛发帖
我们将帮助您诊断并解决问题。