如何使用 PageSpeed Insights API 监控页面性能
已发表: 2023-03-09有一些工具可以帮助监控页面性能并评估您的改进。 最好的之一是 PageSpeed Insights。 它可作为 Web 应用程序和 Chrome 开发工具中的 Lighthouse 选项卡使用(相同的开发工具也可用于 Edge、Opera、Brave 和 Vivaldi)。
网页性能比以往任何时候都更加重要。 用户期望获得可与桌面应用程序媲美的流畅且响应迅速的体验。 此外,Google 的 Core Web Vitals 衡量页面性能——它会影响 PageRank 和您的搜索引擎优化工作。
WordPress 运行着超过三分之一的网站,但性能受到低效托管、缓慢的主题和过度依赖插件的影响。 您可以通过切换到一个好的网络主机并使用最佳实践性能技术来解决大多数问题。
访问灯塔
通过打开要检查的页面并按Ctrl/Cmd + Shift + I或从菜单中的更多工具中选择开发人员工具来启动 Lighthouse。 切换到Lighthouse选项卡并单击Analyze Page Load按钮。 几秒钟后显示结果:
您可以深入了解顶级百分比,以发现解决已知问题的更多信息和提示。 该工具非常宝贵,但也有缺点:
- 您必须为要测试的每个页面手动启动运行。
- 记录因素如何随着时间的推移而改善或恶化并不容易。
- 有很多数据要检查,很容易出错。
- 为开发人员提供了技术细节。 对于想要快速了解进度的客户和经理来说,这可能会让人不知所措。
- Lighthouse 运行可能会受到本地设备和网络速度的影响,这可能会导致错误的假设。
PageSpeed Insights API 提供了一种解决这些问题的方法,因此可以自动化、记录和比较测试。
什么是 PageSpeed Insights API?
Google 提供免费的 PageSpeed Insights REST API,它以 JSON 格式返回包含所有 Lighthouse 指标等的数据。 它允许您自动运行页面、存储结果数据、查看随时间变化的变化,并显示您需要的确切信息。
PageSpeed Insights API 模拟 Google 如何看待您的网站。 您可以每隔几天或每当发布性能更新时运行一次报告。
结果很有帮助,但不一定代表实际用户体验。 当您想要监控所有用户设备和网络的真实性能时,浏览器性能 API 是更好的选择。
PageSpeed Insights API 快速入门
将以下地址复制到您的 Web 浏览器并编辑url
以评估您的页面的性能:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/
Firefox 是理想的,因为它有一个内置的 JSON 查看器,尽管 Chrome 有提供相同功能的扩展。 整体 Lighthouse 性能得分突出显示如下:
您可以更改您自己的页面和首选项的 API URL 查询字符串。 唯一需要的参数是url
,例如
url=https://mysite.com/page1
默认情况下会运行桌面测试,但您可以通过以下方式明确请求它:
strategy=desktop
或切换到手机:
strategy=mobile
除非您指定一个或多个感兴趣的类别,否则只会运行性能测试:
category=performance
category=accessibility
category=best-practices
category=seo
category=pwa
可以通过设置语言环境来定义特定语言——例如法语:
locale=fr-FR
和 Google Analytics 活动详细信息可以设置为:
utm_campaign=<campaign>
utm_source=<source>
该服务对于不频繁的请求是免费的,但如果您打算在短时间内从同一 IP 地址运行许多测试,则需要注册一个 Google API 密钥。 密钥通过以下方式添加到 URL:
key=<api-key>
您可以通过指定用与号 (&) 字符分隔的所选参数来构建 URL 的查询字符串。 以下 API URL 使用移动设备测试https://mysite.com/
上的页面以评估性能和可访问性标准:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility
如果您需要进一步的帮助,您可以构建自己的 URL 或使用 Google PageSpeed API URL 构建工具。
PageSpeed Insights API JSON 结果
测试通常会返回大约 600Kb 的 JSON 数据,具体取决于您选择的类别、页面中的资产数量以及屏幕截图的复杂性(以 base64 格式嵌入)。
数据量惊人,存在一些重复,结果文档并不总是清晰。 JSON 分为四个部分,如下所述。
加载经验
这些是为最终用户的页面加载体验计算的指标。 它包括 Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE、FIRST_CONTENTFUL_PAINT_MS 和 FIRST_INPUT_DELAY_MS 等信息。 如果未进行任何测量,详细信息和“类别”值将返回 FAST、AVERAGE、SLOW 或 NONE。 例子:
"loadingExperience": { "metrics": { "CUMULATIVE_LAYOUT_SHIFT_SCORE": { "percentile": 0, "distributions": [ { "min": 0, "max": 10, "proportion": 0.970 }, { "min": 10, "max": 25, "proportion": 0.017 }, { "min": 25, "proportion": 0.012 } ], "category": "FAST" },
originLoadingExperience
这些是针对所有用户的页面加载体验计算的汇总指标。 这些部分与上面的 loadingExperience 相同,流量较少的站点不太可能显示任何数字差异。
灯塔结果
这是最大的部分,包含所有 Lighthouse 指标。 它提供有关测试的信息:
- requestedUrl – 您请求的 URL
- finalUrl – 遵循所有重定向后测试的实际页面
- lighthouseVersion——软件版本
- fetchTime——测试运行的时间
- userAgent – 用于测试的浏览器的用户代理字符串
- 环境——扩展的用户代理信息
- configSettings – 传递给 API 的设置
接下来是“审核”部分,其中包含许多部分,包括未使用的 javascript、未使用的 css 规则、总字节重量、重定向、dom 大小、最大内容绘制元素、服务器响应时间、网络-请求、累积布局转换、第一次有意义的绘画、屏幕截图缩略图和整页屏幕截图。
大多数审计指标都提供一个“详细信息”部分,其中包含“overallSavingsBytes”和“overallSavingsMs”等因素,这些因素估计实施性能改进的好处。
整页和缩略图“屏幕截图”部分包含嵌入的 base64 图像数据。
“指标”部分提供“项目”数组中所有指标的摘要,例如
"metrics": { "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", "score": null, "scoreDisplayMode": "informative", "details": { "type": "debugdata", "items": [{ "observedFirstVisualChange": 234, "observedFirstContentfulPaint": 284, "interactive": 278, "observedFirstPaintTs": 1579728174422, "observedDomContentLoaded": 314, // ... etc ... }] }, "numericValue": 278, "numericUnit": "millisecond" },
“audits”部分后面是“categories”,它提供了通过 API URL 传递的所选类别的总体 Lighthouse 分数:
"categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.97, "auditRefs": [ //...
“分数”是一个介于 0 和 1 之间的数字,通常在 Lighthouse 报告中显示为百分比。 一般来说,分数是:
- 0.9 到 1.0 很好
- 0.5 到 0.9 以下表示需要改进
- 低于 0.5 较差,需要更紧急的关注
“auditRefs”部分提供了所有指标的列表以及用于计算每个分数的权重。
分析UTC时间戳
最后,报告分析时间。 这应该与 lighthouseResult.fetchTime 中显示的时间相同。
有用的 JSON 结果指标
我建议您在文本编辑器中保存并检查 JSON 结果。 有些具有内置的 JSON 格式化程序或作为插件提供。 或者,您可以使用免费的在线工具,例如:
- JSON 格式器和验证器
- JSON格式化程序
- jsonformatter.io
以下指标可能会有用。 请记住根据需要在 URL 上设置关联的类别选项。
摘要指标
从 0 到 1 的总分:
表现 | lighthouseResult.categories.performance.score |
辅助功能 | lighthouseResult.categories.accessibility.score |
最佳实践 | lighthouseResult.categories.best-practices.score |
搜索引擎优化 | lighthouseResult.categories.seo.score |
渐进式网络应用程序 (PWA) | lighthouseResult.categories.pwa.score |
性能指标
这些包括从 0 到 1 的 Core Web Vitals 分数:
第一次内容丰富的绘画 | lighthouseResult.audits.first-contentful-paint.score |
第一次有意义的绘画 | lighthouseResult.audits.first-meaningful-paint.score |
最大的内容油漆 | lighthouseResult.audits.largest-contentful-paint.score |
速度指数 | lighthouseResult.audits.speed-index.score |
累积版图转移 | lighthouseResult.audits.cumulative-layout-shift.score |
其他有用的性能分数包括:
服务器响应时间 | lighthouseResult.audits.server-response-time.score |
可抓取 | lighthouseResult.audits.is-crawlable.score |
控制台错误 | lighthouseResult.audits.errors-in-console.score |
总字节重量 | lighthouseResult.audits.total-byte-weight.score |
DOM 大小分数 | lighthouseResult.audits.dom-size.score |
您通常可以获得实际数字和单位,例如:
- lighthouseResult.audits.total-byte-weight.numericValue –
页面总大小,例如 450123 - lighthouseResult.audits.total-byte-weight.numericUnit –
用于总页面大小的单位,例如“字节”
或者,“displayValue”通常包含带有图形和单位的可读消息:
- lighthouseResult.audits.server-response-time.displayValue –
关于响应时间的消息,例如“Root document take 170 ms” - lighthouseResult.audits.dom-size.displayValue –
有关 DOM 中元素数量的消息,例如“543 个元素”
创建无代码性能仪表板
可以在包括 Microsoft Excel 在内的许多系统中读取和处理实时 API 提要。 (有点奇怪,如果没有更多插件或宏代码,Google 表格不支持 JSON 提要。它支持 XML。)
要将实时整体性能得分导入 Excel,请启动一个新的电子表格,切换到“数据”选项卡,然后单击“来自 Web” 。 输入您的 PageSpeed Insights API URL 并点击确定:
在下一个对话框中单击“连接”并保持默认(匿名)设置。 您将继续使用查询设置工具:
单击灯塔结果指标右侧的记录。 然后单击类别和性能上的相同项以向下钻取 JSON 对象层次结构:
从右键单击菜单选项中单击顶部的Into Table图标。
然后,您可以单击表标题中的过滤器箭头以删除分数以外的所有内容,然后再单击OK :
最后,单击关闭并加载以在电子表格中显示实时性能分数:
您可以对其他感兴趣的指标执行相同的过程。
创建 Web 性能仪表板
此Codepen 演示提供了一个表单,您可以在其中输入 URL 并选择桌面或移动分析以获得结果。
该代码创建一个 PageSpeed Insights URL,调用 API,然后将各种结果呈现到一个比标准 Lighthouse 报告更容易查看的汇总表中:
提交表单时调用异步startCheck()
函数。 它取消提交事件并隐藏以前的结果:
// make API request async function startCheck(e) { e.preventDefault(); show(resultTable, false); show(status); show(error, false);
然后它从表单数据构造apiURL
并禁用字段:
const form = e.target, fields = form.firstElementChild, data = new FormData(form), qs = decodeURIComponent( new URLSearchParams(data).toString() ), apiURL = form.action + '?' + qs; fields.disabled = true;
Fetch API 用于调用 PageSpeed URL、获取响应并将 JSON 字符串解析为可用的 JavaScript 对象。 try/catch 块确保捕获失败:
try { // call API and get result const response = await fetch(apiURL), result = await response.json();
结果对象被传递给showResult()
函数。 这会提取属性并将它们放入结果表或任何其他将数据点属性设置为 PageSpeed API 属性的 HTML 元素中,例如
<td data-point="lighthouseResult.categories.performance.score"></td>
try 块的结尾:
// output result showResult(result); show(status, false); show(resultTable); }
最后,一个 catch 块处理错误并重新启用表单字段,以便可以运行进一步的测试:
catch(err) { // API error console.log(err); show(status, false); show(error); } fields.disabled = false; }
进一步的发展选择
上面的示例代码在您请求时从 PageSpeed Insights API 获取结果。 该报告比 Lighthouse 更具可配置性,但执行仍然是一个手动过程。
如果您打算开发自己的仪表板,那么创建一个调用 PageSpeed Insights API 的小型应用程序并将生成的 JSON 存储在新的数据库记录中与测试的 URL 和当前日期/时间相对应。 大多数数据库都支持 JSON,尽管 MongoDB 非常适合这项任务。 cron 作业可以定时调用您的应用程序——也许每天凌晨一次。
然后,服务器端应用程序可以根据您的报告要求实施自己的 REST API,例如返回两个日期之间特定性能指标的变化。 客户端 JavaScript 可以调用它来显示说明性能随时间的改进的表格或图表。
如果您想创建包含大量数据的复杂报告,最好每天在新的 PageSpeed 数据可用时预先计算一次数据。 毕竟,您不想在需要几分钟才能生成的报告上显示性能如何提高!
概括
Chrome 的 Lighthouse 工具很棒,但频繁评估许多页面是一件苦差事。 PageSpeed Insights API 允许您使用编程技术评估站点性能。 好处:
- 性能测试可以自动化。 您不能忘记运行测试。
- 结果收集在谷歌服务器上,因此本地设备和网络速度因素的影响较小。
- 指标包括 Lighthouse 中通常不可用的信息。
- 随着时间的推移,可以记录和监控重要指标,以确保页面性能随着每次更新而得到改善。
- 性能、可访问性和 SEO 信息可以显示在简化的报告中,以便开发人员、经理和客户一目了然。