編寫您的第一個用戶端應用程式

已淘汰。本頁面適用於 PageSpeed Insights API 的第 4 版，但該版本已淘汰，並將於 2019 年 5 月關閉。第 5 版是最新版本，且提供 同時參考取自 Chrome 使用者體驗報告的實際資料，以及 Lighthouse 的研究室資料。

簡介

本文件可協助開發人員編寫可與 PageSpeed Insights API 互動的應用程式。

PageSpeed Insights 工具則會回報網頁在行動裝置和電腦裝置中的實際效能，並提供建議來協助開發人員改善網頁。您可以使用 PageSpeed Insights API，透過程式輔助產生 PageSpeed 速度分數、最佳化分數和建議。

事前準備

申請 Google 帳戶

您必須擁有 Google 帳戶，才能取得 API 金鑰供 Google 識別您的應用程式。(詳情請見下方)。

熟悉 PageSpeed

如果您不熟悉 PageSpeed，請參閱 PageSpeed 的網站效能最佳做法。

瞭解如何向 Google 識別您的應用程式

每次向 PageSpeed Insights API 傳送要求時，應用程式都必須在每個要求中加入 API 金鑰，以便識別自身。

取得並使用 API 金鑰

取得金鑰

或是在「憑證」頁面中建立。

取得 API 金鑰後，應用程式便可附加查詢參數 所有要求網址的 key=yourAPIKey。

API 金鑰可以安全地嵌入網址中，不需任何編碼。

PageSpeed Insights API 背景資訊

PageSpeed Insights API 傳回的結果包含下列類型的資訊：

正在載入體驗

「載入體驗」專區包含整體速度類別 (快速、平均或慢) 和分類分佈。

網頁統計資料

「網頁統計資料」部分提供實用的統計結果，例如所需的來回行程和已使用的位元組總數。指出網頁可藉由修改外觀和功能來提升網頁速度。

最佳化分數

PageSpeed 最佳化分數 (0 到 100) 代表網頁的最佳化程度。分數越高，表示網頁的改善空間越小；分數越低，表示網頁的改善空間越大。

規則

PageSpeed 會使用規則分析網頁。每項 PageSpeed 規則是以網頁效能的一般原則為基礎，例如資源快取、資料上傳和下載大小，以及用戶端伺服器往返時間。PageSpeed 規則會產生規則結果和規則影響，如下所述。

規則結果

規則結果是規則產生的建議，如果實作這項建議，網頁速度就會加快，且該網頁的 PageSpeed 分數也會提高。舉例來說，如果可壓縮的資源未經過壓縮就供使用，PageSpeed 的「啟用壓縮」規則會產生結果，建議開發人員為該資源啟用壓縮功能。

規則影響

每項 PageSpeed 規則都會產生影響數 (無上限的浮點值)，用來表示相對於其他規則，實作規則結果建議的重要性或優先順序。舉例來說，如果啟用壓縮功能可節省 1 MB，而最佳化圖片可節省 500 KB，則「啟用壓縮」規則的影響值是「最佳化圖片」規則的兩倍。如果影響為零，表示沒有改善該規則的建議。

叫用 API

如要叫用 API，請呼叫 runPagespeed 方法，並在查詢字串中指定網址、API 金鑰和其他參數。詳情請參閱 API 參考資料文件。

API 呼叫範例

使用指令列

您可以使用 curl 等程式，從 Linux/UNIX 指令列叫用 PageSpeed Insights API。

以下範例會使用這個方式擷取網址 https://developers.google.com/speed/pagespeed/insights/ 的行動 PageSpeed 結果。PageSpeed 分數、網頁統計資料和 PageSpeed 格式化結果會以 JSON 資料格式傳回。

格式化結果會以規則 ID (例如 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 示範。