このページは Cloud Translation API によって翻訳されました。

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

はじめに

このドキュメントは、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 データ形式で返されます。

書式設定された結果は、ルール識別子（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 から

ブラウザで JavaScript から PageSpeed Insights API を呼び出し、callback クエリパラメータとコールバック関数を使用して JSON-P の結果を生成できます。これにより、サーバー側のコードを記述することなく、PageSpeed データを表示する高機能なアプリケーションを作成できます。

次の例では、このアプローチを使用して URL（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 による完全な結果を表示するために必要なデータは提供されますが、例をシンプルにするため、ここではそのデータがすべて使用されているわけではありません。

<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 BootCamp 2011 での PageSpeed Insights API のデモ。