こんにちは！カスタマーエンジニアの神谷です。最近は、冬の時期だけ出回る国産の葉ニンニクを使って、料理することにハマっています。麻婆豆腐や回鍋肉などは、これを使うだけでグッと本格的な仕上がりになります。ちなみに我が家では、ラー油も自家製です。

さて今回は、PageSpeed Insights APIを利用して取得したWebページのスコアをSlackに通知する方法について、ご紹介します。PageSpeed Insights APIってなんぞやと思われる方のために、まずPageSpeed Insightsの概要について簡単にご説明します。

PageSpeed Insightsの概要

一言でまとめると、PageSpeed Insightsはページの読み込みの速さを可視化するツールです。読み込みの速さとは、皆さんが検索エンジンやSNSからどこかのWebサイトに流入しようとしたり、あるいはWebサイト上から別のページのリンクをクリックした際、表示されるまでにかかった時間を指します。昨今のSEO対策では、この読み込みの速さも大切な指標となっており、この対応を疎かにしていると、他のことをやっていても、なかなか成果に繋がらない場合もあります。なぜなら、コンテンツの中身が良かったとしても、ユーザーが見たいと思ってもなかなかそのページが表示されない場合、ユーザー体験を損ねてしまう質の低いページだと検索エンジンに判断される可能性があるからです。

スクリーンショット2024-02-0515.12.56.png
スクリーンショット2024-02-0517.15.34.png
上記の写真が、実際のPageSpeed Insightsの画面です。使い方は非常にシンプルで、計測したいページのURLを入力するだけ。自社のサイトだけでなく、競合なども含む世界中のあらゆるWebサイトの読み込みの速さに関する指標を、簡単に調べることができます。1つ注意点として、まとめて複数のページに対して結果を取得できないので、1ページずつ実行する必要があることに気を付けてください。

いくつか指標が出ていますが、1番上の3つがコアウェブバイタルと呼ばれる、特に重要な指標です。それぞれについて詳しく知りたい方は、公式のドキュメントなどを参照してください。ちなみに2024年3月から、FIDが別の指標に変わる予定です。端的に言えば、コアウェブバイタルの3つの指標が基準を満たしており、画面に合格と表示されれば、ページの読み込みに関する基本的な対策はできていると言えるでしょう。更にその下には、読み込みの速さをパフォーマンスとして数値化した際に、100点満点中どれぐらいの点数になるかを示した結果も出力されます。これらの結果をより良くしたり、そもそも不合格だった場合の具体的な改善策については、ここでは割愛します。

PageSpeed Insightsの結果をSlackに通知する意義について

ここまでで、PageSpeed Insightsの概要とSEOに関連する話はご理解いただけたと思うので、次はなぜPageSpeed Insightsの結果をSlackに通知する必要があるのか、その意義について考えていきましょう。私の経験談による主観を多分に含みますので、サラッと読んでいただいて大丈夫です。

コアウェブバイタルの結果が良くなくてもすぐに気付きにくい

PageSpeed Insightsの使い方自体は非常に簡単なのですが、手動で毎回実施する必要があるため、仮にコアウェブバイタルの結果が悪化していたとしても、すぐには気付きにくいです。それゆえ、Slackに1日1回ぐらい定期的にその結果を通知できれば、もしコアウェブバイタルの評価が下がってしまった場合でも、素早く対応することが可能なはずです。

コアウェブバイタルの結果をチームで共有しづらい

PageSpeed Insightsでコアウェブバイタルの結果を取得しても、その結果をパッとチーム内に共有したりするのは難しいです。1日1回手動で実行して、その結果をスクショするなんてこと自体は可能だと思いますが、手間もかかるし手動では忘れがちになるので、自動化した方が圧倒的に楽でしょう。Slackに流せば社内全体での共有も簡単ですし、定期的にモニタリングすることで、その変化もわかりやすいはずです。

今回紹介するソリューションについて

前置きが長くなりましたが、ここから実際のソリューションの中身について見ていきましょう。

スクリーンショット2024-02-0517.30.12.png
処理の流れとしては、上の図のようになります。Craft Functionsを起動して、PageSpeed Insights API経由でWebページのコアウェブバイタルに関するパフォーマンススコアを取得し、それをSlackに通知する、極めてシンプルなものです。実行自体は、毎朝11時など1日に1回程度が望ましいでしょう。

スクリーンショット2024-02-0517.22.43.png
具体的なアウトプットとしては、上記のようなものを目指してみましょう。その日における、コアウェブバイタルなどの評価が一目瞭然ですね。

手順

具体的な手順は、以下の通りです。

GCPプロジェクトでPageSpeed Insights APIを有効化する
GCPプロジェクトでAPIキーを取得する
Slackアプリを作成してチャンネルへ追加し、OAuthトークンを取得する
SlackアプリのOAuthトークンを、Craft Secret Managerに登録する
PageSpeed Insightsの結果取得及びそれをSlackに通知するためのCraft Functionsを作成する

1つずつ順番に見ていきましょう。

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

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

スクリーンショット2024-02-0517.37.21.png
スクリーンショット2024-02-0517.38.09.png
適当なGCPプロジェクトを作成または選択し、[APIとサービス > 有効なAPIとサービス > APIとサービスの有効化またはライブラリ] からPageSpeed Insights APIを検索し、有効化します。

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

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

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

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

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

3. Slackアプリを作成してチャンネルへ追加し、OAuthトークンを取得する

他の記事でも同じことが何度も説明されていますが、Slackに通知をするための基本設定も改めて説明しておきます。Slackに通知をするには、まずそのためのアプリを作成する必要があります。

[slack api > Your Apps] からCreate New Appをクリックしてください
Create an appの画面でFrom scratchを選択してください
次の画面でSlackアプリの名前と、それを適用するSlackのワークスペースを指定してください

Slackアプリの名前は特に規則はないので、ご自身でわかりやすいものにすれば問題ないです。ワークスペースは、皆さんが所属している組織のものになるでしょう。アプリの作成が完了したら、次にSlack アプリに必要なスコープの設定とOAuth トークンを取得します。

スコープの設定

スクリーンショット2023-07-1812.57.49.png

作成したアプリを選択して、[Features > OAuth & Permissions]をクリックしてください
ページ内のScopesの項目のBot Token ScopesのAdd an OAuth Scopeをクリックしてください
プルダウンメニューからchat:writeを選択してください

OAuthトークンの取得

スクリーンショット2023-07-1813.01.11.png

OAuth & Permissions ページ内のOAuth Tokens for Your WorkspaceのInstall to Workspaceをクリックしてください
アプリがワークスペースにアクセスするための権限を許可するために、許可するをクリックしてください
自動的に生成されるOAuth トークン（Bot User OAuth Token）を控えておいてください

作成したSlackアプリを使って通知を実行するには、通知を飛ばしたいチャンネルに追加する必要があります。

通知を飛ばしたいチャンネルの詳細ページを表示します
[インテグレーション > App]のアプリを追加するをクリックしてください
今回作成したアプリを追加します

スクリーンショット2023-12-1913.01.28.png
通知を飛ばすSlackチャンネルのチャンネルIDも後で必要になるため、控えておいてください。チャンネルIDは、チャンネル情報タブの1番下にあります。Slack側の基本的な設定はここまでです。

4. SlackアプリのOAuthトークンを、Craft Secret Managerに登録する

Craft Functions作成の前に、SlackアプリのOAuthトークンを、Craft Secret Managerに登録しておきましょう。これをCraft Secret Managerに登録しておくことで、中身を直接Craft Functionsに埋め込まなくても、使用できるようになります。

スクリーンショット2024-01-2219.11.47.png

[Craft > シークレット] からシークレットを新規作成します
SlackアプリのOAuth トークンは、貼り付けたら適当な名前を付けて保存してください

ここでつけた名前を、Craft Functions作成時に変数として設定します。

5. PageSpeed Insightsの結果取得及びそれをSlackに通知するためのCraft Functionsを作成する

いよいよ本題となる、Craft Functionsの作成に入っていきます。サンプルコードは、下記URLで公開しています。

https://github.com/plaidev/craft-codes/tree/main/craft-functions/page-speed-insights-slack-notification

ソースコードの取得手順は、以下の通りです。

[Craft > ファンクション > 作成 > テンプレートから作成] を選択
PageSpeed Insights APIを利用して取得したWebページのスコアをSlackに通知する方法というテンプレートを検索し「取得」ボタンをクリック
「反映」ボタンをクリック
Functionを有効化して保存

まずは、4で設定したシークレットやその他必要なものを、変数として指定しておきましょう。

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

GCP_API_KEY
- 取得しておいたAPIキーの値を入力します
URL_TO_ANALYZE
- PageSpeed Insightsでパフォーマンスを取得したいWebページのURLを入力します
SLACK_TOKEN_SECRET
- SlackアプリのOAuth トークンを登録したシークレット名を入力します
SLACK_CHANNEL_ID
- 通知を流したいSlackのチャンネルIDを入力します

これらの値は直接Craft Functionsのコード内に埋め込むこともできますが、こうして変数として指定することで、コードをいじらずとも変更できます。特にURL_TO_ANALYZEの中身を変えれば、すぐに他のWebページのパフォーマンスを取得できて便利です。

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

async function getPerformanceData(strategy, logger) {
  try {
    const url = buildPageSpeedApiUrl(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;
  }
}

上記の部分が、実際にWebページの読み込み速度に関する、パフォーマンススコアを取得する関数です。これ1つで、パソコンとスマートフォンそれぞれにおける、パフォーマンススコアを取得できるようになっています。

function formatFieldData(rawValue, roundDecimal) {
  if (rawValue == null) {
    return 'none';
  }

  let value;
  switch (roundDecimal) {
    case 1000:
      // LCP用の計算で少数第1位までの値を求める
      value = (Math.round(rawValue / 100) / 10).toFixed(1);
      break;
    case 100:
      // CLS用の計算で少数第2位までの値を求める
      value = (rawValue / 100).toFixed(2);
      break;
    default:
      // FID用の計算で整数の値を求める
      value = Math.round(rawValue).toString();
  }
  return parseFloat(value);
}

これは少しややこしいのですが、PageSpeed Insights APIから取得したパフォーマンススコアの表記を、PageSpeed Insightsの画面と同じ形式に変換するための関数です。実際にPageSpeed Insightsを利用してみるとわかりますが、LCPは1.5秒、FIDは37ミリ秒、CLSは0.15のようにバラバラの形式で出てきます。そこで最終的にSlackに通知文面を流した際、画面と同じ形式にしておけば、人間の目にもわかりやすくなります。

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

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

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

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

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

検証

実際にCraft Functionsを実行して、PageSpeed Insights API経由で取得したパフォーマンススコアが、Slackに通知されるか確認してみましょう。Slackに通知する際の条件分岐は特に設けていないので、エラーが出ない限りは必ず通知されるはずです。

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

この例ではコアウェブバイタルのスコアが合格しているので、主な指標には全て合格の旨が出ていますが、もしいずれか1つでも不合格だった場合、そこの文面が変わります。余裕があれば、色々なWebページのURLを入れて、どうなるか試してみてください。

終わりに

今回は、PageSpeed Insights APIを利用して取得したWebページのスコアをSlackに通知する方法をご紹介しました！Craft Functionを使えば、こんなことも簡単にできちゃいます。今後も皆さんのマーケティング活動のお役に立てるようなソリューションを、ご紹介できればと思います。

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

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

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

↓ PLAIDで働きたい