PageSpeed Insights APIを使用してページパフォーマンスを監視する方法

ウェブページのパフォーマンスを分析し、改善策を見つけるツールを活用しましょう。中でも「PageSpeed Insights」は最も人気のツールで、ウェブアプリケーション版のほか、Chromeの開発者ツール内「Lighthouse」タブからも利用可能です（Edge、Opera、Brave、Vivaldiの開発者ツールでも利用可能）。

近年、ウェブページのパフォーマンスは、ますます重視されています。ユーザーはデスクトップアプリケーションと同等の、滑らかで反応の良い体験をウェブ上でも求めています。さらにGoogleのCore Web Vitalsは、ページパフォーマンスの評価基準として導入され、PageRankや検索エンジン最適化にも影響を与えるようになりました。

WordPressは世界中のウェブサイトの3分の1以上で使用されていますが、効率の悪いホスティングや重たいテーマ、インストールしすぎたプラグインなどの要因でパフォーマンスの低下を引き起こすことがあります。しかし、質の高いホスティングへ移行し、パフォーマンスを向上させるテクニックを使用すれば、ページ速度に関するほとんどの問題を解決できます。

Lighthouseの使用方法

PageSpeed Insightsをブラウザから利用できる「Lighthouse」を使用するには、まず、調査対象のページを開き、「Ctrl」または「Cmd」＋「Shift」＋「I」を同時に押すか、メニューの「その他のツール」から「デベロッパー ツール」を選択します。次に「Lighthouse」タブを選択し、「ページ読み込みを分析」ボタンをクリックすると、数秒で分析結果が表示されます。

上部の点数をクリックすると、より詳細な情報や、検出された問題を解決するためのアドバイスが表示されます。このツールは極めて有益ですが、欠点も存在します。

• テストするページごとに手動で分析が必要。
• ページパフォーマンスが時系列でどう変化したか追跡するのが難しい。
• データが膨大で、見落としが起こりやすい。
• 技術的な詳細情報は、開発者による利用を想定しており、クライアントや非技術者が全体像を把握する場合には情報が多すぎて、圧倒されてしまう可能性がある。
• Lighthouseの結果は、使用している端末やネットワークの速度に左右されるため、不正確な結果を導く可能性がある。

PageSpeed Insights APIを使用することで、テストを自動化し、パフォーマンスの追跡と比較を簡単かつ効率的に行い、上記の制約を解決することが可能です。

PageSpeed Insights APIとは

Googleでは、無料のREST API版のPageSpeed Insightsを提供しており、JSON形式ですべてのLighthouseの指標全体を含むデータを取得可能です。APIを活用すれば、ページのパフォーマンステストの自動化、結果を保存して時間経過による変化の追跡、必要なデータの的確な取得が可能になります。

PageSpeed Insights APIは、Googleがあなたのサイトをどのように評価しているか再現する機能を持っています。数日ごと、またはパフォーマンス改善のたびにレポートを生成することができます。

得られる結果は有用ですが、常に実際のユーザー体験を反映しているわけではありません。実際のユーザー体験を監視する際には、すべてのユーザーのデバイスやネットワーク条件を考慮したブラウザのPerformance APIの方がより適しています。

PageSpeed Insights APIの簡単な使い方

ブラウザのアドレスバーに以下のURLをコピーして貼り付け、urlパラメータを変更し、ページパフォーマンス評価を開始しましょう。

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

FirefoxにはデフォルトでJSONビューアが組み込まれていますが、ChromeでもJSONを読みやすくするには、同様の機能を提供する拡張機能を追加しましょう。以下のスクリーンショットのように、Lighthouseのパフォーマンススコアの概要が表示されます。

API URLのクエリ文字列を、対象ページや好みに合わせて変更してください。urlが唯一の必須パラメータです。

url=https://mysite.com/page1

テストはデフォルトでPC版サイトを実行しますが、明示的にリクエストすることもできます。

strategy=desktop

以下のように指定すると、モバイル版に切り替えることもできます。

strategy=mobile

デフォルトではパフォーマンステストのみを実行しますが、以下のように確認したいカテゴリーを1つ以上指定することもできます。

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

出力結果の言語を指定するには、ロケールを設定します。たとえば日本語で結果を表示する場合は以下のように指定します。

locale=ja

Google アナリティクスのキャンペーン詳細も以下のように設定できます。

utm_campaign=<campaign>
utm_source=<source>

このAPIは無料で利用できますが、短期間に同じIPアドレスからのリクエストが多数になる場合は、Google APIキーの登録が必要です。キーは、URLに追加して指定します。

key=<api-key>

任意のパラメータをアンパサンド（&）で区切って指定すれば、URLのクエリ文字列が作れます。以下のAPI URLの例は、モバイルデバイスを用いて、対象ページhttps://mysite.com/のパフォーマンスとアクセシビリティ基準の評価をリクエストします。

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

独自のURLを作成したり、Google PageSpeed API用のURLビルダーツールも利用できます。

PageSpeed Insights APIのJSONデータ

テスト結果は約600KBのJSONデータとしてレスポンスされます。内容は、選んだカテゴリー、ページ上のアセット数、base64エンコードされたスクリーンショットの複雑さに応じて変わります。

データは膨大で、重複する部分があったり、結果に関するヘルプページもわかりづらい部分があります。JSONデータは大きく4つのセクションに分かれています。

loadingExperience

ユーザーのページロード体験に関する計算された指標を含みます。Core Web Vitalsの重要な指標である「CUMULATIVE_LAYOUT_SHIFT_SCORE」「FIRST_CONTENTFUL_PAINT_MS」「FIRST_INPUT_DELAY_MS」のような情報がここに含まれています。各指標の「category」には、「FAST」「AVERAGE」「SLOW」もしくはデータがなければ「NONE」を返します。以下は出力例です。

"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},

originLoadingExperience

これらの項目は、すべてのユーザーのページロード体験に関する集約された指標です。内容は「loadingExperience」セクションと同じであり、トラフィックが少ないサイトでは数値に違いが見られる可能性は低いです。

lighthouseResult

このセクションは最もボリュームがあり、すべてのLighthouse指標を包含しています。テストについての詳細情報を以下のように提供します。

• requestedUrl─テストをリクエストしたURL
• finalUrl─すべてのリダイレクト後にテストされた実際のページ
• lighthouseVersion─使用されたLighthouseのソフトウェアバージョン
• fetchTime─テストが実行された時刻
• userAgent─テストに使用されたブラウザのユーザーエージェント文字列
• environment─ブラウザの拡張ユーザーエージェント情報
• configSettings─APIに提供された設定

この後に監査セクションが続き、「unused-javascript」「unused-css-rules」「total-byte-weight」「redirects」「dom-size」「largest-contentful-paint-element」「server-response-time」「network-requests」「cumulative-layout-shift」「first-meaningful-paint」「screenshot-thumbnails」「full-page-screenshot」などの項目が含まれます。

ほとんどの監査指標には「details」セクションがあり、「overallSavingsBytes」や「overallSavingsMs」などの要素が含まれています。

全ページおよびサムネイルの「スクリーンショット」セクションには、base64画像データが埋め込まれています。

「metrics」セクションは、「items」配列内のすべての指標の要約を提供します。

"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},

監査セクションに続く「categories」は、API URLで渡された選択されたカテゴリーの総合的なLighthouseスコアを提供します。

"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...

スコアは0から1の間の数値で、通常Lighthouseのレポートではパーセント表示されます。

• 0.9～1.0：良好
• 0.5～0.9：改善が必要
• 0.5未満：不良、緊急の対応が必要

「auditRefs」には、すべての評価指標と、各スコアの算出に使用された重み付けのリストが掲載されています。

analysisUTCTimestamp

最後に、解析時刻が報告されます。これはlighthouseResult.fetchTimeに表示される時間と同一のはずです。

各指標の有効活用

JSONで出力されたデータは保存しておき、テキストエディターで詳しく調べることをおすすめします。エディターによって、JSONフォーマッターが内蔵されているものや、プラグイン追加によって対応できるものもあります。あるいは、以下のような無料のオンラインツールを使用することも1つの方法です。

• JSON Formatter & Validator
• JSON Formatter
• jsonformatter.io

特に役立つと思われる指標を以下に挙げます。必要に応じて、URLにカテゴリー指定パラメータを追加することをお忘れなく。

概要指標

0から1までの総合スコアを確認できます。

パフォーマンス指標

これには、Core Web Vitalsのスコアが0から1まで含まれています。

その他、便利な性能スコアもあります。

通常、以下のような実際の数値や単位を取得できます。

• 総ページサイズ：lighthouseResult.audits.total-byte-weight.numericValue（例：450123）
• 総ページサイズの単位：lighthouseResult.audits.total-byte-weight.numericUnit（例：「byte」）

「displayValue」には、数値と単位を含む分かりやすいメッセージが含まれます。

• サーバー応答時間についてのメッセージ：lighthouseResult.audits.server-response-time.displayValue（例：「Root document took 170 ms」）
• DOM内の要素数についてのメッセージ：lighthouseResult.audits.dom-size.displayValue（例：「543 elements」）

ノーコード版パフォーマンスダッシュボード作成方法

ライブAPIフィードは、Microsoft Excelなどの様々なシステムで読み込み・処理が可能です（ただし、Google スプレッドシートではJSONに対応するために、プラグインやマクロコードの追加が必要。XMLは標準で対応）。

この項目では、総合パフォーマンススコアをMicrosoft Excelにインポートする方法をご紹介します。まず、新しいブックを作成して「データ」タブに移動し、「Web から」を選択します。PageSpeed Insights APIのURLを入力し、OKをクリックします。

ダイアログが表示されるので、認証の種類をデフォルト（匿名）のままにし、「接続」をクリックしてPower Query エディターに進みます。

「lighthouseResult」の右側にある「Record」をクリックします。同様に、「Category」と「Performance」をクリックして、JSONオブジェクト階層を詳細表示します。

右クリックし、「テーブルに挿入」をクリックします。

「OK」をクリックする前に、表の見出しにあるフィルターボタンをクリックすると、「score」以外の項目を除外することができます。

最後に「閉じて読み込む」をクリックすると、スプレッドシートにライブデータのスコアが表示されます。

他の指標についても、同様の手順で追加可能です。

ウェブ版パフォーマンスダッシュボード作成方法

このCodePenのデモには、URLを入力し、PCまたはモバイル分析を選択して結果を取得できるフォームが用意されています。

このコードでは、PageSpeed InsightsのURLを作成し、APIを呼び出してから、さまざまな結果をサマリーテーブルにレンダリングします。

フォームが送信されると、非同期関数startCheck()がトリガーされます。この関数は送信イベントをキャンセルし、以前の結果を非表示にします。

// APIリクエストの開始
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);

そして、フォームデータからapiURLを構築し、フィールドを無効にします。

  const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;

Fetch APIを使用し、PageSpeed URLにアクセスしてレスポンスを取得した後、そのJSON文字列をJavaScriptオブジェクトに変換します。「try」「catch」ブロックを使って、もし失敗した場合には、それを捉えます。

  try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();

得られた結果オブジェクトは、showResult()関数に渡されます。この関数は、必要なプロパティを抽出し、結果テーブルやdata-point属性をPageSpeed APIプロパティに設定されている他のHTML要素に適用します。

<td data-point="lighthouseResult.categories.performance.score"></td>

結果を表示し、tryブロックを閉じます。

    // output result
showResult(result);
show(status, false);
show(resultTable);
}

最後に、catchブロックでエラーを処理し、フォーム入力欄を再び有効化して、次のテストを実行できるようにします。

  catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}

さらなる開発の可能性

先に示したコード例では、リクエストに基づきPageSpeed Insights APIから結果を取得します。このレポートはLighthouseより設定の自由度が高いものの、実行は手動で行う必要があります。

小規模なアプリケーションを開発し、独自のダッシュボードを構築することも可能です。まず、PageSpeed Insights APIを呼び出し、検証されたURLとその時の日付・時刻に基づいて、結果のJSONを新たなデータベースレコードに格納するようにします。多くのデータベースがJSONに対応していますが、MongoDBが特に適しています。cronジョブを使用すれば、指定した時間にアプリケーションを実行することもできます。

サーバーサイドアプリケーション化することで、レポートの要件に応じた独自のREST APIを設計できます。これはクライアント側のJavaScriptによって呼び出され、時間の経過に伴うパフォーマンスの向上を示す表やグラフを表示することができます。

大量のデータで複雑なレポートを作成する場合は、新たなデータが取得可能になった時点で、1日1回数値を事前に計算しておくことをお勧めします。パフォーマンス改善を確認するために、数分かけてレポートを作成するのは本末転倒といったところです。

まとめ

ChromeのLighthouseツールは大変便利ですが、複数のページを頻繁に検証する場合には不向きです。その点で、PageSpeed Insights APIはプログラムによるサイトパフォーマンスの分析を可能にし、次のようなメリットを提供します。

• パフォーマンステストを自動化でき、テストを忘れることがなくなる。
• Googleサーバーで処理されるため、ローカル端末やネットワークなどの速度要因の影響が少ない結果が得られる。
• Lighthouseでは利用できない情報も得られる。
• 重要な指標を定期的に記録し、長期にわたって監視することで、ページパフォーマンスが時間とともにどのように向上しているか追跡できる。
• パフォーマンス、アクセシビリティ、SEOに関する情報がシンプルなレポートで表示できるため、開発者、管理者、クライアントを含む全員がすぐに情報を把握できる。

Craig Buckler

Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.

• ウェブサイト
• LinkedIn
• Twitter
• YouTube