読者です 読者をやめる 読者になる 読者になる

PageSpeed Insights のスコアを Mackerel に投稿するアプリケーションをボタン1つで Heroku にデプロイできる状態にした

GitHub - aereal/psi-metrics: Post PageSpeed Insights score to Mackerel

PageSpeed Insights とは

PageSpeed Insights

ユーザが体感するページの読み込み速度を100点満点で評価するサービス。画像を圧縮せよとか HTTP キャッシュを使えとか、とにかく Web ページを速くするためのアドバイスをしてくれる。

チームで指標のひとつとして月1で眺めている。

API

Google PageSpeed Insights には API がある。

Web のインターフェースでとれる情報はほとんど JSON で返ってくる。スコアだけではなくて、各ルール (例: 画像を圧縮せよ) ごとのスコアと説明も構造化されて含まれているのでその気になれば Google PageSpeed Insights の Web 版を作り直すこともできる (やりたくはない)。

Mackerel のサービスメトリクスに

毎月1回しか見ていなくて、そのあいだにどういう変動があったかは追えていない。とはいえ毎日見たくはない。

そこで Mackerel のサービスメトリクスにする。ルールごとのスコアもあるがひとまずトータルのスコアだけ見れればよさそう。

サービスメトリクスにした様子:

f:id:aereal:20160309104743p:plain

Deploy to Heroku

できたものの定期的に実行する必要があるので手頃な Heroku にデプロイすることにした。とはいえ過去の経験からして素朴に `heroku config:set ...` などしていくと、後になってどういう設定をすればまず動くのか、といったことがわからなくなるので対策しなければならなかった。

そこで Deploy to Heroku ボタンのことを思い出した。

Introducing Heroku Button | Heroku

リポジトリに app.json を書いておくと必要な設定をフォームで埋めて送信するだけでアプリケーションがデプロイできるというもので、設定の説明を書いてなおかつ再利用なかたちになるのでさっと app.json を用意した。

app.json や Deploy to Heroku ボタンは Heroku のドキュメントがわかりやすい:

Creating a 'Deploy to Heroku' Button | Heroku Dev Center

app.json Schema | Heroku Dev Center

おわり

Deploy to Heroku ボタンを押していますぐ Mackerel で PageSpeed Insights のメトリクスを作りパフォーマンスの監視をしてみましょう。