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

ページのパフォーマンスを監視し、改善を評価するのに役立つツールがあります。 最高のものの 1 つは PageSpeed Insights です。 Web アプリケーションとして、また Chrome の DevTools の Lighthouse タブとして利用できます (同じ DevTools が Edge、Opera、Brave、および Vivaldi でも利用可能です)。

Web ページのパフォーマンスは、これまで以上に重要になっています。 ユーザーは、デスクトップ アプリケーションに匹敵する滑らかで応答性の高いエクスペリエンスを期待しています。 さらに、Google の Core Web Vitals はページのパフォーマンスを測定し、PageRank と検索エンジン最適化の取り組みに影響を与えます。

WordPress はすべての Web サイトの 3 分の 1 以上を実行していますが、効果のないホスティング、遅いテーマ、プラグインへの過度の依存によってパフォーマンスが影響を受けています。 ほとんどの問題は、優れた Web ホストに切り替えて、ベスト プラクティスのパフォーマンス手法を使用することで解決できます。

灯台へのアクセス

調べたいページを開いてCtrl/Cmd + Shift + Iを押すか、メニューの[その他のツール]から[開発者ツール]を選択して、Lighthouse を起動します。 Lighthouseタブに切り替えて、 Analyze Page Loadボタンをクリックします。 数秒後に結果が表示されます。

トップレベルのパーセンテージにドリルダウンして、既知の問題に対処する詳細情報とヒントを見つけることができます。 このツールは非常に価値がありますが、欠点もあります。

• テストするページごとに手動で実行を開始する必要があります。
• 時間の経過とともに要因がどのように改善または悪化したかを記録することは容易ではありません。
• 確認するデータが多く、間違いが起きやすい。
• 技術的な詳細は、開発者向けに提供されています。 進捗状況の概要をすばやく確認したいクライアントやマネージャーにとっては、圧倒される可能性があります。
• Lighthouse の実行は、誤った仮定につながる可能性があるローカル デバイスとネットワークの速度の影響を受ける可能性があります。

PageSpeed Insights API は、これらの問題を解決する方法を提供し、テストを自動化し、記録し、比較できるようにします。

PageSpeed Insights API とは?

Google は無料の PageSpeed Insights REST API を提供しています。この API は、すべての Lighthouse メトリックなどを含む JSON 形式でデータを返します。 ページの実行を自動化し、結果データを保存し、経時的な変更を確認し、必要な正確な情報を表示することができます。

PageSpeed Insights API は、Google がサイトをどのように認識するかをエミュレートします。 数日ごとに、またはパフォーマンスの更新をリリースするたびに、レポートを実行できます。

結果は役に立ちますが、必ずしも実際のユーザー エクスペリエンスを示すものではありません。 ユーザーのすべてのデバイスとネットワーク全体で実際のパフォーマンスを監視する場合は、ブラウザー パフォーマンス API を使用することをお勧めします。

PageSpeed Insights API クイックスタート

次のアドレスを Web ブラウザーにコピーし、 urlを編集して、ページのパフォーマンスを評価します。

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

Firefox には JSON ビューアが組み込まれているため理想的ですが、Chrome には同じ機能を提供する拡張機能があります。 Lighthouse の全体的なパフォーマンス スコアを以下に示します。

独自のページと設定の API URL クエリ文字列を変更できます。 唯一の必須パラメーターはurlです。

url=https://mysite.com/page1

デスクトップ テストはデフォルトで実行されますが、次のように明示的に要求できます。

strategy=desktop

または、次の方法でモバイルに切り替えます。

strategy=mobile

関心のあるカテゴリを 1 つ以上指定しない限り、パフォーマンス テストのみが実行されます。

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

特定の言語は、フランス語などのロケールを設定することで定義できます。

locale=fr-FR

Google アナリティクス キャンペーンの詳細は、次の方法で設定できます。

utm_campaign=<campaign>
utm_source=<source>

このサービスは頻度の低いリクエストに対しては無料ですが、短期間に同じ 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 の結果

通常、テストでは、選択したカテゴリ、ページ内のアセットの数、およびスクリーンショット (base64 形式で埋め込まれた) の複雑さに応じて、約 600Kb の JSON データが返されます。

データの量は気が遠くなり、重複もあり、結果のドキュメントは必ずしも明確ではありません。 以下で説明するように、JSON は 4 つのセクションに分割されます。

ローディングエクスペリエンス

これらは、エンド ユーザーのページ読み込みエクスペリエンスに対して計算された指標です。 Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE、FIRST_CONTENTFUL_PAINT_MS、FIRST_INPUT_DELAY_MS などの情報が含まれます。 詳細と「カテゴリ」値は、測定が行われなかった場合、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 と同じであり、トラフィックの少ないサイトでは数字に違いは見られません。

灯台結果

これは最大のセクションで、Lighthouse のすべての指標が含まれています。 テストに関する情報を提供します。

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

これに続いて、unused-javascript、unused-css-rules、total-byte-weight、redirects、dom-size、most-contentful-paint-element、server-response-time、network などの多くのセクションを含む「監査」セクションが続きます。 -requests、cumulative-layout-shift、first-meaningful-paint、スクリーンショットのサムネイル、フルページのスクリーンショット。

ほとんどの監査メトリクスには、「overallSavingsBytes」や「overallSavingsMs」などの要素を含む「詳細」セクションがあり、パフォーマンスの改善を実装した場合のメリットを見積もっています。

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

「メトリクス」セクションは、「アイテム」配列内のすべてのメトリクスの概要を提供します。

 "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" },

「監査」セクションの後には「カテゴリ」が続き、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」セクションには、すべてのメトリックのリストと、各スコアの計算に使用される重み付けが表示されます。

分析UTCTimestamp

最後に、分析時間が報告されます。 これは、lighthouseResult.fetchTime に示されている時間と同じでなければなりません。

便利な JSON 結果メトリクス

JSON の結果を保存して、テキスト エディターで調べることをお勧めします。 JSON フォーマッタが組み込まれているか、プラグインとして利用できるものもあります。 または、次のような無料のオンライン ツールを使用することもできます。

• JSON フォーマッターとバリデーター
• JSON フォーマッタ
• jsonformatter.io

次のメトリックが役立つ可能性があります。 必要に応じて、関連するカテゴリ オプションを URL に設定することを忘れないでください。

要約指標

0 から 1 までの総合スコア:

パフォーマンス指標

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

その他の有用なパフォーマンス スコアは次のとおりです。

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

• lighthouseResult.audits.total-byte-weight.numericValue –
  総ページサイズ、例えば 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  合計ページ サイズに使用される単位、たとえば「バイト」

または、「displayValue」には通常、数字と単位の両方を含む読み取り可能なメッセージが含まれています。

• lighthouseResult.audits.server-response-time.displayValue –
  応答時間に関するメッセージ、たとえば「ルート ドキュメントに 170 ミリ秒かかりました」
• lighthouseResult.audits.dom-size.displayValue –
  DOM の要素数に関するメッセージ、たとえば「543 要素」

ノーコード パフォーマンス ダッシュボードを作成する

ライブ API フィードは、Microsoft Excel を含む多くのシステムで読み取って処理できます。 (やや奇妙なことに、Google スプレッドシートは追加のプラグインやマクロ コードがなければ JSON フィードをサポートしていません。XML はサポートしています。)

ライブの全体的なパフォーマンス スコアを Excel にインポートするには、新しいスプレッドシートを開始し、 [データ]タブに切り替えて、 [Web から]をクリックします。 PageSpeed Insights API の URL を入力し、[OK] をクリックします。

次のダイアログで[接続]をクリックし、デフォルト (匿名) 設定のままにします。 クエリ設定ツールに進みます。

ライトハウスの結果メトリックの右側にある[記録]をクリックします。 次に、カテゴリとパフォーマンスで同じものをクリックして、JSON オブジェクト階層をドリルダウンします。

右クリック メニュー オプションの上部にある[表へ]アイコンをクリックします。

次に、表の見出しのフィルター矢印をクリックして、スコア以外のすべてを削除してから、 [OK] をクリックします。

最後に、 [Close & Load]をクリックして、スプレッドシートにライブ パフォーマンス スコアを表示します。

関心のある他の指標についても同じプロセスに従うことができます。

Web パフォーマンス ダッシュボードを作成する

このCodepen デモンストレーションでは、URL を入力し、デスクトップまたはモバイル分析を選択して結果を取得できるフォームを提供します。

このコードは PageSpeed Insights URL を作成し、API を呼び出してから、さまざまな結果を要約テーブルにレンダリングします。これは、標準の Lighthouse レポートよりもすばやく表示できます。

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

 // make API request 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()関数に渡されます。 これにより、プロパティが抽出され、結果テーブルまたは PageSpeed API プロパティに設定された data-point 属性を持つその他の 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 を呼び出し、結果の JSON をテスト済みの URL と現在の日付/時刻に対して新しいデータベース レコードに格納する小さなアプリケーションを作成するのが実用的な場合があります。 ほとんどのデータベースは JSON をサポートしていますが、MongoDB はこのタスクに最適です。 cron ジョブは、指定された時間にアプリケーションを呼び出すことができます。たとえば、1 日 1 回、早朝に呼び出すことができます。

サーバー側アプリケーションは、レポート要件に合わせて独自の REST API を実装できます。たとえば、2 つの日付間の特定のパフォーマンス メトリックの変化を返します。 クライアント側の JavaScript から呼び出して、時間の経過に伴うパフォーマンスの向上を示す表またはグラフを表示できます。

大量のデータを含む複雑なレポートを作成する場合は、新しい PageSpeed データが利用可能になった時点で、1 日に 1 回数値を事前に計算することをお勧めします。 結局のところ、生成に数分かかるレポートでパフォーマンスがどのように向上しているかを示す必要はありません。

まとめ

Chrome の Lighthouse ツールは素晴らしいですが、多くのページを頻繁に評価するのは面倒です。 PageSpeed Insights API を使用すると、プログラム手法を使用してサイトのパフォーマンスを評価できます。 メリット：

• パフォーマンス テストは自動化できます。 テストを実行することを忘れることはできません。
• 結果は Google サーバーで収集されるため、ローカル デバイスとネットワーク速度の要因による影響は少なくなります。
• メトリクスには、Lighthouse では通常利用できない情報が含まれています。
• 重要な指標を長期にわたって記録および監視して、更新ごとにページのパフォーマンスが向上していることを確認できます。
• パフォーマンス、アクセシビリティ、および SEO 情報を簡易レポートに表示できるため、開発者、マネージャー、およびクライアントが一目で確認できます。