【備忘録】LookerStudio×GASでPageSpeed Insight のダッシュボードを作ってみた

こんにちは。
今回はLookerStudioとGASでPageSpeed InsightのパフォーマンススコアとCore Web Vitals の各種指標を定点観測できるダッシュボードを作成したので、ざくっとご紹介します。

作成の背景

今回このダッシュボードの作成を試みた背景は以下の通り。

• ページの表示速度改善するので、効果検証のために定点観測したい

• 計測したタイミングのスコアしか出ないから時系列で追えるとベスト

• でもいちいち取得しないといけないの面倒

というわけで、スプレッドシートにGASを使ってPageSpeed InsightのAPIをたたき、毎日数字をとってきてもらうことにしました。

作成手順

作成手順の大まかな流れは以下の通り。

1. スプレッドシート上でGASを設定

2. LookerStudioでダッシュボード化

正直スプレッドシート上で取得してグラフ化するだけでも全く問題ないので、2番目はほぼ趣味というかプチこだわりです。

スプレッドシート上でGASを設定

スプレッドシートの拡張機能から、GASを開きます。
新しいスクリプトとして、以下を作成。スクリプトの名称はなんでもかまいません。

function recordPageSpeed() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var urls = ["https:/hogehoge.jp/fugafuga/"];  // 分析したい URL
  var devices = ["desktop", "mobile"];
  var apiKey = '';  // APIキーが必要な場合はここに入力。空でも動く
  var today = Utilities.formatDate(new Date(), "GMT", "yyyy-MM-dd");  // 日付のフォーマット

  urls.forEach(function(url) {
    devices.forEach(function(device, deviceIndex) {
      try {
        var apiResponse = UrlFetchApp.fetch(https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&strategy=${device}&key=${apiKey}`, {
          muteHttpExceptions: true  // フルエラーメッセージを取得
        });
        var result = JSON.parse(apiResponse.getContentText());

        if (apiResponse.getResponseCode() != 200) {
          throw new Error(API Error: ${result.error.message});
        }

        var performanceScore = result.lighthouseResult.categories.performance.score;
        var fcp = result.lighthouseResult.audits['first-contentful-paint'].numericValue;
        var si = result.lighthouseResult.audits['speed-index'].numericValue;
        var lcp = result.lighthouseResult.audits['largest-contentful-paint'].numericValue;
        var fid = result.lighthouseResult.audits['max-potential-fid'].numericValue;
        var cls = result.lighthouseResult.audits['cumulative-layout-shift'].numericValue;

        var rowIndex = sheet.getLastRow() + 1;  // 次の空行を取得
        sheet.appendRow([today, url, device, performanceScore * 100, fcp, si, lcp, fid, cls]);
      } catch (e) {
        Logger.log(e.message);
        Logger.log('Failed URL: ' + url);
      }
    });
  });
}`

デバイス別、日付ごとで以下の情報を取得しています。

• パフォーマンス スコア

• FCP

• SI

• LCP

• FID

• CLS

もちろんほかの数値も取得可能です。

作成出来たら、該当のスクリプトを毎日動かすようにトリガー設定しておきます。

GASのトリガー設定

上記の設定が完了すると、その日からデータがたまっていきます。
過去データが取れないので、データとしては設定した日が最初になります。

しばらくすると、スプレッドシート上で以下のような感じで、データがたまっていきます。

実際にデータがたまった状態のスプレッドシート

ここまでくれば、あとは個人が煮るなり焼くなり好きにすればOKです。

LookerStudioでダッシュボード化

ダッシュボードの完成イメージはこちら。

PSIサマリ ダッシュボード

今回はテストも兼ねていたので、結構シンプルにしています。
左にタイトル、右に期間指定のコントロールは自分のテンプレです。

上部のグラフはパフォーマンススコアのデイリーです。
月間平均とか出そうかと思ったんですが、現時点でどうか、ということが主目的になりやすいので、今回はデイリーの実績だけでよいかと判断。
目安として、パフォーマンススコアの評価を基準線としてグラフに追加しています。

下部のテーブルは、日付ごとの各種数値です。
ここも今はシンプルにしていますが、評価基準に応じて、条件付き書式を設定したりなど改善の余地はまだありです。

とはいえ、難しい分析をするような指標でもないので、とりあえず定点観測が自動化できればそれで十分だと思ったのでこれくらいで完結予定です。

所感

今回もばっちりGPTさんにお手伝いいただいています。
HTMLやCSS、JavaScriptの基礎的な知識があれば、自分で詳細なコードをかけなくてもある程度やってもらえますね。
指示出しがうまくできるかというのがポイントだと思います。

PSIの定点観測は有料でも販売されていますが、正直買う意味はないです。
GPTによって誰でも簡単にAPIを使ったスクリプトが書けるようになっています。コーディングも民主化が進むのではないでしょうか？と感じるようなテーマでした。