初めてのクライアント アプリケーション作成

非推奨。このページは、PageSpeed Insights API のバージョン 4 について記述しています。この API は非推奨となり、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 キーを作成したら、アプリケーションですべてのリクエスト URL の末尾にクエリ パラメータ key=yourAPIKey を追加できます。

API キーは、安全に URL に埋め込むことができます。エンコーディングの必要はありません。

PageSpeed Insights API の背景

PageSpeed Insights API から返される結果には、次の種類の情報が含まれます。

エクスペリエンスを読み込んでいます

[読み込みエクスペリエンス] セクションには、全体的な速度カテゴリ（FAST、AVERAGE、SLOW）とカテゴリ分布が表示されます。

ページの統計情報

[ページの統計情報] セクションには、必要なラウンド トリップ数や使用された合計バイト数など、有用な統計情報が表示されます。デザインと機能を変更することで、ページの読み込みが速くなる可能性があることを示します。

最適化スコア

PageSpeed の最適化スコア（0～100）は、ページの最適化度合いを示します。スコアが高いほど、改善の余地が少ないことを意味し、スコアが低いほど、改善の余地が多いことを意味します。

ルール

PageSpeed はルールを使用してウェブページを分析します。PageSpeed の各ルールは、リソース キャッシュ、データのアップロードとダウンロードのサイズ、クライアントとサーバーのラウンドトリップ時間など、ウェブページのパフォーマンスに関する一般的な原則に基づいています。PageSpeed ルールは、以下で説明するルールの結果とルールの影響を生成します。

ルールの結果

ルールの結果は、ルールによって生成された最適化案です。実装するとページの読み込み時間が短縮され、そのページの PageSpeed スコアが向上します。たとえば、圧縮可能なリソースが圧縮されていない状態で配信される場合、PageSpeed の [圧縮を有効にする] ルールにより、デベロッパーがそのリソースの圧縮を有効にすることを推奨する結果が生成されます。

ルールの影響

各 PageSpeed ルールは、他のルールと比較した、そのルールのルール結果の提案を実装する重要度または優先度を示すインパクト数（無制限の浮動小数点値）を生成します。たとえば、圧縮を有効にすると 1 MB の節約となり、画像を最適化すると 500 KB の節約になると、圧縮を有効にするルールの影響値は画像を最適化するルールの 2 倍になります。影響がゼロの場合、そのルールに対する改善案はありません。

API の呼び出し

API を呼び出すには、クエリ文字列で URL、API キー、その他のパラメータを指定して runPagespeed メソッドを呼び出します。詳細については、API リファレンスのドキュメントをご覧ください。

API 呼び出しの例

コマンドラインでの実行

PageSpeed Insights API は、curl などのプログラムを使用して Linux / UNIX コマンドラインから呼び出すことができます。

次の例では、この方法を使用して、URL 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 クエリ パラメータとコールバック関数を使用して JSON-P の結果を生成するには、ブラウザの JavaScript から PageSpeed Insights API を呼び出します。これにより、サーバーサイド コードを記述しなくても、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 Insights API により、完全な PageSpeed の結果を表示するために必要なデータが提供されますが、例をシンプルにするために、データの一部はここでは使用しません。

<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>

デモ動画

Google I/O ブートキャンプ 2011 での PageSpeed Insights API のデモ。