こんにちは、Customer Engineerの神谷です！親子丼は、モモ肉よりも高タンパクな胸肉派です。胸肉でも、日本酒と片栗粉を塗せば、加熱しても柔らかく仕上がります。個人的には、生姜を入れるのも好きです。

さて、今回は、PageSpeed Insights APIを使って複数のURLにまとめて処理を実行し、それぞれのURLごとに得られたコアウェブバイタルの結果を、Googleスプレッドシート（以下、スプレッドシート）にまとめて出力する方法をご紹介します。そもそもPageSpeed Insightsってなんぞやという方は、こちらの記事の冒頭をご覧ください。

PageSpeed Insights APIを使う意義

PageSpeed Insightsについてある程度ご理解いただけたら、話を前に進めます。今回のソリューションでは、PageSpeed Insights APIを使って複数のURLにまとめて処理を実行すると書きましたが、その意義は以下の2つが挙げられます。

1. GUIではURL1つずつしか実行できないがAPIならまとめてできる

実際にやってみればわかりますが、PageSpeed InsightsのGUIでは、URLを1つずつ入力してその結果を確かめるようになっており、複数のURLに対してまとめて実行することができません。そのため、サイトに存在する複数のページのコアウェブバイタルの数値を確かめようと思っても、かなりの手間がかかります。しかしPageSpeed Insights APIを使えば、一気にまとめて複数のページの結果を確認できて、非常に便利です。

2. 出力先や形式を自由に決められる

GUIでは画面に出た結果をそのまま見るだけですが、PageSpeed Insights APIをプログラムから利用すれば、その出力先や形式も自分で決められます。今回はスプレッドシートに出力しているものの、Slackに通知したりなど、他にも色々なアウトプットが考えられます。このように、用途や目的に合わせて自由に作れるのが、今回のソリューションに限らず、様々なAPIを使う大きなメリットの1つでしょう。

アウトプットイメージ

ここまでで、なぜPageSpeed Insights APIを使って複数のURLにまとめて処理を実行し、それをスプレッドシートに出力するのか、その意義をご理解いただけたと思います。続いて、最終的なアウトプットイメージについて見ていきましょう。

スクリーンショット2024-02-2710.29.09.png

スプレッドシートに、複数のURLが並び、そのURLごとにコアウェブバイタルやパフォーマンススコアが並んでいます。その結果に応じて色付けされていますが、これはスプレッドシートの条件付き書式を利用しています。端的に書けば、緑色が合格、黄色が要改善、赤色が不合格を表します。ただ、LCP・FID・CLSの3つが合格なら、右端のスコアはそこまで気にしなくてもいいかもしれません。また、2024年3月からコアウェブバイタルの項目が少し変わるものの、その詳細はここでは割愛します。

そしてこの処理を実現する、構成図は次の通りです。

スクリーンショット2024-02-2215.31.40.png

処理の流れとしては、極めてシンプルです。Craft Functionsを起動してサイトマップからURLを取得し、そのURLに対してPageSpeed Insights APIを使ってコアウェブバイタルの成果などを取得します。そしてその結果を成形し、スプレッドシートに出力するだけです。

注意点

前提として、次の点に注意をしてください。

PageSpeed Insights APIのリクエスト数には上限があります
- PageSpeed Insights APIを扱っている記事などを見たところ、1日の最大リクエスト数は25,000とのことです
- そのため、あまりにも測定するURLの数が多いと上限に達して処理が止まる可能性があります
- また、あくまでも1日での上限なので、数が25,000より少なくても一度にある程度の量のリクエストを送った場合は、エラーが出る可能性があります
事前にXMLサイトマップの作成が必要です
- 今回は測定するURLをXMLサイトマップから取得するため、自社のサイトで未作成の場合は事前に作成をお願いします
- WordPressなどのCMSの場合は、プラグインを使えば簡単に作成できます
- その他、サイトマップジェネレータを使用したり、プログラムを書いて作ることもできます
- 上記のAPIリクエスト数の上限を考えれば、サイトマップは全てのURLをまとめるよりも、月ごとに出した記事をまとめたサブサイトマップを作る形式にした方が、そのサブサイトマップごとに実行できて負荷を減らせるのでベターです

設定手順

設定の手順は次の通りです。

GCPプロジェクトでPageSpeed Insights APIとGoogle Sheets APIを有効化する
Googleサービスアカウントを作成してjsonキーを取得する
GCPプロジェクトでAPIキーを取得する
Googleサービスアカウントに対象スプレッドシートへの権限を付与する
GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する
PageSpeed Insights APIを利用し複数のURLのコアウェブバイタルの数値をスプレッドシートに出力するためのCraft Functionsのファンクションを作成する

順番に見てみましょう。

1. GCPプロジェクトでPageSpeed Insights APIとGoogle Sheets APIを有効化する

まず、PageSpeed Insights APIとGoogle Sheets APIを有効化します。その利用にあたっては、GCPプロジェクトを利用する必要があります。

スクリーンショット2024-02-0517.37.21.png
スクリーンショット2024-02-0517.38.09.png
スクリーンショット2023-08-1413.10.10.png

適当なGCPプロジェクトを作成または選択し、[APIとサービス > 有効なAPIとサービス > APIとサービスの有効化またはライブラリ] からPageSpeed Insights APIとGoogle Sheets APIを検索し、有効化します。

2. Googleサービスアカウントを作成してjsonキーを取得する

次に、同一GCPプロジェクトでGoogleサービスアカウントを作成します。後にそのアカウントを使ってスプレッドシートの認証をします。

[IAMと管理 > サービスアカウント > サービスアカウントを作成] から適当な名称のアカウントを作成します。

スクリーンショット2023-08-1413.15.34.png

作成したサービスアカウントを選択し、[キー > 鍵を追加 > 新しい鍵を作成] からJSON形式のキーファイルをダウンロードします。

スクリーンショット2023-08-1413.16.12.png

このキーファイルの中身を、後でCraft Secret Managerに登録する必要があるので、取っておいてください。

3. GCPプロジェクトでAPIキーを取得する

続いて同じGCPプロジェクト内で、APIキーを取得する必要があります。

スクリーンショット2024-02-0213.34.24.png
スクリーンショット2024-02-0213.35.15.png

APIとサービス > 認証情報の順にクリックします
上の方にある認証情報を作成をクリックし、APIキーを選択します
するとAPIキーが生成されるので、それをコピーします

取得したAPIキーはCraft Functions作成時に必要なので、忘れずに取っておきましょう。

4. Googleサービスアカウントに対象スプレッドシートへの権限を付与する

Google Sheets APIを有効化してサービスアカウントのjsonキーを取得しても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシートごとに、閲覧権限や編集権限を付与する必要があります。

スクリーンショット2024-02-1317.57.41.png

右上の共有をクリックします
Googleアカウントに権限を付与するのと同様に、サービスアカウントのメールアドレスを入力します
権限には、編集者を指定してください

5. GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する

Googleサービスアカウントの認証情報をCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。

[Craft > シークレット] からシークレットを新規作成
[名前] に、わかりやすい名前を入力
ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成
シークレット名をメモしておく

6. PageSpeed Insights APIを利用し複数のURLのコアウェブバイタルの数値をスプレッドシートに出力するためのCraft Functionsのファンクションを作成する

Craft Functionsのファンクションを作成します。作成手順は次の通りです。

[Craft > ファンクション > 新規作成 > テンプレートから作成] を選択
「 Craft FunctionsからPageSpeed Insights APIを利用し、複数のURLのコアウェブバイタルの数値をGoogleスプレッドシートに出力する方法 」というテンプレートを検索し[取得]ボタンをクリック
[反映] ボタンをクリック
[変数] タブで次の変数の値を設定する
- SERVICE_ACCOUNT_KEY_SECRET
  - 利用するGoogleサービスアカウントのJSONキーを登録したシークレットの名前です
- GCP_API_KEY
  - GCPプロジェクトで発行したAPIキーです
- SITE_MAP_URL
  - スコアを取得したいWebサイトのサイトマップURLです
- SPREADSHEET_ID
  - 出力先となるスプレッドシートのシートIDです
- SHEET_NAME
  - 出力先となるスプレッドシートのシート名です
- [設定 > ファンクションの有効化] にチェックを付けて [保存]

スクリーンショット2024-02-2812.52.43.png

これらの値は直接Craft Functionsのコード内に埋め込むこともできますが、こうして変数として指定することで、コードをいじらずとも変更できます。特にSITE_MAP_URLの中身を変更すれば、自社のサイトだけでなく、他のサイトのコアウェブバイタルのデータも取得できます。

なお、テンプレートのソースコードはGitHubで公開しています。
craft-codes/craft-functions/page-speed-insights-multiple-urls-spreadsheet at main · plaidev/craft-codes

ここから、Craft Functionsのコードで重要な部分について、かいつまんでご説明します。

// パフォーマンスデータを取得する関数
async function getPerformanceData(pageUrl, strategy, logger) {
  try {
    const url = buildPageSpeedApiUrl(pageUrl, strategy);
    const data = await fetchData(url);
    return {
      lcp: formatFieldData(data.loadingExperience?.metrics?.LARGEST_CONTENTFUL_PAINT_MS?.percentile ?? 'none', 1000),
      fid: formatFieldData(data.loadingExperience?.metrics?.FIRST_INPUT_DELAY_MS?.percentile ?? 'none', 1),
      cls: formatFieldData(data.loadingExperience?.metrics?.CUMULATIVE_LAYOUT_SHIFT_SCORE?.percentile ?? 'none', 100),
      score: Math.round((data.lighthouseResult?.categories?.performance?.score ?? 0) * 100)
    };
  } catch (error) {
    logger.error(`[${strategy}] PageSpeed Insights APIの呼び出し時にエラーが発生しました:`, error.message);
    return null;
  }
}

ここでは、サイトマップから取得したURLに対してPageApeed Insights APIを使い、コアウェブバイタルの数値を取得します。サイトマップ内にURLが10個あれば、この処理が10回繰り返されます。

// URLごとのパフォーマンスデータ取得処理を実行する関数
async function fetchPerformanceData(urls, logger) {
  try {
    const performanceDataPromises = urls.map(url =>
      Promise.all([
        getPerformanceData(url, 'desktop', logger),
        getPerformanceData(url, 'mobile', logger),
      ])
    );

    return await Promise.all(performanceDataPromises);
  } catch (error) {
    logger.error('パフォーマンスデータの取得中にエラーが発生しました。', error);
  }
}

// スプレッドシートにデータを書き込む関数
async function updateSpreadsheetWithData(spreadsheetId, sheetName, urls, performanceDataResults, authClient, logger) {
  try {
    const sheetData = [];

    performanceDataResults.forEach(([pcData, mobileData], index) => {
      const url = urls[index];
      if (pcData && mobileData) {
        sheetData.push([
          url,
          `${pcData.lcp}秒`,
          `${mobileData.lcp}秒`,
          `${pcData.fid}ミリ秒`,
          `${mobileData.fid}ミリ秒`,
          pcData.cls,
          mobileData.cls,
          `${pcData.score}点`,
          `${mobileData.score}点`,
        ]);
      }
    });

    if (sheetData.length > 0) {
      const range = `${sheetName}!A2`;
      await writeToSheet(spreadsheetId, range, sheetData, authClient);
    }
  } catch (error) {
    logger.error('スプレッドシートの更新中にエラーが発生しました。', error);
  }
}

ここでは、URLごとにコアウェブバイタル・パフォーマンススコアを取得し、必要な項目を揃えてスプレッドシートに出力しています。実際のPageSpeed InsightsのGUIと表記を合わせて人の目にもわかりやすくするために、LCPやFIDなどには単位をつけています。

あとは、Craft Functionsを実行するための設定も必要になります。今回は、KARTEで閲覧や購入など何かイベントが発生した際に発動するのではなく、1ヶ月か2ヶ月程度に1回の定期実行が一般的かと思われるので、その設定方法をご紹介します。

スクリーンショット2024-02-1318.25.41.png

Craft Functionsの設定タブを開きます
スケジュールを有効化し、cron形式（JST）で実行時間を指定します

cron形式（JST）についてここで詳しくは説明しませんが、例えば毎月1日の11時に実行したい場合は、0 11 1 * *と入力して保存してください。とりあえずすぐ動かして実行結果を確認したい場合は、1分ごとに毎回実行される* * * * *を入力してみてください。入力欄の下に例があるので、そんなに難しくはないと思います。

ここまでできたら、Craft Functionsを有効化して保存してください。

実際に動かしてみる

実際に動作を確認してみましょう。

問題なく設定できていれば、次のような表示が実現できるはずです。

スクリーンショット2024-02-2710.29.09.png

サイトマップに登録されているURLの分だけ処理が実行され、その横のセルにはコアウェブバイタルの数値などがずらっと並んでいます。条件付き書式を使って色付けすれば、どれが合格・要改善・不合格なのかも一目瞭然ですね。これを元にしてコアウェブバイタルの数値が芳しくないものがあれば、必要な対策を考えていきましょう。

おわりに

今回は、Craft FunctionsからPageSpeed Insights APIを利用し、複数のURLのコアウェブバイタルの数値をGoogleスプレッドシートに出力する方法をご紹介しました！こうすれば、サイト上のどのURLにコアウェブバイタルの問題があるか、一目瞭然ですね。このソリューションが、皆さんのSEO対策を進めるうえで、少しでもお役に立てれば幸いです。

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい