编写您的第一个客户端应用

简介

本文档适用于想要编写可与 PageSpeed Insights API 交互的应用的开发者。

PageSpeed Insights 是一款工具，可报告网页在移动设备和桌面设备上的实际性能，并提供关于如何改进网页的建议，以帮助开发者优化网页。您可以使用 PageSpeed Insights API 以编程方式生成 PageSpeed 速度得分、优化得分和建议。

前期准备

获取 Google 账号

您需要拥有 Google 账号，才能获取 API 密钥，以便向 Google 识别您的应用。（如下所示）。

熟悉 PageSpeed

如果您不熟悉 PageSpeed，请参阅 PageSpeed 网页性能最佳做法。

了解如何让 Google 识别您的应用

您的应用需要在每次发送请求到 PageSpeed Insights API，方法是为每个密钥添加 API 密钥 请求。

获取和使用 API 密钥

获取密钥

或在“凭据”页面中创建一个 OAuth 客户端 ID。

在您获得 API 密钥后，您的应用便可在所有请求网址后附加查询参数 key=yourAPIKey。

API 密钥可以安全地嵌入网址中；不需要进行任何编码。

PageSpeed Insights API 背景

PageSpeed Insights API 返回的结果包含以下类型的信息：

加载体验
“加载体验”部分包含总体速度类别（快速、平均或慢速）和类别分布。
此网页的速度统计信息
“网页统计信息”部分包含一些有用的统计结果，例如所需的往返次数和使用的总字节数。用于表明如果修改外观和功能，网页加载速度可能会提升。
优化得分
PageSpeed 优化得分（0-100）表示网页的优化程度。得分越高，表示有较少的优化空间，得分越低，表示有较大的优化空间。
规则
PageSpeed 使用规则来分析网页。每个 PageSpeed 规则都基于网页性能的一般原则，例如资源缓存、数据上传和下载大小以及客户端-服务器往返时间。PageSpeed 规则会生成规则结果和规则影响，如下所述。
规则结果
规则结果是指由规则生成的建议，如果实现该建议，网页的速度会加快，并且该网页的 PageSpeed 评分也会提高。例如，如果可压缩资源以未压缩的形式提供，PageSpeed 启用压缩规则会生成结果，建议开发者为该资源启用压缩。
规则影响
每条 PageSpeed 规则都会生成一个影响数值（无界限浮点值），用于指明相对于其他规则，为此规则采纳“规则-结果”建议的重要性或优先级。例如，如果启用压缩功能可节省 1MB 的存储空间，而优化图片可节省 500kB，则“启用压缩”规则的影响值是“优化图片”规则的两倍。如果影响值为零，则表示该规则没有改进建议。

调用 API

如需调用 API，请调用 runPagespeed 方法，并在查询字符串中指定网址、API 密钥和其他参数。如需了解详情，请参阅 API 参考文档。

API 调用示例

从命令行

您可以使用 curl 等程序从 Linux/UNIX 命令行调用 PageSpeed Insights API。

以下示例使用此方法为网址 https://developers.google.com/speed/pagespeed/insights/ 提取移动版 PageSpeed 结果。PageSpeed 评分、网页统计信息和 PageSpeed 格式化结果以 JSON 数据格式返回。

带格式的结果由规则标识符（例如 AvoidBadRequests 或 MinifyJavaScript）进行键控，包含该规则的得分和影响，以及由规则生成的建议，如果实施这些建议，可以加快网页加载速度。如需详细了解 JSON 响应中的字段，请参阅 PageSpeed Insights API 参考文档。

请求：

$ curl 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://developers.google.com/speed/pagespeed/insights/&strategy=mobile&key=yourAPIKey'

响应：

{
 "captchaResult": "CAPTCHA_NOT_NEEDED",
 "kind": "pagespeedonline#result",
 "id": "https://developers.google.com/speed/pagespeed/insights/",
 "responseCode": 200,
 "title": "PageSpeed Insights",
 "ruleGroups": {
  "SPEED": {
   "score": 99
  }
 },
 "loadingExperience": {
  "id": "https://developers.google.com/speed/pagespeed/insights/",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "median": 678,
    "distributions": [
     {
      "min": 0,
      "max": 1567,
      "proportion": 0.8726942914078067
     },
     {
      "min": 1567,
      "max": 2963,
      "proportion": 0.07357226585394444
     },
     {
      "min": 2963,
      "proportion": 0.053733442738248746
     }
    ],
    "category": "FAST"
   },
   "DOM_CONTENT_LOADED_EVENT_FIRED_MS": {
    "median": 559,
    "distributions": [
     {
      "min": 0,
      "max": 2120,
      "proportion": 0.9287991742172268
     },
     {
      "min": 2120,
      "max": 4226,
      "proportion": 0.035877050120426655
     },
     {
      "min": 4226,
      "proportion": 0.0353237756623466
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "FAST",
  "initial_url": "https://developers.google.com/speed/pagespeed/insights/"
 },
 "pageStats": {
  "numberResources": 11,
  "numberHosts": 6,
  "totalRequestBytes": "1874",
  "numberStaticResources": 6,
  "htmlResponseBytes": "72494",
  "overTheWireResponseBytes": "324002",
  "cssResponseBytes": "8467",
  "imageResponseBytes": "5363",
  "javascriptResponseBytes": "841488",
  "otherResponseBytes": "14548",
  "numberJsResources": 4,
  "numberCssResources": 1,
  "numTotalRoundTrips": 13,
  "numRenderBlockingRoundTrips": 0
 },
 "formattedResults": {
  "locale": "en_US",
  "ruleResults": {
   "AvoidLandingPageRedirects": {
    "localizedRuleName": "Avoid landing page redirects",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "Your page has no redirects. Learn more about {{BEGIN_LINK}}avoiding landing page redirects{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/AvoidRedirects"
      }
     ]
    }
   },
   "EnableGzipCompression": {
    "localizedRuleName": "Enable compression",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have compression enabled. Learn more about {{BEGIN_LINK}}enabling compression{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/EnableCompression"
      }
     ]
    }
   },
   ...
   "PrioritizeVisibleContent": {
    "localizedRuleName": "Prioritize visible content",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have the above-the-fold content properly prioritized. Learn more about {{BEGIN_LINK}}prioritizing visible content{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent"
      }
     ]
    }
   }
  }
 },
 "version": {
  "major": 1,
  "minor": 15
 }
}

使用 JavaScript

您可以使用 callback 查询参数和回调函数在浏览器中的 JavaScript 中调用 PageSpeed Insights API，以生成 JSON-P 结果。这样，您就可以编写显示 PageSpeed 数据的丰富应用，而无需编写任何服务器端代码。

以下示例使用此方法显示网址 https://developers.google.com/speed/pagespeed/insights/ 的 PageSpeed 结果和其他信息。此示例还利用了Google 图表工具来直观显示 PageSpeed Insights API 生成的信息。

首先，指定您的 Google API 密钥（详细了解 API 密钥）：

<script>
// Specify your actual API key here:
var API_KEY = 'yourAPIKey';

// Specify the URL you want PageSpeed results for here:
var URL_TO_GET_RESULTS_FOR = 'https://developers.google.com/speed/pagespeed/insights/';
</script>

接下来，通过 PageSpeed Insights API 提取 PageSpeed 结果：

<script>
var API_URL = 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?';
var CHART_API_URL = 'http://chart.apis.google.com/chart?';

// Object that will hold the callbacks that process results from the
// PageSpeed Insights API.
var callbacks = {}

// Invokes the PageSpeed Insights API. The response will contain
// JavaScript that invokes our callback with the PageSpeed results.
function runPagespeed() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  var query = [
    'url=' + URL_TO_GET_RESULTS_FOR,
    'callback=runPagespeedCallbacks',
    'key=' + API_KEY,
  ].join('&');
  s.src = API_URL + query;
  document.head.insertBefore(s, null);
}

// Our JSONP callback. Checks for errors, then invokes our callback handlers.
function runPagespeedCallbacks(result) {
  if (result.error) {
    var errors = result.error.errors;
    for (var i = 0, len = errors.length; i < len; ++i) {
      if (errors[i].reason == 'badRequest' && API_KEY == 'yourAPIKey') {
        alert('Please specify your Google API key in the API_KEY variable.');
      } else {
        // NOTE: your real production app should use a better
        // mechanism than alert() to communicate the error to the user.
        alert(errors[i].message);
      }
    }
    return;
  }

  // Dispatch to each function on the callbacks object.
  for (var fn in callbacks) {
    var f = callbacks[fn];
    if (typeof f == 'function') {
      callbacks[fn](result);
    }
  }
}

// Invoke the callback that fetches results. Async here so we're sure
// to discover any callbacks registered below, but this can be
// synchronous in your code.
setTimeout(runPagespeed, 0);
</script>

通过使用上述代码从 PageSpeed Insights API 获取结果，我们现在可以使用以下示例在用户浏览器中显示感兴趣的信息。

示例 1：显示热门的 PageSpeed 建议

下例以无序列表的形式显示要分析网页的热门 PageSpeed 建议的名称。例如：

  • 使用浏览器缓存
  • 暂缓 JavaScript 解析
  • 缩减 HTML
  • 缩减 JavaScript

请注意：显示完整 PageSpeed 结果所需的数据由 PageSpeed Insights API 提供，但为了简化示例，此处并未使用所有数据。

<script>
callbacks.displayTopPageSpeedSuggestions = function(result) {
  var results = [];
  var ruleResults = result.formattedResults.ruleResults;
  for (var i in ruleResults) {
    var ruleResult = ruleResults[i];
    // Don't display lower-impact suggestions.
    if (ruleResult.ruleImpact < 3.0) continue;
    results.push({name: ruleResult.localizedRuleName,
                  impact: ruleResult.ruleImpact});
  }
  results.sort(sortByImpact);
  var ul = document.createElement('ul');
  for (var i = 0, len = results.length; i < len; ++i) {
    var r = document.createElement('li');
    r.innerHTML = results[i].name;
    ul.insertBefore(r, null);
  }
  if (ul.hasChildNodes()) {
    document.body.insertBefore(ul, null);
  } else {
    var div = document.createElement('div');
    div.innerHTML = 'No high impact suggestions. Good job!';
    document.body.insertBefore(div, null);
  }
};

// Helper function that sorts results in order of impact.
function sortByImpact(a, b) { return b.impact - a.impact; }
</script>

示例 2：显示资源大小细分饼图

此示例显示了一个饼图，其中显示了所分析网页的资源大小细分。例如：

<script>
var RESOURCE_TYPE_INFO = [
  {label: 'JavaScript', field: 'javascriptResponseBytes', color: 'e2192c'},
  {label: 'Images', field: 'imageResponseBytes', color: 'f3ed4a'},
  {label: 'CSS', field: 'cssResponseBytes', color: 'ff7008'},
  {label: 'HTML', field: 'htmlResponseBytes', color: '43c121'},
  {label: 'Flash', field: 'flashResponseBytes', color: 'f8ce44'},
  {label: 'Text', field: 'textResponseBytes', color: 'ad6bc5'},
  {label: 'Other', field: 'otherResponseBytes', color: '1051e8'},
];

callbacks.displayResourceSizeBreakdown = function(result) {
  var stats = result.pageStats;
  var labels = [];
  var data = [];
  var colors = [];
  var totalBytes = 0;
  var largestSingleCategory = 0;
  for (var i = 0, len = RESOURCE_TYPE_INFO.length; i < len; ++i) {
    var label = RESOURCE_TYPE_INFO[i].label;
    var field = RESOURCE_TYPE_INFO[i].field;
    var color = RESOURCE_TYPE_INFO[i].color;
    if (field in stats) {
      var val = Number(stats[field]);
      totalBytes += val;
      if (val > largestSingleCategory) largestSingleCategory = val;
      labels.push(label);
      data.push(val);
      colors.push(color);
    }
  }
  // Construct the query to send to the Google Chart Tools.
  var query = [
    'chs=300x140',
    'cht=p3',
    'chts=' + ['000000', 16].join(','),
    'chco=' + colors.join('|'),
    'chd=t:' + data.join(','),
    'chdl=' + labels.join('|'),
    'chdls=000000,14',
    'chp=1.6',
    'chds=0,' + largestSingleCategory,
  ].join('&');
  var i = document.createElement('img');
  i.src = 'http://chart.apis.google.com/chart?' + query;
  document.body.insertBefore(i, null);
};
</script>

演示视频

2011 年 Google I/O 训练营的 PageSpeed Insights API 演示。