性能与核心网页指标

4 min read

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 不会影响您的性能:

分别在启用和临时禁用 TTSWP 的情况下各运行一次,然后对比数据。

如果您发现性能下降

请告知我们。我们将性能退步视为缺陷处理:

  1. 记录哪个页面变慢
  2. 运行 PageSpeed Insights 并分享该 URL
  3. 联系专业版支持或在 WordPress.org 论坛发帖

我们将帮助您诊断并解决问题。

相关页面