Core/Dash ヒストグラム

User Experienceの分布全体を可視化せよ。平均値が隠してしまう外れ値や二峰性のパターンを特定するのだ。 

無料トライアル

Trusted by market leaders

monarchloopearplugsadevintaerasmusmcsnvvpnworkivanestleebaycomparewhowhatwearharvardnina carekpndpg mediasaturnhappyhorizonmarktplaatsperionaleteiafotocasa

ヒストグラムによるUser Experienceの理解

平均パフォーマンススコアは誤解を招く。User Experienceの実態を隠してしまうからだ。あるユーザーがサイトを1秒でロードし、別のユーザーが9秒でロードした場合、平均は5秒となる。この数字はどちらのユーザーも表していない。ヒストグラムは、ロード時間の分布全体を可視化することで真実を明らかにする。

coredash rum histogram jun25

このチャートは、単一の指標から全体像へと視点を移させる。外れ値、ロングテール、そして劣悪な体験をしている特定のユーザー層を浮き彫りにするのだ。

ヒストグラムが明らかにするもの

ヒストグラムはパフォーマンスデータをバケット(区間)にグループ化し、頻度を示す。

  • X軸(バケット): パフォーマンススコアの範囲(例:0-1秒、1-2.5秒)。
  • Y軸(ボリューム): 各バケットに該当するページビュー数。バーの高さは、その体験がどれほど一般的かを示す。
  • パーセンタイル(p75, p90, p99): ユーザーの大多数がどこに位置するかを示すマーカー。p75のラインは、トラフィックの75%がこのポイントより高速であることを意味する。

ヒストグラムで問題を診断する方法

健全なヒストグラムは、左側の高速なバケットにユーザーが集中し、その後急激に減少する形状をしている。それ以外の形状は、調査を要する危険信号だ。

  1. ロングテール: グラフが右側に長く伸び、低いバーが続いているか確認せよ。これは、パフォーマンスが極めて悪いユーザーの「ロングテール」を表している。これらは多くの場合、古いデバイスや低速ネットワークを使用しているユーザーだ。このテールを最小限に抑えることで、p95およびp99スコアが改善される。
    coredash 2 long tail histogram
    対策: JavaScriptの実行とアセットサイズを削減し、制約のある環境向けの最適化に集中せよ。

  2. 二峰性分布(ダブルピーク) チャートに2つの明確なピークがないか探せ。これは2つの異なるUser Experienceが存在することを示している。多くの場合、モバイル対デスクトップ、キャッシュあり対キャッシュなしといったセグメンテーションの問題が原因だ。
    coredash 3 bimodal histogram.png
    対策: フィルタを使用して変数を特定せよ。  デバイスタイプ、ログイン状態、国などでフィルタリングし、ピークの1つが消えるディメンションを見つけ出すのだ。それが、特定のユーザーコホート全体に影響を与えている根本原因である。

Core Web Vitalsの最適化

ヒストグラムは、最も遅いユーザーの現実に直面することを強いる。分布を分析することこそが、一般的な最適化から、p75スコアを向上させビジネス成果をもたらす外科的な改善へと移行するための鍵となる。

ヒストグラムによるUser Experienceの理解Core Web Vitals ヒストグラムによるUser Experienceの理解