GA4のレポートが無料！　まずは《無料プラン》をお試しください

月額定額でレポート作り放題の《Proプラン》はこちら

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

Looker Studio PageSpeed Insights

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

ウェブサイトの表示速度はサイトのパフォーマンスを評価する指標としてとても重要です。

みなさんもGoolgeが提供するPageSpeed Insightsを利用してウェブサイトのパフォーマンスを調査しているかと思います。

このPageSpeed Insightsはウェブサイトの表示速度だけではなく、SEOに適しているかなどを多角的に測定してくれるので、この測定結果を参考にしてサイトの改善に役立てることも多いです。

PageSpeed Insights
https://pagespeed.web.dev/

しかし、ご存知のように上記サイトにアクセスしてURLを入力して計測結果が表示されるのを待つ、というの毎回毎回繰り返すのはとても手間がかかるのと、複数ページをチェックするとなるとなおさらです。

そこで今回はいくつかのツールを組み合わせてこのPageSpeed Insightsの計測結果を取得し、Looker Studioで可視化したいと思います。

使用するツール

今回使用するツールは以下になります。

PageSpeed Insights API以外は、Googleのアカウントをお持ちでしたら無料で利用できます。

※PageSpeed Insights APIはGoogle Cloud Platform（GCP）のアカウントが必要になりますが、無料枠での利用が可能です。

  • PageSpeed Insights API
  • Google Apps Script（GAS）
  • Googleスプレッドシート
  • Looker Studio

手順

  1. PageSpeed Insights APIを有効にする
  2. Googleスプレッドシートを用意する
  3. Google Apps Scriptを用意する
  4. Looker Studioからスプレッドシートに接続する
  5. Looker Studioで可視化する

それでは進めましょう。

１．PageSpeed Insights APIを有効にする

まず、このページにアクセスしてPageSpeed Insights APIを有効にしてAPIキーを取得します。

PageSpeed Insights API を使ってみる
https://developers.google.com/speed/docs/insights/v5/get-started

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

Google Cloud Platform（GCP）のプロジェクトを選択、または新規に作成して進みます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

下のようにAPIの準備ができたらAPIキーを表示させます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

ここで表示されるAPIキーは後ほど使用するので、コピーして保存しておきます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

２．Googleスプレッドシートを用意する

取得したデータを書き込んでいくスプレッドシートを用意します。

のちほど、このスプレッドシートにLooker Studioを接続します。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

３．Google Apps Scriptを用意する

用意したスプレッドシートのメニュー、「拡張機能」から「Apps Script」を選択します。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

Apps Scriptのエディタが開くので、コードを入力します。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

【コード】

このコードを入力します。

※シート名とURL、APIキーの部分はご自身のものに差し替えてください。

function myFunction() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName("シート名を入力する");
writeResult(sheet, getResult());
}

function getResult() {
const url = "ここにURLを入力する"
const result = UrlFetchApp.fetch(
'https://www.googleapis.com/pagespeedonline/v5/runPagespeed' +
`?url=${url}` +
"&locale=ja" +
"&strategy=desktop" +
`&key=ここにAPIキーを入力する`
);
return JSON.parse(result);
}

function writeResult(sheet, arr) {
const date = new Date();
const ExecDate = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

const performance = arr["lighthouseResult"]["categories"]["performance"];
const fcp = arr["lighthouseResult"]["audits"]["first-contentful-paint"];
const tti = arr["lighthouseResult"]["audits"]["interactive"];
const si = arr["lighthouseResult"]["audits"]["speed-index"];
const tbt = arr["lighthouseResult"]["audits"]["total-blocking-time"];
const lcp = arr["lighthouseResult"]["audits"]["largest-contentful-paint"];
const cls = arr["lighthouseResult"]["audits"]["cumulative-layout-shift"];

sheet.appendRow([
ExecDate,
performance["score"] * 100 + "%",
parseFloat(fcp["displayValue"]),
parseFloat(tti["displayValue"]),
parseFloat(si["displayValue"]),
parseFloat(tbt["displayValue"]),
parseFloat(lcp["displayValue"]),
cls["displayValue"]
]);

 

入力できたら保存して実行します。

初回のみ承認を求められるので、権限を確認して進めます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

実行ログにエラーなく「実行完了」と表示されればOKです。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

スプレッドシートを見ると、このようにデータが取得できているはずです。

※下のスプレッドシートは複数回、実行した結果なので複数行のデータがありますが、初めて実行する場合はデータは１行だけです。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

これでデータの準備ができましたので、Looker Studioで見やすく加工していきます。

４．Looker Studioからスプレッドシートに接続する

Looker Studioで新しいレポートを作成し、該当のスプレッドシートに接続します。

５．Looker Studioで可視化する

このように日ごとの各数値の推移が視覚的に把握しやすくなりました。

PageSpeed Insightsは日々変化しているため定期的にチェックして、もし表示速度に影響を及ぼしている要素を発見したら、できるだけ早く対応できるよう、数値の取得を自動化しておくのは有効です。

このレポートをメールで送信するように設定しておけば、毎日のチェックも簡単です。

自動データを取得するためにトリガーを設定する

最後にすべての設定が問題なく稼働しているか確認できたら、自動でGoogle Apps Scriptがデータを取得するようにトリガーを設定します。

データを取得する間隔は任意で調整してください。

これで常に最新のデータが反映されます。

Looker Studioでサイト表示速度（PageSpeed Insights）を見える化する

以上、Looker Studioでサイト表示速度（SiteSpeedInsights）を見える化する方法の解説でした。

記事に戻る

おすすめの記事

1 4