GoogleのPageSpeed Insightsは、ウェブサイトのパフォーマンスを測定し、改善提案を提供するツールです。この記事では、Google スプレッドシートとGoogle Apps Scriptを使用して、自動的にPageSpeed Insightsのスコアを継続的に取得し、記録する方法を紹介します。
前提条件
- Googleアカウントを持っていること。
- Google Cloud PlatformでPageSpeed Insights APIのキーを取得していること。
手順1: PageSpeed Insights APIキーの取得
まず、Google Cloud PlatformでAPIキーを取得する必要があります。
- Google Cloud Platformにアクセス: Google Cloud Platform にログインします。
- 新しいプロジェクトの作成: 「プロジェクトを作成」ボタンから新しいプロジェクトを作成します。
- APIライブラリへアクセス: 「APIとサービス」>「ライブラリ」からPageSpeed Insights APIを検索し、選択します。
- APIの有効化: 「有効にする」ボタンをクリックします。
- APIキーの生成: 「認証情報を作成」ボタンから「APIキー」を選択し、生成されたキーをコピーします。
手順2: Google スプレッドシートの準備
次に、データを記録するGoogle スプレッドシートを準備します。
- 新しいスプレッドシートの作成: Googleドライブで新しいスプレッドシートを作成します。
- URL列の設定: スプレッドシートの1行目のB列以降に、PageSpeed Insightsのスコアを取得したいウェブサイトのURLを入力します。今回はデスクトップと携帯電話で列ごとにセルを分けたいので、2列ごとにURLを記載するようにしています。
手順3: Google Apps Scriptのコーディング
スプレッドシートで「ツール」>「スクリプト エディタ」を開き、次のスクリプトを記述します。
function getPageSpeedScores() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lastColumn = sheet.getLastColumn();
var urls = sheet.getRange(1, 2, 1, lastColumn).getValues()[0].filter((_, index) => index % 2 == 0);
var currentTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy/MM/dd HH:mm:ss");
var newRow = sheet.getLastRow() + 1;
var results = Array(lastColumn).fill(""); // 列の数だけ空文字列で配列を初期化
results[0] = currentTime; // A列に現在時刻をセット
for (var i = 0; i < urls.length; i++) {
var urlIndex = 1 + (i * 2); // B列、D列、F列... からスタート
if (urls[i]) {
var desktopScore = getPageSpeedInsight(urls[i], 'desktop');
var mobileScore = getPageSpeedInsight(urls[i], 'mobile');
results[urlIndex] = desktopScore;
results[urlIndex + 1] = mobileScore;
}
Utilities.sleep(30000); // リクエスト後に30秒の遅延を追加
}
sheet.getRange(newRow, 1, 1, results.length).setValues([results]);
}
function getPageSpeedInsight(url, strategy) {
var apiKey = 'API_Key'; // 実際のAPIキーを設定してください
var apiURL = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=' + encodeURIComponent(url) + '&strategy=' + strategy + '&key=' + apiKey;
try {
var response = UrlFetchApp.fetch(apiURL);
var json = JSON.parse(response.getContentText());
return json.lighthouseResult.categories.performance.score * 100;
} catch (e) {
Logger.log("Error fetching PageSpeed data for URL: " + url + ". Error: " + e);
return "エラー";
}
}スクリプトの詳細
getPageSpeedScores関数: スプレッドシートの各URLに対してPageSpeed Insights APIを呼び出し、結果を新しい行に記録します。getPageSpeedInsight関数: 指定されたURLとデバイスタイプ（デスクトップまたはモバイル）でAPIを呼び出し、スコアを返します。
手順4: スクリプトの実行とトリガー設定
スクリプトを手動で実行するか、または特定の時間（例：6時、12時、18時）に自動実行するために時間ベースのトリガーを設定します。
トリガーの設定方法
- トリガー画面へ移動: スクリプトエディタで「時計」アイコンをクリックします。
- 新しいトリガーの追加: 「トリガーを追加」を選択し、適切な設定でトリガーを作成します。
- 時間を設定: 「日付ベースのタイマー」で指定された時刻（6時、12時、18時）を複数選択します。これは一日数回取得することでエラーが発生したときのリスクヘッジ、及び取得タイミングで数値が異なるページスピードインサイトの特性を考慮した上での対応です。
まとめ
うまく数値を取得できた場合、自動的に行を追加して記述されていきます。
こちらの手法をベースに様々な情報取得を自動化できるので、試してみると良いかもしれません。
注意点
- APIのレート制限に注意して、適切な待機時間を設けてください。今回は意図的に30秒ほど空けるようにしていますが、即レスが必要な内容であればもっと短く、簡易的な内容にすることでエラーを防ぐことができます。
- スプレッドシートに正確なURLを入力することが重要です。
- 各ツール・サービスごとに発生するリスクやなにかしら発生した不利益、紹介したコードについて一切の責任は負いません。
以上の手順で、Google スプレッドシートを使用してPageSpeed Insightsのスコアを自動的に取得し、記録することができます。これにより、ウェブサイトのパフォーマンス追跡が容易になります。
