サポート

ウオーターフォールチャートで、UX改善

ウオーターフォールチャートで、UX改善

目的:ウォーターフォールチャートを利用して、サードバーティタグやレンダリングブロックを検証し、UX改善を図れるようにします。

Steve Souders 2015年6月23日

 

SpeedCuve(スピードカーブ)は、デザイナーや開発者がユーザーエキスペリエンスに対して、よりよい知見が得られる支援したいと考えています。Webサイトにおいて、どんな重要なページパーツがレンダリング(描画)され、なにがレンダリングを妨げているかを理解することです。

新しくなったウォーターフォールチャート

ページアセットがユーザーエキスペリエンスに影響を与える関係にハイライトを当てるために、今回、ウオーターフォールチャートのデザイン改修をしました。ウォーターフォールチャートの上にマウスを動かせば、ページロードの間に、ユーザーが見ているものをミリセカンドで正確に示します。これはレンダリング時にページブロックをしている可能性のあるJavascriptや CSSを簡単に示します。私はこの新しいウオーターフォールとフィルムストリップを併用し、ヒーローイメージが遅れるという問題を定義しました。

 

サードパーティ・ウォーターフォールチャート

レンダリンブロックの原因を特定することは重要です。しかし、ウェブサイトにサードパーティコンテンツが多く含まれている場合は、簡単ではありません。スクリプトやスタイルシートは、広告や分析ツール、ソーシャルのウェジットが遅延の原因ですが、速く表示をしないばかりか、ユーザーが見るページのメインコンテンツもブロックします。これを検証するために、サードパーティウオーターフォールチャートで、Start renderのライン使うことができます。

サードパーティ・ウォーターフォールチャートは、自社と第三者に見せるグループ内にHTTPリクエストをバンドルしています。グルーピングのロジックは、SpeedCurveで開発された技術を基にしています。私たちは、ウォーターフォール上のStart renderのポイントを表す垂直線を描きました。ライン上に残されたサードパーティは、どれもレンダリングをブロックしている可能性があります。詳細を見るために、それぞれのサードパーティをクリックして、ウォーターフォールチャートのフルバージョンに行き、フィルムストリップのサムネイルを調べましょう。

 

このウォーターフォールチャートは素晴らしい機能です。レンダリングが発生し、どのようにサードパーティにより影響されるかを見る機能を加えており、デザイナーや開発者によりよいエキスペリエンスを提供することができます、

 

 

 

 

 

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA