使用 PageSpeed Insights API 监控性能

PageSpeed Insights API提供免费的网页性能监控功能，并返回数据和改进建议。V5 API 包含来自Lighthouse 的实验室数据和来自Chrome 用户体验报告(CrUX)的实际数据。



const url = 'https://wordpress.org';
const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}`;
const response = await fetch(apiCall);
const json = await response.json();

团队可以使用 API 构建仪表板、自定义报告以及与其他用户体验测量工具的自定义集成。API的响应可用于监控和绘制来自PageSpeed Insights (PSI) 工具的任何数据：

	PSI 分数 ( json.lighthouseResult.categories.performance.score ) 是通过运行 Lighthouse 分析页面的实验室数据来确定的。分数达到或超过 90 分则被视为速度快，低于 50 分则被视为速度慢。有关评分的最新信息，请参阅常见问题解答；有关分数差异的信息，请参阅bit.ly/perf-variance 。
	如果可用，PSI 将从Chrome 用户体验报告中报告来源或页面 URL 的“首次内容绘制”和“首次输入延迟”数据的字段指标值（json.loadingExperience.metrics ）。
	PSI 使用 Lighthouse 分析 URL，生成性能分数，该分数考虑了实验室环境中的许多不同指标，例如交互时间 ( json.lighthouseResult.audits['interactive'] )。
	Lighthouse 报告机会（例如json.lighthouseResult.audits['uses-rel-preload']、json.lighthouseResult.audits['offscreen-images']等）提供了如何改进页面性能指标的建议。
	您网站加载时的缩略图截图可通过json.lighthouseResult.audits['screenshot-thumbnails']以 base64 格式获取。页面加载时的最后一张截图可通过json.lighthouseResult.audits['final-screenshot']获取。

可以使用 PSI 数据构建高度定制的报告。例如，度假租赁网站 VRBO 使用来自 PSI API 的真实数据绘制图表来跟踪长期性能趋势，以确保其速度在旅游行业中保持竞争力：

web.dev/measure使用与 PageSpeed Insights 完全相同的后端，并使用此数据进行一段时间内的历史测量：

熟悉PSI API 响应的结构很有帮助。这里有针对实验室和现场/实际应用的大量指标信息：



const url = 'https://wordpress.org';
const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}`;
fetch(apiCall)
  .then(response => response.json())
  .then(json => {
      // Real-world metrics
      const cruxMetrics = {
      "First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
      "First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category
      };
      // Lab metrics
      const lighthouse = json.lighthouseResult;
      const lighthouseMetrics = {
      'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue,
      'Speed Index': lighthouse.audits['speed-index'].displayValue,
      'Time To Interactive': lighthouse.audits['interactive'].displayValue,
      };
      // ...
});

PSI API 的响应主要关注性能数据。也就是说，您可以提供?category参数来指定您想要获取数据的任何其他 Lighthouse 审计类别：



curl -i "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://web.dev&category=pwa&category=performance&category=accessibility&category=best-practices&category=seo"

您还可以提供locale或strategy参数（desktop或mobile- 模拟移动网络上的中型设备（Moto G4）上的页面加载）。

Lighthouse 开始支持Stack Packs——特定于技术栈的建议，提供有关如何实施优化（例如 WordPress）的更详细指导。PSI 的 API 响应也支持此功能，因此如果您正在测试 WordPress 网站，则包含以下字符串（wordpress.org 的演示 URL）：

PageSpeed Insights 工具还支持获取 PSI API 数据并使用我们的官方Lighthouse Viewer进行渲染。将其?psiurl作为参数传递即可查看实际效果：

我们在 PSI 上构建的工具之一是psi Node 模块，它可以在您的构建过程中提供便捷的性能报告。



const psi = require('psi');

(async () => {
  // Get the PageSpeed Insights report
  const { data } = await psi('https://web.dev');
  console.log('Speed score:', data.lighthouseResult.categories.performance.score);

  // Output a formatted report to the terminal
  await psi.output('https://theverge.com');
  console.log('Done');
})();