ユーザーエキスペリエンスをどうやって計測するか？

目的：ユーザーエキスペリエンスをどうやって計測するか？そのメトリックとして、Start Render、Visually Complete、 SpeedIndexとはどういうものか？

Steve Souders

 

デザインとパフォーマンスの交わった部分において、ユーザーエクスペリエンス（UX)が生まれます。SpeedCurveの一番強いとされる部分は、このユーザーエキスペリエンスを把握することに重点を置いていることです。逆に、そのほかの監視サービスでは、ネットワークの動作とブラウザの反応に重点を置いて計測をしています。

 しかし、ユーザーは、「DNSルックアップが遅すぎる」または「ロードイベントが遅くなった」と、不満を表すことはありません。 代わりにユーザーは、気になるコンテンツをスクリーン上で待つ必要があるときに不満を感じます。

優れたユーザーエクスペリエンスのためは、

重要なコンテンツをすばやく配信することです。

SpeedCurveでは、「ユーザーが実際に何を経験しているか」を表すメトリックス（指標）に焦点を当てています。 Webページでは、コンテンツがレンダリングされたときから始まります。SpeedCurveでは、デザイン改修をして、新しいレンダリングチャートを追加しました。 Smashingのレンダリングチャートの例を下に示します。

 レンダリングチャートには、Start Render、Speed Index、Visually Completeのメトリックが含まれています。Start Renderは、最初の画像レンダリングが始まる時間を示します。SpeedIndexは、すべての画像における平均レンダリング時間を示しています。 （本来、スピード・インデックスは普通の1000の数字で表していますが、SpeedCurveではゼロコンマで表示しています）。 Visually Completeは、最後の画像をレンダリングするメトリックで完了を表します。 

 

レンダリングは重要です。しかしすべての画像が同じ重要度ではありません。 また、ほとんどのページには、重要度の高いデザイン要素（例えば、 call-to-action やヒーローイメージ）があります。 「この重大なコンテンツがいつ利用可能になるか？」は、レンダリング全体を表す指標よりも重要です。重要度の高いコンテンツの測定には、カスタムメトリックとユーザータイミングを使用します。 

レンダリングとクリティカルコンテンツの処理速度が遅い場合、まず最初に調査すべきはクリティカル（重大）なブロックリソースの数です。しかし、 開発者にとって、ページ・リリースの忙しい合間にブロッキングスクリプト数やスタイルシート数の変化を計測していくのとても困難です。そのためSpeedCurveではこうした機能を新しいメトリックとして追加しました。下記は、 NY Timesのクリティカル・ブロックリソースのチャートです。

リテイラーがクリティカルなコンテンツをユーザーにどのように提供するか？　SpeedCurveそれを支援するプラットフォームを提供しています。