GASからPageSpeed Insights APIを使って表示速度の記録を行う方法

# はじめに
この記事は「[Ateam LifeDesign Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ateam-life-design)」で完走賞を狙って25記事書いているうちの12日目の記事です。今年も完走目指して頑張るぞ！

# GASを使ってサイトの表示速度を定期的に記録する
Googleでは[PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started?hl=ja)が提供されており、これを使うことで以下のことが実現できます。
- ウェブページのパフォーマンス測定
- ページのパフォーマンス、アクセシビリティ、SEO を改善する最適化案を確認
- ページをプログレッシブ ウェブアプリに変換する方法について確認
今回はGASからこのAPIを呼び出してページのパフォーマンス測定をしてスプレッドシートに記録していきます。

# 作るもの
弊社が運営ている[イーデス](https://www.a-tm.co.jp/top/)というサイトについて、毎日このページのパフォーマンスを測定してスプレッドシートに自動で記録するようにしていきます。

![スクリーンショット 2023-12-10 20.57.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/fa79c45a-9d7f-eb9a-2484-69deadd8b98c.png)

1日1回定期実行してここに1行ずつ追加されていくイメージです。

# 準備

まずはPageSpeed Insights APIのAPIキーを取得します。APIキーはなくても動くのですが、自動化した方法でAPIを使用して、1秒間に複数回クエリを作成する場合はAPIキーが必要ということなので今回は取得しておこうと思います。

![スクリーンショット 2023-12-10 20.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/780665ec-1af3-50ba-159c-7ebcc100beab.png)

[こちら](https://developers.google.com/speed/docs/insights/v5/get-started?hl=ja)にアクセスして「キーを取得する」をクリック。

![スクリーンショット 2023-12-10 20.43.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/1d74d0d5-f738-5740-a651-dd9997c256db.png)
GCPのプロジェクトを選択する画面が出てきます。今回は新たなプロジェクトを作成します。

![スクリーンショット 2023-12-10 20.44.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/f47a946f-623a-99e6-4a98-f3d4d25c705e.png)
APIキーが取得できました。ここで取得したキーはあとでコード内で使うのでGASのスクリプトプロパティに登録します。スクリプトプロパティへの登録の仕方は[こちら](https://qiita.com/kakakaori830/items/f3c1a1539b875d933b7a#webhook-url%E3%82%92%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B)の記事に詳しく記載しているので参考にしてください。

![スクリーンショット 2023-12-10 20.48.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/8190e17f-cb54-cc88-2e4c-cdb65fe039c5.png)
今回は`PageSpeed_Insights_API_Key`という名前でキーを登録しておきました。

# GASを書いていく

```javascript
  const API_KEY = PropertiesService.getScriptProperties().getProperty('PageSpeed_Insights_API_Key');
  const URL = "https://www.a-tm.co.jp/top/" // 対象となるサイトのURL

  const response = UrlFetchApp.fetch(
    'https://www.googleapis.com/pagespeedonline/v5/runPagespeed' +
    `?url=${URL}` +
    "&locale=ja" +
    `&key=${API_KEY}`
  );

  var result = JSON.parse(response.getContentText());
  ```
APIキーは先程スクリプトプロパティに登録したものを`PropertiesService.getScriptProperties().getProperty()`で呼び出しています。こうすることでキーを安全に取り扱うことができます。
`https://www.googleapis.com/pagespeedonline/v5/runPagespeed`に対して`url`プロパティを渡すだけでもレスポンスを得ることができますが、今回はAPIキーを使うことにしたので`key`プロパティも渡すようにしています。また`locale`で`ja`を指定することでレスポンスの中身を日本語にして受け取ることができます。

レスポンスはJSONオブジェクトで帰ってくるので`JSON.parse`してこれ以降の処理で扱いやすいようにしておきます。

```javascript
  var currentDate = new Date();
  sheet.appendRow([
    currentDate, 
    result.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
    result.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category,  
    result.lighthouseResult.audits['first-contentful-paint'].displayValue,
    result.lighthouseResult.audits['speed-index'].displayValue,
    result.lighthouseResult.audits['interactive'].displayValue,
    result.lighthouseResult.audits['first-meaningful-paint'].displayValue,
  ]);

```

あとはレスポンス結果を記録していくだけです。
1列目に実行日を記録しておきたかったので`new Date()`の結果を含めるようにしています。このAPIでは様々な値を取得することができるのでレスポンスの詳細については[こちら](
https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed?hl=ja#response)を参考にしてください。
記録したいレスポンスを含めたら`sheet`に対して`appendRow`することで最終行に追記するようにしておきます。

あとはこの関数をトリガーに登録すれば、毎日決まった時間にこの処理を実行することが出来るようになります。

![スクリーンショット 2023-12-10 21.09.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/8323f498-e212-984f-1f21-ee958243d8e5.png)


# 完成品がこちら

## GASのコード
```javascript
function saveSpeedToSheet() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('SpeedData'); // データを保存するシート名

  const API_KEY = PropertiesService.getScriptProperties().getProperty('PageSpeed_Insights_API_Key');
  const URL = "https://www.a-tm.co.jp/top/"

  const response = UrlFetchApp.fetch(
    'https://www.googleapis.com/pagespeedonline/v5/runPagespeed' +
    `?url=${URL}` +
    "&locale=ja" +
    `&key=${API_KEY}`
  );

  var result = JSON.parse(response.getContentText());

  var currentDate = new Date();

  sheet.appendRow([
    currentDate, 
    result.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
    result.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category,  
    result.lighthouseResult.audits['first-contentful-paint'].displayValue,
    result.lighthouseResult.audits['speed-index'].displayValue,
    result.lighthouseResult.audits['interactive'].displayValue,
    result.lighthouseResult.audits['first-meaningful-paint'].displayValue,
  ]);
}
```

## 実行結果
![スクリーンショット 2023-12-10 21.01.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/4feb0742-a7e4-7f4a-aab0-1c6b55ff2e35.png)

無事に処理を実行してスコアの記録を行うことができました！

# 最後に
今回はPageSpeed Insights APIを使ってページの表示速度の記録を行う方法をご紹介しました。今回表示したもの以外にもレスポンスで得られる情報はたくさんあるので、要件に合わせてカスタマイズしてください。
それにしてもPageSpeed Insights APIもGASも無料でここまでのことができるだなんてすごい！