ある朝、前原夏樹が気がかりな夢から目ざめたとき、購入したサピエンス全史の上巻（2年ぶり2冊目）に玄関の郵便受けがすっかり破壊されてしまっているのに気づいた。
皆様こんにちは。
最近寝る前にカフカ全集を読んでいるせいで悪夢を見る回数が増えたように感じている前原です。グレゴール・ザムザ、あまりにもかわいそうです。
そして我が家の話ですが、土曜日の朝、破壊音がしたな〜と思って目を覚まして玄関を確認すると、郵便受けの箱が二度と閉まらなくなっていました。（悲しい。）
友達に貸したまま返ってこなくなったサピエンス全史上巻をもう一度購入しただけなのに、なぜこのような目に。。。
もしかすると、以前から少しずつ金具が緩んできていてそれが今回のポスティングによって たまたま 表出しただけなのかもしれません。
やっぱり日頃から自宅の郵便受けの状態を観測しておくことは社会人として当然の責務にも思えてきました。
怠った僕が悪かったのでしょう。
観測といえば当社ではDatadogとCloudFunctionsを組み合わせてフロントエンドのパフォーマンスの計測を開始しました。
このブログではかんたんにその仕組について説明します。
パフォーマンスの計測
計測の目的は追跡したスコアを利用してフロントエンドのパフォーマンス改善に役立てることです。
また、実装にあたってはすでにモニタリングツールとして導入していたdatadogを利用しました。
以下の画像のような流れになっています。
PSIはAPIを公開しているのでそれを利用しています。
そしてレスポンスから必要な情報を抜きだしてDatadogのcustom metricsとして送出するようにしています。
レスポンスの構造がなかなかに複雑だったので苦労しました。。
また、一つハマったのは、Datadogのcustom metricsのhost名にクエリストリングを含むURLを用いていて、そうすると `?` がうまくパースされずmetricsを指定したつもりでも正しく表示されないという現象でした。
もし同様の実装する際には気をつけてください。
そして完成したのが以下のようなダッシュボードです。
ここでお見せしているのは一部ですが、複数のページのスコアを取得してスコアの動きを追跡しています。
現在はパフォーマンス改善チームのメンバーが主にこのダッシュボードを利用しているのですが、有償ライセンスユーザでなくてもみれるようにダッシュボードはpublishできます。
お財布にも優しくてありがたいですね。
ただしまだまだ作ったばかりで改善すべきところはたくさんありそうです。
次は新たなソースのデプロイタイミングをこのグラフ上に表示する機能を追加できるようなので試してみようと考えています。
このダッシュボードがあるだけでパフォーマンスがよくなるということではないのですが、計測を行ってゆくうえでの羅針盤のような役割を果たしてくれて、改善作業の安心感につながっているように思います。（スコアが伸びないと不安になりますが笑）
もしパフォーマンス計測を検討していて、すでにDatadogを採用しているということであれば上記の仕組みで計測し始めてみてはいかがでしょうか？
Datadogはとても多機能で全て使いこなせてはいないのですがとてもかんたんにわかりやすいダッシュボードが構築できます。おすすめです。
