如何使用PageSpeed Insights API来监控页面性能

有一些工具可以帮助监测页面性能和评估你的改进。其中一个最好的工具是PageSpeed Insights。它可以作为一个网络应用程序和Chrome的DevTools中的Lighthouse标签（Edge、Opera、Brave和Vivaldi也有同样的DevTools）。

网页性能比以往任何时候都更重要。用户期望有一个能与桌面应用程序相媲美的光滑和响应式体验。此外，谷歌的Core Web Vitals衡量页面性能–它影响PageRank和你的搜索引擎优化工作。

WordPress运行着超过三分之一的网站，但性能却受到无效的主机、缓慢的主题和对插件的过度依赖的影响。你可以通过更换一个好的虚拟主机和使用最佳性能技术来解决大多数问题。

1. 访问Lighthouse
2. 什么是PageSpeed Insights API？
3. PageSpeed Insights API快速入门
4. PageSpeed Insights API的JSON结果
5. 有用的JSON结果指标
6. 创建无需代码的性能仪表板
7. 创建网络性能仪表板
8. 进一步的开发选项

访问Lighthouse

打开你要检查的页面，按Ctrl/Commd + Shift + I或在菜单中的更多工具中选择开发工具，启动Lighthouse。切换到Lighthouse选项卡，点击Analyse Page Load按钮。几秒钟后会显示结果：

Lighthouse报告示例

你可以深入到最高级别的百分比，以发现进一步的信息和提示，解决已知的问题。这个工具是非常宝贵的，但也有不足之处。

• 你必须为你测试的每个页面手动开始运行。
• 要记录各种因素随着时间的推移是如何改善或恶化的并不容易。
• 有大量的数据需要检查，很容易出错。
• 技术细节是为开发者提供的。对于想要快速了解进展情况的客户和管理人员来说，这可能会让他们不知所措。
• Lighthouse的运行可能会受到本地设备和网络速度的影响，这可能导致错误的假设。

PageSpeed Insights API提供了一种解决这些问题的方法，因此测试可以自动化、记录和比较。

什么是PageSpeed Insights API？

谷歌提供了一个免费的PageSpeed Insights REST API，它以JSON格式返回数据，其中包含所有的Lighthouse指标和更多。它允许你自动运行页面，存储产生的数据，审查一段时间的变化，并显示你需要的确切信息。

PageSpeed Insights API模拟了谷歌如何看待你的网站。你可以每隔几天或在你发布性能更新时运行一份报告。

这些结果是有帮助的，但不一定能说明实际的用户体验。当你想在所有用户的设备和网络上监测真实世界的性能时，浏览器性能API是一个更好的选择。

PageSpeed Insights API快速入门

将以下地址复制到你的网络浏览器，并编辑 url 以评估你的网页性能：

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

火狐浏览器是理想的选择，因为它有一个内置的JSON浏览器，尽管Chrome有提供相同功能的扩展。以下是Lighthouse的整体性能得分：

PageSpeed Insights的API结果JSON（火狐）。

你可以为你自己的页面和偏好改变API的URL查询字符串。唯一需要的参数是 url，例如：

url=https://mysite.com/page1

默认情况下会运行一个桌面测试，但你可以用以下方式明确要求：

strategy=desktop

或切换到移动端：

strategy=mobile

除非你指定一个或多个感兴趣的类别，否则只运行性能测试：

category=performancecategory=accessibilitycategory=best-practicescategory=seocategory=pwa

一个特定的语言可以通过设置一个locale来定义–比如法语：

locale=fr-FR

而谷歌分析的活动细节可以用以下方式设置：

utm_campaign=<campaign>utm_source=<source>

该服务对不经常的请求是免费的，但如果你打算在短期内从同一IP地址运行许多测试，你将需要注册一个谷歌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，或者使用谷歌PageSpeed API URL构建工具。

PageSpeed Insights API的JSON结果

测试通常会返回大约600Kb的JSON数据，这取决于你选择的类别、页面中资产的数量以及屏幕截图的复杂性（以base64格式嵌入）。

数据的数量是令人生畏的，有一些重复，而且结果文档并不总是很清楚。JSON被分成四个部分，如下所述。

loadingExperience

这些是为终端用户的页面加载体验计算的指标。它包括诸如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

这些是针对所有用户的页面加载体验而计算的汇总指标。这些部分与上述加载体验相同，流量较少的网站不太可能显示出任何数字上的差异。

lighthouseResult

这是最大的部分，包含所有Lighthouse指标。它提供了关于测试的信息：

• requestedUrl – 您请求的URL
• finalUrl – 经过所有重定向后的实际测试页面
• lighthouseVersion – 软件版本
• fetchTime – 测试运行的时间
• userAgent – 测试所使用的浏览器的用户代理字符串
• environment – 扩展的用户代理信息
• configSettings – 传递给API的设置

接下来是 “审计 “部分，包括unused-javascript、unused-css-rules、total-byte-weight、redirects、dom-size、maximum-contentful-paint-element、server-response-time、network-requests、 cumulative-layout-shift、first-meaningful-paint、screenshot-thumbnails和full-page-screenshot。

大多数审计指标提供了一个 “细节 “部分，其中包含诸如 “overallSavingsBytes（总体节省字节数）”和 “overallSavingsMs（总体节省数量）”等因素，估计实施性能改进的好处。

全页和缩略图 “屏幕截图 “部分包含嵌入式base64图像数据。

“metrics（指标）” 部分提供了一个 “items（项目）” 数组中所有指标的摘要，例如：

"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": [
//...

“score（分数）”是一个介于0和1之间的数字，通常在Lighthouse报告中以百分比形式显示。一般来说，得分在：

• 0.9至1.0为良好
• 0.5至0.9以下表示需要改进
• 0.5分以下为差，需要更紧急的关注。

“auditRefs” 部分提供了一份所有指标的清单，以及用于计算每个分数的权重。

analysisUTCTimestamp

最后，报告分析时间。这应该与lighthouseResult.fetchTime中显示的时间相同。

有用的JSON结果指标

我建议你保存并在一个文本编辑器中检查JSON结果。有些编辑器有内置的JSON格式化器或作为插件提供。另外，你也可以使用免费的在线工具，如。

• JSON Formatter & Validator
• JSON Formatter
• jsonformatter.io

以下指标可能是有用的。记得根据需要在URL上设置相关的类别选项。

摘要指标

总体得分从0到1：

性能指标

这些包括从0到1的Core Web Vitals分数：

其他有用的性能分数包括：

你通常可以获得实际的数字和单位，如：

• lighthouseResult.audits.total-byte-weight.numericValue -页面总大小，例如：450123
• lighthouseResult.audits.total-byte-weight.numericUnit -总页面大小所使用的单位，如 “byte”

另外，”displayValue” 通常包含一个包含数字和单位的可读信息：

• lighthouseResult.audits.server-response-time.displayValue -关于响应时间的信息，例如：”Root document took 170 ms”
• lighthouseResult.audits.dom-size.displayValue -关于DOM中元素数量的信息，例如：”543个元素”

创建无需代码的性能仪表板

实时API反馈可以在许多系统中读取和处理，包括Microsoft Excel。(有点奇怪的是，Google Sheets不支持JSON feeds，不需要进一步的插件或宏代码。它确实支持XML）。

要将实时整体性能得分导入Excel，请启动一个新的电子表格，切换到Data选项卡，并点击From Web。输入你的PageSpeed Insights API URL并点击OK：

从网络导入Excel数据

在下一个对话框中点击Connect，并保持默认（匿名）设置。你将进入Query Settings工具：

Excel查询设置工具

点击lighthouse结果指标右侧的 “Record“。然后在categories和performance上点击同样的内容，以筛选获取JSON对象的层次：

Excel JSON对象筛选获取

在右键菜单选项中点击顶部的 “Into Table” 图标。

然后你可以点击表格标题中的过滤箭头，在点击OK之前删除除score以外的所有内容：

Excel导入的表格过滤

最后，单击 “Close & Load“，在电子表格中显示实时表现的分数：

Excel实时数据

你可以对其他感兴趣的指标遵循同样的过程。

创建网络性能仪表板

这个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() 函数。这将提取属性并将它们放入结果表或任何其他HTML元素中，该元素的数据点属性被设置为PageSpeed API属性，例如：

<td></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，并在一个新的数据库记录中针对测试的URL和当前的日期/时间存储结果的JSON，可能是实用的。大多数数据库都支持JSON，尽管MongoDB是最适合这项任务的。一个cron工作任务可以在定时的基础上调用你的应用程序–也许是每天凌晨的时候一次。

然后，服务器端的应用程序可以实现自己的REST API，以满足你的报告要求，例如，返回两个日期之间特定性能指标的变化。它可以被客户端的JavaScript调用，以显示表格或图表，说明随着时间推移的性能改善。

如果你想用大量的数据创建复杂的报告，最好是在每天有新的PageSpeed数据时预先计算一次数字。毕竟，你不希望在一份需要数分钟才能生成的报告中显示性能是如何改善的！

小结

Chrome的Lighthouse工具非常棒，但要经常评估许多页面是件麻烦事。PageSpeed Insights API允许你使用编程技术来评估网站性能。其好处是：

• 性能测试可以被自动化。你不能忘记运行一个测试。
• 结果是在谷歌服务器上收集的，因此本地设备和网络速度因素的影响较小。
• 指标包括Lighthouse中通常没有的信息。
• 重要的指标可以被记录下来，并随着时间的推移进行监测，以确保页面性能随着每次更新而提高。
• 性能、可访问性和SEO信息可以显示在简化的报告中，让开发人员、管理人员和客户一目了然。