EP07. “用 PageSpeed Insights API 监控网站性能”
🔒 登录后可标记已读这篇笔记讲怎么用 Google 免费提供的 PageSpeed Insights API，把网站性能测试自动化、记录下来、长期追踪变化，而不是每次都手动打开 Lighthouse 跑一次。适合想长期监控网站速度、或想给客户/管理层做性能报告的站长和开发者。跟 LiteSpeed Cache 插件本身没有直接关系，是一个通用的测速/监控方法，两者可以搭配使用——用这篇的方法验证 LiteSpeed Cache 设置改动后的实际效果。
重点内容
先认识 Lighthouse
打开要检查的页面，按 Ctrl/Cmd + Shift + I 打开开发者工具，切换到 Lighthouse 标签，点 Analyse Page Load 就能看到检测结果，可以往下看每一项的百分比找出具体问题。
[截图：Chrome 开发者工具 Lighthouse 标签的检测结果页面，显示 Performance/Accessibility 等分类分数]
⚠️ Lighthouse 的局限：
- 每个页面都要手动跑一次
- 不容易长期记录、比较各项指标随时间的变化
- 数据量大，容易看漏
- 技术细节是给开发者看的，对只想快速了解进展的客户/管理层来说信息量太大
- 结果会受本地设备和网速影响，可能导致错误判断
什么是 PageSpeed Insights API
Google 提供免费的 PageSpeed Insights REST API，用 JSON 格式返回数据，包含所有 Lighthouse 指标以及更多信息。能让你自动跑测试、存储结果、比较一段时间内的变化、只显示自己需要的信息。
📌 这个 API 模拟的是 Google 怎么看你的网站，结果有参考价值，但不完全等同于真实用户体验——如果想监控所有用户在不同设备/网络下的真实性能，浏览器性能 API 会是更好的选择。
快速上手
复制以下网址到浏览器，把 URL 换成自己要测的页面：
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/
💡 建议用火狐浏览器测试，因为它内建 JSON 浏览器（Chrome 需要装扩展才有同样功能）。
可以用查询字符串参数自定义结果，用 & 符号连接多个参数：
| 参数 | 作用 | 例子 |
|---|---|---|
url | 唯一必填参数，要测试的网址 | url=https://mysite.com/page1 |
strategy | 桌面或移动测试（默认桌面） | strategy=mobile |
category | 只跑指定类别（不填的话只跑性能） | category=performance、category=accessibility、category=best-practices、category=seo、category=pwa |
locale | 指定语言 | locale=fr-FR |
utm_campaign / utm_source | 配合 Google Analytics 活动追踪 | — |
key | 谷歌 API 密钥，短期内高频请求需要注册 | key=<api-key> |
例如同时测移动版的性能和无障碍指标：
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility
不确定怎么拼网址的话，也可以用 Google PageSpeed API URL 构建工具辅助生成。
JSON 结果怎么看
测试通常会返回约 600KB 的 JSON 数据（视选的类别、页面资产数量、截图复杂度而定），建议存下来用文本编辑器或在线 JSON 格式化工具（如 jsonformatter.io）查看。结果分四大部分：
- loadingExperience：单个页面的终端用户加载体验指标，包含 Core Web Vitals（如 CUMULATIVE_LAYOUT_SHIFT_SCORE、FIRST_CONTENTFUL_PAINT_MS、FIRST_INPUT_DELAY_MS），会标注 FAST/AVERAGE/SLOW/NONE 分类
- originLoadingExperience：整个域名（所有用户）的汇总加载体验指标，跟上面结构相同，流量小的网站两者数字通常差不多
- lighthouseResult：最大的部分，包含所有 Lighthouse 指标——请求网址、最终网址（跳转后）、Lighthouse 版本、测试时间、浏览器信息、审计结果（未使用的 JS/CSS、总字节大小、跳转次数、DOM 大小、服务器响应时间等）、全页/缩略图截图（base64 格式）、以及各类别（性能/无障碍/最佳实践/SEO/PWA）的总分
- analysisUTCTimestamp：报告分析的时间戳
分数怎么解读：0.9~1.0 为良好，0.5~0.9 表示需要改进，0.5 以下算差、需要紧急处理。
常用的有用指标：
| 指标 | JSON 路径 |
|---|---|
| 性能总分 | lighthouseResult.categories.performance.score |
| 无障碍总分 | lighthouseResult.categories.accessibility.score |
| 最佳实践总分 | lighthouseResult.categories.best-practices.score |
| SEO 总分 | lighthouseResult.categories.seo.score |
| PWA 总分 | lighthouseResult.categories.pwa.score |
| FCP（首次内容绘制） | lighthouseResult.audits.first-contentful-paint.score |
| LCP（最大内容绘制） | lighthouseResult.audits.largest-contentful-paint.score |
| CLS（累积布局偏移） | lighthouseResult.audits.cumulative-layout-shift.score |
| 服务器响应时间 | lighthouseResult.audits.server-response-time.score |
| 总页面大小 | lighthouseResult.audits.total-byte-weight.numericValue |
大部分指标除了 score 之外，还有 numericValue（具体数字）、numericUnit（单位）、displayValue（人类可读的描述，例如「Root document took 170 ms」）可以取用。
用 Excel 建立免代码性能仪表板
- 新建 Excel 电子表格，切到 Data 选项卡，点 From Web
- 输入自己的 PageSpeed Insights API 网址，点 OK
- 在弹出的对话框点 Connect，保持默认（匿名）设置，进入 Query Settings 工具
- 依序点开
lighthouseResult→categories→performance，筛选出想要的 JSON 层级
[截图：Excel Query Settings 工具里依序点开 JSON 层级的界面]
- 右键菜单点 Into Table
- 用表格标题的过滤箭头，删掉除了
score以外的其他字段 - 点 Close & Load，电子表格里就会显示实时的性能分数
📌 Google Sheets 不支持 JSON feed（只支持 XML），如果想用类似做法，Excel 是更直接的选择。
用网页做性能仪表板
也可以用一段简单的前端代码（Fetch API + async/await）做一个网页版仪表板：输入网址、选桌面或移动，提交后异步调用 PageSpeed API、拿到 JSON 结果、渲染成汇总表格显示，比标准 Lighthouse 报告看起来更快更直观。核心逻辑：
- 表单提交时阻止默认行为、隐藏之前的结果
- 从表单数据组出完整的 API 网址
- 用
fetch()调用 API，拿到响应后解析成 JSON 对象，try/catch包起来确保出错能被捕捉 - 把结果对象传给渲染函数，提取需要的属性填进表格
- 出错的话在
catch块处理，重新启用表单让用户能再次测试
进阶：自己开发监控系统
如果想要更长期、更自动化的监控，可以做一个小型应用：定时（比如每天凌晨）用 cron job 调用 PageSpeed Insights API，把结果 JSON 连同测试网址、日期时间存进数据库（多数数据库都支持 JSON，MongoDB 尤其适合这个用途）。服务端应用可以再实现一个自己的 REST API 满足报告需求（比如返回两个日期之间某项指标的变化），前端用 JavaScript 调用来显示图表。💡 如果数据量大、报告逻辑复杂，最好是每天有新数据时就预先算好数字，不要等用户打开报告才现算——不然生成报告可能要等好几分钟。
常见误区
- ❌ 只靠 Lighthouse 手动跑分，想长期追踪网站性能变化——手动方式容易忘记定期跑测试，改用 PageSpeed Insights API 自动化后就不用担心漏跑
- ❌ 把 PageSpeed Insights API 的结果当成真实用户体验的唯一依据——这个 API 模拟的是 Google 怎么看网站，如果想了解所有用户在不同设备/网络下的真实体验，应该搭配浏览器性能 API 一起看
- ❌ 短时间内从同一 IP 高频调用 API 却没有申请 API key——超过免费额度会被限制，需要注册 Google API 密钥才能持续高频测试
Sources
Blog / Website：
- 如何使用PageSpeed Insights API来监控页面性能（WBOLT_COM，2023年3月10日） — https://www.wbolt.com/pagespeed-insights-api.html
官方文档：
- Get Started with the PageSpeed Insights API — https://developers.google.com/speed/docs/insights/v5/get-started