PageSpeed Insightsの値を返すだけのGitHub Actionsを作った / Mackerel にも簡単に投稿できる

「PageSpeed Insightsの値をMackerelに投稿」をやってる人が身の回りにたまにいて、よく考えると便利Actionが自分でも作れる気がしたのでやってみましたという記事です。

作戦

stefafafan/psi-action みたいな、実行したらWorkflowの次のStepにScoreやWeb Vitalsの値を渡すだけのActionを実装する
stefafafan/post-mackerel-metrics という先日作ったMackerelのサービスメトリックを投稿するだけのActionで投稿する

Actionsをまた作ろうとしている理由は、先日1つ作ったら思いのほか簡単だったのでなんでもActions作ろうというフェーズに入っているためです。

完成した

実は便利に使える公式Nodeパッケージがあるので、これをJavaScript Actionで使えば実装はほぼ不要でした。

ということで以下の2つのActionを組み合わせればMackerelにPageSpeed Insightsの色んな値を簡単に投稿できるようになりました。
github.com
github.com

Mackerelに投稿する

以下のようなWorkflowを書くと https://blog.stenyan.jp/ の mobile 向けの各種PageSpeed Insightsのメトリック*1をMackerelの Blog サービス向けに投稿できます。 metrics のところに書いている psi.score.blog_mobile はMackerelのメトリック名なので任意のものを指定できます。

name: Post PageSpeed Insights to Mackerel

on:
  workflow_dispatch:
  schedule:
    - cron: 0 3 * * 1-5

jobs:
  psi:
    runs-on: ubuntu-latest
    steps:
      - id: psi
        uses: stefafafan/psi-action@v1
        with:
          url: 'https://blog.stenyan.jp/'
          key: ${{ secrets.PSI_APIKEY }}
          strategy: 'mobile'

      - uses: stefafafan/post-mackerel-metrics@v1
        with:
          api-key: ${{ secrets.MACKEREL_APIKEY }}
          service-name: 'Blog'
          metrics: |
            psi.score.blog_mobile ${{ steps.psi.outputs.score }}
            psi.fcp.blog_mobile   ${{ steps.psi.outputs.first-contentful-paint }}
            psi.fid.blog_mobile   ${{ steps.psi.outputs.first-input-delay }}
            psi.cls.blog_mobile   ${{ steps.psi.outputs.cumulative-layout-shift }}
            psi.lcp.blog_mobile   ${{ steps.psi.outputs.largest-contentful-paint }}
            psi.si.blog_mobile    ${{ steps.psi.outputs.speed-index }}
            psi.tti.blog_mobile   ${{ steps.psi.outputs.time-to-interactive }}
            psi.tbt.blog_mobile   ${{ steps.psi.outputs.total-blocking-time }}

上記の画像のように、PageSpeed Insightsのスコアに加えて、First Contentful Paint (FCP) なども投稿されていることが確認できると思います（上の画像で2つ線があるのはmobile strategy に加えて desktop の分も別Stepで取得してまとめて投稿しているためです）。Mackerel上で単位が自動で入るわけではないので、欲しい場合はREADMEの説明を参考にMackerelのWeb UIで milliseconds とか integer など手で一度指定してください。*2

感想

stefafafan/post-mackerel-metrics Actionを作った時の話は以下のエントリに書いています。
blog.stenyan.jp

この時思ったのは、「1つのActionの責務は1つに抑えると使いやすそう」ということです。 stefafafan/super-psi-metrics-to-mackerel-action みたいなPageSpeed Insightsの値をMackerelに投稿するまで全部やってくれるものを用意してもよかったですが、そうするとあとでMackerel投稿部分だけ使いたいとなると再実装することになります。また、PageSpeed Insightsの値はほしいけどMackerelではなく別のサービスにまとめたいということもあるかもしれません。

今回のようにそれぞれのActionが「1つのことだけをとてもよく行う」という風になっているとメンテナンス性も高く、部品として組み合わせて使いやすいです（今回は最初からMackerelに投稿するユースケースを想定して作っていましたが）。

*1:全てに対応しているわけではなく、適当にピックアップした分をとりあえず実装してあります。やる気になったら他のフィールドにも後で対応するかもしれません。 https://github.com/stefafafan/psi-action#outputs

*2:カスタムメトリックのグラフ定義で選択できる単位を追加しましたほか - Mackerel お知らせ #mackerelio