LCL Engineers' Blog

夜行バス比較なび(高速バス比較)・格安移動・バスとりっぷを運営する LCLの開発者ブログ

パフォーマンス計測ツール:SpeedCurveの使い方

フロントエンドエンジニアの岡田です。今回は、パフォーマンス計測ツール:SpeedCurveをLCLでどのように使っているかお伝えします。 f:id:lcl-engineer:20170628054829p:plain

設定について

計測タイミング(Times)

計測タイミングは多いに越したことはないとは思いますが、コストとのバランスで、今のところ1日1〜2回計測をしています。 1日分のリリースが終わるタイミングとアクセスが増えるタイミングに計測をしています。

計測回数(Checks)

3回以上で任意の回数が設定できます。今のところ最低ラインの3チェックにしています。 3回チェックすることで、標準よりも早かったり遅かったりする結果が排除され、結果の中央値が選択されるそうです。 What is a check and how many do I need? | SpeedCurve Support

ブラウザ

LCLのサービスは、スマホユーザーが多いため、スマートフォン向けページのみ計測しています。(1URLをスマホ・PC等複数デバイスで計測することも可能です)
ブラウザは、Chromeのエミュレート環境でiPhone6のサイズで設定しています。 回線については、Newrelic Browser(RUM)と比べて値が近かった、4G設定で計測をしています。 Newrelicの結果では、実際には4Gよりもやや早いような印象でした。 f:id:lcl-engineer:20170619064716p:plain

料金プラン

Synthetic Pay-As-You-Go plan. にしています。

SpeedCurve | Pricing

1チェック $0.01で、月額$20〜 です。 1日1回計測 × 1計測3回チェック × 1ブラウザの場合、21ページまでなら$20です。(31日間の月の場合)

結果の見方について

Siteタブ

設定したタイミングで計測したデータが表示されます。 Start Render, SpeedIndex, Visually Complete の他、Backendの時間も確認できます。 f:id:lcl-engineer:20170628054829p:plain

グラフにはnoteを追加することができるので、パフォーマンスに関連しそうなリリースの履歴を入力しています。 noteはAPI経由でも追加できるので、設定すると便利かもしれません。

https://api.speedcurve.com/#add-a-note

BROWSER WATERFALL

ファイルの読み込まれる順番が確認できます。 f:id:lcl-engineer:20170619095505p:plain Chromeのデベロッパーツールなどでも確認はできますが、以下の点が見やすくて良いと思います。

  • レンダリングブロックしている要素がわかりやすい(斜線マークがブロッキング要素)
  • 要素をクリックすると詳細情報が表示される

参考 SpeedCurve | SpeedCurve Waterfall

他のツールとの連携

データベースへ保存

テスト結果は社内ツール用のデータベースにも保存しています。 以下のAPIを使ってデータを取得しています。
SpeedCurve v1 API

Re:dashで表示

データベースへ保存したデータは、Re:dashで表示しています。
以下のグラフは、複数ページの結果を表示したものです。 SpeedCurveでは表示できない形式ですが、このように重ねると、どのページが遅いのかがひと目でわかります。 f:id:lcl-engineer:20170628112059p:plain

chatworkへ通知

first byte, start render, speedindex, visually complete, Google PageSpeed Insightsスコア をchatworkへ通知しています。 通知を出すようにしてから、日々の変化に気づきやすくなり、また、担当者以外にも関心を持ってもらえるようになったことが良かったです。 f:id:lcl-engineer:20170628052734p:plain

以上です。 まだ使えていない機能もあるのですが、しばらくはこちらで計測を続けていこうと思います。