全文约 1,128 字，读完约 3 分钟
做了一个小工具，免费分享给大家。
很多站长喜欢在侧边栏放一个”网站状态”小卡片，用来实时显示网站的运行情况。市面上这类卡片大多是摆样子的——心跳线是随机画的，指标是写死的。我自己用着不爽，就动手写了一个，所有数据都是真实测量的。
这是什么
「站点性能卡片」是一个 WordPress 侧边栏小工具，挂在侧栏上之后，访客能直接看到：
- 状态徽章：服务端生成耗时超过阈值会从”运行正常”变成”响应偏慢”并换色
- 实时心跳心电图：绿色波形，每一次心跳都真实请求一次本站（admin-ajax），测的是真往返延迟，不是随机数
- 四项核心指标：页面加载、SQL 查询次数、服务端响应时间、峰值内存
数据从哪来
每个指标都有明确来源，不是拍脑袋：
| 指标 | 来源 | 说明 |
|---|---|---|
| 页面加载 | 浏览器 Navigation Timing | 访客真实看到的加载耗时 |
| SQL 查询 | get_num_queries() | 本次请求数据库查询次数 |
| 服务端响应 | timer_stop() | WordPress 生成页面耗时 |
| 峰值内存 | memory_get_peak_usage() | 本次请求 PHP 真实峰值 |
省资源设计
做这个插件的时候，我最在意的就是”不要为了显示一个卡片把网站拖慢”。所以：
- 卡片不在视口内、或浏览器标签页切到后台时，不测量、不重绘（IntersectionObserver + Page Visibility API）
- 完全无 jQuery、无第三方依赖，CSS + JS 加起来约 12KB
- 可选”按需加载资源”，只有侧栏真的放了这个小工具时才加载 JS/CSS
- 默认手机端不显示，只在 PC 端侧栏出现，移动端不浪费流量
怎么用
方式一：侧栏小工具
- 后台上传插件 zip，启用
- 进入「外观 → 小工具」，把「站点性能（心跳 + 指标）」拖到侧栏
- 进入「设置 → 站点性能卡片」调整标题、强调色、心跳间隔、显示范围
方式二：短代码插入文章/页面
不想放侧栏，也可以直接在文章里插：
带参数：
站点性能
运行正常
常见问题
心跳会不会拖慢网站？
每次心跳只是一个极轻量请求，只返回 1 个字符，默认 3 秒一次，而且只在卡片可见时发生。介意的话可以把间隔调到 10 秒，或者直接关掉心跳波形。
手机上为什么看不到？
这是默认行为。想改的话在设置里把”显示范围”改成”都显示”或”仅手机”。
深色模式下颜色不对？
默认跟随主题（识别 .dark-mode、[data-theme=”dark”]），如果你主题写法不一样，可以在设置里自定义深色模式选择器。
许可
GPLv2，完全免费，随便用、随便改。
如果你也想在自己博客侧栏挂一个真实测速的小卡片，欢迎拿去用。有问题或者想加功能，评论区聊。
有点意思，我之前做了服务器实时监控面板：https://wp.bufanz.com/wordpress/server-monitor-2.html
我感觉你这个悬浮的，更有意思显示的也更详细😄