Google Cloud Functions を使ってみたくなり、作るとしたら何を作るかを調べていて、以下の記事を見つけました。

Google Cloud Functions では、GAS ではできない、ブラウザの起動ができます。
ブラウザ軌道ができれば、JavaScript のパフォーマンス指標を取得もできそうでしたので、指標を取得してスプレッドシートに記録するところまで試しに実装してみました。
実施した結果を記載します。

ツール全体図

以下、作成したツールのイメージになります。
GCF ツール全体図.png - Google ドライブ

図中の項番の説明

以下、図中の項番の説明になります。
1. スケジュールトリガーで、GASを時刻起動、Cloud Function WebPageTest を呼び出す。
2. テスト対象URLにアクセスし、JavaScript のパフォーマンス指標を取得する。
3. GASに取得したパフォーマンス指標を返す。
4. GASでスプレッドシートにパフォーマンス指標を転記する。

作成の動機

ツール作成の動機を記載します。

Webサイトのパフォーマンス指標を記録したいが、ツールを稼働させる基盤がない。

ツール稼働のために、VPSをもう1台借りるのもお金がかかるし、お金をかけないでパフォーマンス指標を記録したいです。

PageSpeedInsight では、トランザクション計測ができない。

PageSpeed Insights はAPIが提供されており、外部公開されているページであればスクリプトで定期的にスコアを計測することができるため、GASから実装すればツール実行基盤は不要ですが、ユーザー行動をモデリングして、複数ページを計測するトランザクション計測はできません。
Cloud Functions からの実行であれば、Functionの作り込みをすればトランザクション計測もできるかと思います。

無料枠がある。

料金  |  Cloud Functions のドキュメント  |  Google Cloud に記載がありますが、Cloud Functions には無料枠があり、200万回の関数呼び出しは無料で実行ができます。
ただ、単純に200万回実行が無料かというとその他の課金ポイントがあり、関数実行上限の前に、コンピューティング時間の上限に引っかかりそうに思いました。

計測するパフォーマンス指標は自由に選べる

JavaScript を実装していく形になるため、完全に自前実装になりますが、計測する指標を自由に選択できます。

作ったもの一式

以下、gist にアップしました。
puppeteerwebpagetest

使用方法

以下に使用方法を記載します。
1. index.js と、package.json を元に Cloud Function を作る。
メモリとタイムアウト時間は以下を設定しました。
* 割り当てられるメモリ
1 GB * タイムアウト
60 秒
メモリは1 GB くらいないと、puputeerが起動できなかったためです。タイムアウト時間はもっと短くても問題ないかもしれません。
また、Node.js は v8 を使いました。

  1. 以下のスプレッドシートをコピーする。
    pupeteerWebPageTest Template

  2. utils.gs、main.gs をスプレッドシートのコンテナバインドスクリプトとして登録する。

  3. main.gs のURLの記述を記録対象のページURLに変更する。 
    var URL = "https://www.monotalk.xyz/";
  4. utils.gs、index.js の 認証キーを任意のキーに変更する。
    Cloud Function の認証のためヘッダーキーで、キーを照合するようにしました。
    xxxx の記述を任意の値に変更してください。
    • utils.gs
      var headers = {
    'Authorization': 'Bearer xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
};
    • index.js 
      exports.run = function(req, res) {
    const accessToken = getAccessToken(req.get('Authorization'));  
    if ("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" == accessToken) {
        authorized(req, res);
    } else {
        res.status(403).send("不正なアクセスです");
    }
};

  5. Cloud Function の API URL を変更する。
    'https://cloudfunction/url' を Cloud Function の URL に変更してください。

    • utils.gs
      var result = UrlFetchApp.fetch('https://cloudfunction/url', options);

  6. main.gs の 関数 execute を スケジュールトリガーで実行する。

上記設定で、Google スプレッドシートに計測結果が記録されるようになります。

補足説明

ツールについての補足説明を記載します。

  • 認証について
    認証キーで認証を行うようにしましたが、我ながら適当な実装だと思います。
    IAMで認証を行う方法があり、この実装方法がより良いやり方かと思いますが、設定が面倒だったため、手抜きで認証キーで認証するようにしました。

  • pupeteerの起動オプションについて
    pupeteer は起動オプションが多数あり、オプション設定により、メトリクスの値が結構変わります。
    何種類かオプションを試した結果、'--no-sandbox' だけ指定しておくのが良い感じに取得できていそうでした。 

    const browser = await puppeteer.launch({args: ['--no-sandbox']});

  • スプレッドシートのシートの説明
    スプレッドシートには、２つシートがあります。resource は Resource Timeing API の実行結果を記録します。
    個人的な分析用に、hostname が必要だったので、GASでhostnameをURLから導出しています。
    performance シートには、window.performance.timing と、FirstMeaningfulPaint と、Paint Timing API (FC FCP) を記録しています。

Cloud Functions で lighthouse を実行する

lighthouse 自体を、Cloud Functions から実行可能かも調べたのですが、lighthouse については以下のリポジトリがあり、これを使うと、lighouse の実行結果をBigQuery に保存してくれそうです。
sahava/multisite-lighthouse-gcp: Run Lighthouse audits on URLs, and write the results daily into a BigQuery table.

参考

指定した URL のパフォーマンスを計測してくれる Cloud Function を作成しました。
このレベルだと、lighthouse を定期実行した方が良い感じですので、もう少し改造して混み入った計測ができるようにしたいです。

以上です。

コメント

カテゴリー

最近の投稿