如何使用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

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

该服务对不经常的请求是免费的，但如果你打算在短期内从同一IP地址运行许多测试，你将需要注册一个谷歌API密钥。该密钥被添加到URL中：

你可以通过指定你选择的参数来建立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：