Written by Mark Zeman
スピードはユーザーエクスペリエンスだ
Steve: もっとも大切なテーマは、スピードはユーザーエクスペリエンスだということです。これは、チームメンバー全員が目指すべき努力目標です。
Mark: そのとおり。
Steve: SpeedCurveの目標は、ユーザーエクスペリエンスの追求と計測を支援することです。それは言葉では素晴らしく、実際は難しい。
Mark: そう。どうやるかと？
Steve: SpeedCurveはユーザーエクスペリエンスをどのように測定しますか？SpeedCurveはWebpagetestをベースに構築されていますね。
Mark: Webpagetestはデータソースを提供する点で、素晴らしいツールです。このツールが他のツールとは異なる点は、ビデオを記録することです。
Mark: そうです。私たちは世界中のあらゆる場所で、デバイスを基に実際のWebブラウザでWebページをロードしていますが、ページが読み込まれると、毎秒30フレーム、または60フレームでビデオを記録します。このビデオでユーザーはページの視覚分析を客観的に行うことができます。さまざまなスパイクが発生時などにブラウザではわからないものを、ユーザーが実際に見ているものや、ロードされるとどうう感じるかを教えてくれます。
Steve: 私自身は、DNS周りのメトリックが好きで、jQueryのダウンロードにどれだけ時間がかかるかに興味をもっています。 しかし、ユーザーエクスペリエンスを測定する場合に重要なのは、視覚的にユーザーが何を経験しているかです。
Mark: そう、彼らが何を見ているか。視覚分析では、2つのメトリックが得られます。「Start render」は最初の画像が白い画面から画面上に表れる時です。
Steve: この瞬間は、ユーザーにシステムが動作しているというフィードバックを提供します。
SpeedIndexは、チームと共有しページを改善するための指標
Mark: もう一方で重要なのは「Speed Index」です。 Speed Indexはビューポイントの分析であり、次のページの読み込み中にビューポイントがどのように変化するかを分析します。したがって、画面に少しだけ表示された場合は、ビューポート内のコンテンツを見ることができる状態の20％となります（[00:02:00]部分）。Speed Indexの数値は、時間経過とともにそのプロセスを計算したもので、他のウェブサイトや各テンプレートの比較ができます。Speed Indexは、チームと共有しページを改善するための指標で、本当のユーザーエクスペリエンスの度合い教えてくれます。
Steve: そして、Filmstrip（フィルムストリップ）も重要です。FilmstripはSpeed Indexとともにドリルダウンするには優れたものです。そのFilmstripの中では、あなたが見たいものを表しています。
Mark: そうですね。
Steve: SpeedCurveは、Speed Indexに基づいた読み込み時間を測定し、ユーザーエクスペリエンスの把握に焦点を当てています。
一般のWebpagetestはページ読み込み時間を使用しますが、Patrick Meenan は驚くべき発明として、Webテストの動作をパラメータ化しました。我々はSpeed Indexでのページ読み込みの中央値を選択するように変更しました。それがユーザーエクスペリエンスのすべてだからです。
サイトスピードは、どのように感じるか？
Mark: 私たちが得た研究成果についてご紹介しましょう。
Steve: SpeedCurveの特徴については、まず、我々がユーザーエクスペリエンスをどのように計測しているか、他の機能について話しましょう。
Mark: Speed Curveは、そのダッシュボードに、生データ、SpeedIndexの値、ビジュアルで見せるFilmstripなどを表示させます。レスポンシブウエブデザインなら、スマホでどのように視覚的に感じるか、デスクトップでどのように感じるかをそれぞれフィードバックします。Filmstripで、どのように違いを感じ、どのようにロードをしているかを捉え、それらを比較することで、レスポンシブウェブデザインのサイトをいかに調整するかを支援します。
Steve: 私たちが話しているのは「どのように感じるか」で、ユーザーエクスペリエンスについてです。 Filmstripを見て、スマホとタブレットやノートPCでユーザーが何を体験しているかを視覚的に比較できれば、「どのように感じるか」を知る手助けになります。
Mark: 他に重要なものは、カスタムメトリックです。 私たちは、カスタムメトリックを主要ブラウザで利用できるようにしました[00:04:22]。 タイミラインで、ユーザーエクスペリエンスをどう判断するかで、１つは、ヒーロー（メイン）コンテンツの内容をみることです。
Steve: ユーザーがピークタイムに測定値を設定すると、ページの主要な要素に狙いを定めて分析することができます。
Mark: 次にプロダクトページについて考えてみましょう。プロダクトイメージは、直接ユーザーに関わることで、いつそのイメージが表示されるかを知りたいはずです。 Twitterでは、初めてのツイート(first Tweet)が話題になっていましす。このメトリックは、実際にユーザーが体験する「初めにツイートを見たのはいつ」という1つの数値に影響します。
Steve: 彼らのカスタムメトリックですね。
Mark: 私たちは、マーケティング、設計、開発者、のみなさんのチームと一緒に、各テンプレートの最も重要な要素が何であるかを、見極めるプロセスをオススメしています。 そうすれば、その要素を引き出すことができます。
Steve: 競合調査についてです。SpeedCurveには、異なるデバイスを比較するためのFilmstripがあります（[00:05:30]部分）。競合する他のサイトと私のサイトがどのように比較されているかを視覚的に知りたい場合は、どうしますか？
Mark: Speed Curveの素晴らしい点は、「どのサイトも測定できることです。あなたのサイトで入手したものと同じデータを、他の人にも提供できます」。我々はSpeed indexが他の人にとってどのようなものであるかをお伝えできます。同様のスクリーンショットとフィルムストリップをすべて提供しますので、比較方法を視覚的に見ることができます。利用者は設計に関するフィードバックをすべて手に入れることができるので、「このサイトは私のサイトよりも速いのですが、何が違うのですか？ウェブサイトを改善して、同じユーザーエクスペリエンスを得るにはどうしたらいいですか？」と考えることができます。
Steve: パフォーマンスバジェットも重要です。パフォーマンスバジェットの値を設定するためには、設定すべき値を把握しなければなりません。競争相手が何をしているかを調べることは良い方法です。誰もが、自社サイトが競合他社よりも良いものにしたい思っていますので、これから何をしなければならないかを知るのに役立ちます。
問題を引き起こす、サードパーティーtag
Mark: パフォーマンスバジェットは、SpeedCurveの主要部分です。ユーザーエクスペリエンスがどうするか、を考える意思決定プロセスを支援します。 これをメトリックに変えて、パフォーマンスバジェットを監視し、ユーザーエクスペリエンスがどうか、時間の経過とともにどうに変化するか、把握のためにアラートを送信します。
Steve: それは重要です。 それでは、問題を引き起こすサードパーティのコンテンツはいかがですか？
Mark: うーん、サードパーティーは好きになれません。
Steve: 悪いものではありません。私たちは、サイトで行う加算や分析、そしてウィジェットをありがたく思っています。ただし、サイト所有者が管理するコンテンツではないので、気になる部分は本当に可変させたほがいいと私は思います。
Mark: そうですね。
Steve: では、サードパーティコンテンツがどのように実行されているか、ユーザーエクスペリエンスにどう影響を及ぼしているかは不確実なわけですね。 私たちはそこで何ができますか？
Mark: そこで、これらのサービスの一部をまとめ、影響がどこにあるのかを理解できる、サードパーティの概要的なウォーターフォール図を用意しました。（[00:07:30]部分）。重要なことは、グラフ上のレンダリング開始ラインであり、それはサードパーティが潜在的にユーザーエクスペリエンスや見ているものに影響を与えている可能性があることを示しています。
Steve: 幸いなことに、サードパーティータグの多くは、非同期で読み込むようになりましたが、そうでないタグはたくさんあります。 ウォーターフォールは、私がSpeed Curveの中で気に入っている視覚効果の一つですが、そこではレンダリングブロックを起こすサードパーティタグのあるなしを確認することができます。 もちろん、ブロックするタグを見つけて修正することができれば幸いです。過去の事例ですが、ウィジェットの多くは最初はデフォルトで同期でしたが、その後は非同期に変更されたことがわかっています。ウオーターフォールグラフで、どこを調査をすべきかが分かります。検索するだけで、非同期バージョンを見つけられます
Mark: これらの技術は、ユーザーエクスペリエンスをサポートし、最前線に導く素晴らしい機能と方法です。私たちは時間をかけてもっと多く機能を追加し続けます。すべてをチェックしてください。それらは素晴らしいはずです。
