こんにちは。ウエディングパーク新卒3年目エンジニアのさー（@__south__373）です。

先日所属チームが変わり、Ringraphという結婚指輪・婚約指輪の口コミサイトを担当することになりました。

ディレクターから「とにかく速度改善をしたいんだ」という話を聞き、まずはサイト理解がてら全体の速度を把握できる仕組みをつくることにしたのでその内容を紹介したいと思います。

目次

作成イメージ

可視化したいポイントは3つありました。

  • どのページが遅いのかを把握できる
  • どのフェーズに改善余地があるのかを把握できる
  • 今後施策をリリースをした際、そのリリースによって速度が落ちていないかを確認できる

Ringraphではサイトパフォーマンス監視にNew Relicが導入されているので、この3つを満たすダッシュボードをそれぞれ作成することにしました。

 

どのページが遅いのかを把握できるダッシュボード

どのページがそもそも遅いのか全体感を把握したいと思い、Apdexで数値化することにしました。

Apdexとは

Apdexは、ウェブアプリケーションやサービスのレスポンスタイムについて、ユーザー満足度を計測するための業界標準です。（New Relicより引用）

 

Apdexは自分で閾値を設定でき、設定した閾値と応答時間から計算がされるもので、0~1の値で示されます。1に近いほど満足度が高く、0に近いほど満足度が低いです。

例えば閾値を1秒に設定すると、1秒以下で応答が返ってくれば満足、1秒〜4秒以下（閾値の4倍以下）は許容範囲、4秒〜は不満と判断され、Apdexが算出されます。

実行クエリ

サーバーサイドのレスポンスとしては0.3秒以下を目指せると素敵なので、閾値を0.3に設定してそれぞれのページがどれほど解離があるかを数値化します。

-- 実際は改行なく実行する必要があります
SELECT
  apdex(duration, t:0.3)
FROM Transaction
WHERE
  appName = `対象アプリ` AND
  name = `ウォッチしたいディレクトリ`
SINCE 1 week ago

作成したダッシュボード

ランキング検索TOPとクチコミ検索はまさかの0…
これは改善のしがいがありますね！

 

どのフェーズに改善余地があるのかを把握できるダッシュボード

1つ目のダッシュボードでどのページが遅いかを把握することができました。
次に、速度が遅い場合サーバー側を改善すれば良いのか、JSやCSSを改善すれば良いのか、描画を改善すれば良いのかをわかるようにするために各指標を表示することにしました。各指標の数値と今後速度改善を行った際に視覚的にも変化がわかりやすいようにグラフも表示させてみます。

実行クエリ

各指標についてはドキュメントに記載の通りですが、下記のようなクエリで抽出できます。

-- 実際は改行なく実行する必要があります
SELECT
  average(webAppDuration) as 'serverside', -- サーバーサイドレスポンスタイム
  average(domProcessingDuration) as 'DCL', -- HTMLパース時間
  average(pageRenderingDuration) as 'Load' -- 全ての画像・CSS・Javascriptのダウンロードと実行時間
FROM PageView
WHERE
  appName = `対象アプリ` AND
  name = `ウォッチしたいディレクトリ`
SINCE 1 week ago

数値表示

Chart typeをBillboardにすると数値として表示できます。

グラフ表示

表示したい期間の前に`TIMESERIES`をいれると、Chart typeでAreaを選択できるようになります。

作成したダッシュボード

検索系を比較した時、クチコミ検索が一番遅くサーバー側が改善できそうなこと、ランキング検索詳細やこだわり検索詳細では描画側に改善ポイントがありそうなことがわかりました。

リリースによって速度が落ちていないかを確認できるダッシュボード

1つ目のダッシュボードで使用したApdexをここでも使います。今回は変化をウォッチしたいので、現在の速度が理想の数値であると仮定してそれぞれのページごと閾値を設定し、数値が下がったページがあればすぐに気付けるようにします。

閾値の算出方法

それぞれのページでApdexが0.95となるように閾値を設定します。Apdexが0.95となる閾値はリクエストの90パーセンタイルのレスポンスタイムでわかるので、下記のクエリで算出できます。

-- 実際は改行なく実行する必要があります
SELECT percentile(duration, 90)
FROM Transaction
WHERE
  appName = `対象アプリ` AND
  name = `ウォッチしたいディレクトリ`
SINCE 1 week ago

実行クエリ

ウォッチしたい各ページにおいて、Transaction（サーバーサイド）とPageView（ページ読み込み全体）のduration（レスポンスタイム）に対してApdexを設定しました。

-- 実際は改行なく実行する必要があります
SELECT
  apdex(duration, t:1.1)
FROM Transaction
WHERE
  appName = `対象アプリ` AND
  name = `ウォッチしたいディレクトリ`
SINCE 1 week ago

作成したダッシュボード

案件がリリースされるタイミングでウォッチしていき、例えば上の画像だと商品クチコミ一覧のスコアが下がっているので、何かのリリースでこのページの速度が下がっていることがわかります。

最後に

可視化することで全体感を把握でき、改善ポイントがわかりやすくなりました。今は毎週ダッシュボードを開いて数値を確認していますが、Apdexの値が下がったらslackに通知するようにすると手間が減って良いなと思うので、ウォッチする指標と合わせて改善していきます。

今後はこのダッシュボードをもとに速度改善の施策を行ったり、リリースによる速度低下をウォッチして対応していきたいと思います！

Join Us !

ウエディングパークでは、一緒に働く仲間を募集しています！
ご興味ある方は、お気軽にお問合せください（カジュアル面談から可）

採用情報を見る