サポート

パフォーマンスパジェット(予算)の実践

パフォーマンスパジェット(予算)の実践

目的:パフォーマンスバジェット(予算)の設定の仕方。およびこれ通知を使った各社の活用事例についてです。

Mark Zeman 2015年10月20日

パフォーマンスパジェットは、サイトが優れたユーザーエクスペリエンスを提供するための重要なツールです。 Steveは、Googleのパフォーマンスエンジニアのリーダーとして、パフォーマンスパジェットを体験してきました。 パフォーマンスの追求において予算をつける試みは、Tim Kadlecのブログ記事「パフォーマンスバジェットの設定」をみてください。 始め方はパフォーマンス目標を定義し、目標達成に有効な指標を追うことです。

SpeedCurveでは、ダッシュボードでパフォーマンスバジェットをトラッキングできますが、最優先でバジェットを設定するようにします。 ここでは、イメージサイズのバジェットを追跡する例を示します。

パフォーマンスパジェットの設定の前に、まずユーザーエクスペリエンスをモニタリングする必要があります。 ベースラインのユーザーエキスペリエンスを改良するには、単純に予算と目標値を設定します。

そうすれば行った改善点を定量化し、組織全体で成功例を共有することができます。「私たちは、バジェットの半分にまで、イメージリクエスト数を削減し、Start renderを32%向上させました」。

 

バジェットはどうあるべき?

パフォーマンスバジェットの設定には、チームの特徴に応じていくつかの方法がありますが、チームメンバーにとって、有意義で変革のための「動機付け」がなにより大切です。

  • ライバルよりも速くする。 いくつかの指標をベンチマークし、20%ほど速くする、またはリソース削減を目標を設定します。
  • 今のWebよりも速くする。コードを直したり取り除いたり、次から次へデザインし直すことは大変です。 積極的にバジェット立てることで、新しい要素やコテンツの追加たびにアラートを出して監視します。
  • Response Times: The 3 Important Limits.で説明されているようなHuman Computer Interface(HCI)のガイドラインを採用します。 First meaningful contentsの表示に10秒未満を目指します。
  • Better performance through better designなど、ユーザー調査とデザインポリシー基づいて予算を設定します。ユーザーは何を達成しようとしているか、どれくらい待てますか?

SpeedCurveのベンチマークダッシュボードは、バジェットを設定し競合比較するには最適な方法です。 下のチャートでは、Smashing Magazineが他のメディアに比べて、いかに高速であるか、その理由として、 彼らができるだけJSを減らしているかがわかります。自社サイトでJSリクエストのような指標を選べるならば、低いバジェットを設定して、競合に勝てるかどうかを確認できます。

 

すべてのメトリック(指標)は同じではない。

どのメトリック(指標)を評価するかは非常に重要です。 長い間、私たちは、ユーザー・エクスペリエンスの指標と言われるページ・ロード・イベントを使っていました。いまだに多くのパフォーマンス・ツールや団体がページロードをパフォーマンスの重要指標としています。

SpeedCurveでは、これまで数多くのサイトを監査してきました。巨大なサイトでも間違ったメトリックで最適化したり、パフォーマンスガイドラインをそのままで対応することで、逆にユーザーエクスペリエンスが悪くなることを経験しています。

例えば、リッチな画像でユーザー満足度を上げ、カルーセルを使って多くの商品画像を見せてあげると、利便性が高まり、商品が売れるなど、日本市場でも、実に多くの根拠のない手法が一般化しています。

組織全体で大切にすべきは、レンダリング時にユーザーが見ている状況を正しく表す指標です。 ほかの指標は、サイト変化を追いかけるのに役立つ2次指標ですが、優れたユーザーエクスペリエンスとの相関関係はありません。 ユーザーはウェブサイトの構築方法などを気にしていません。 気にしているのは、コンテンツの閲覧に、どれくらい時間がかかるかだけなので、すばやくコンテンツを見せることに注力すべきです。

ここに問題があります。多数の指標は、ユーザーが実際に見ている視覚的な指標ではなく、ブラウザで実行されるプロセス・イベントにすぎません。これら2つのメトリックは、まったく異なる表示をしてしまいます。理由は、SpeedCurveは、オープンソースの主要パフォーマンスツールであるWebPageTestを基に構築されてるからです。

WebPageTestでは、ビデオを記録し、実際のWebブラウザでどのようにページが読み込まれるかをFilmstrip作成し、ブラウザの中の動きではなく、利用するユーザーの視覚分析に基づいた測定基準です。 Start renderSpeedIndexの2つは、ユニークな独自の指標です。 これらメトリックは、ブラウザ内のイベント処理よりも、はるかに正しくユーザーエクスペリエンスを表します。

 

自分のカスタムメトリックをより良く定義する

Start renderとSpeed Indexは優れた指標ですが、最終的に、自ら定義した指標です。 最初のツイートのように、ユーザーは自社のコンテンツを実際に見て、やりとりできる状態を表すカスタムメトリックを追加する必要があります。 カスタムのメトリックはユーザーのタイミングマークで簡単に追加でき、SpeedCurveは追加設定なしでサイトに追加されたマークを自動的に選択します。 Steveは、ヒーローイメージのカスタムメトリックの中で、イメージ画像の資産を追跡することにの意義にについて議論しました。

パフォーマンスバジェットのための推奨メトリック

ユーザーエクスペリエンスをベンチマークする指標を優先度の高い順に示します。

      1. 各ページのUXについてカスタムメトリック。 たとえば、商品ページのヒーローイメージ
      2. SpeedIndexPaul Irishは1000以下に目指すことをススメテいます。

 

これらのメトリックを基に、パジェットを選び、アラートを設定し、コードを進化させて改善するように監視します。 リクエスト数のサイズ数などの二次バジェットを追加して、コードの改善とユーザエクスペリエンスの関連付けを支援することもできます。上記の3つは本当に重視すべきものです。

実践 パフォーマンスバジェット

SpeedCurveの予算アラートが、Zillow(不動産サイト)のモバイル画像サイズを4倍に増やした、Bigger、Faster、More Engagementのバグを発見する方法という記事をみてください。興味深いことに、イメージの増加は、SpeedIndexとユーザーエクスペリエンスに顕著な影響を与えませんでした。 これは、Zillowが、ビューポートの最初のコンテンツがすぐにレンダリングされ、以前よりも多くのコンテンツを閲覧できることを意味するでしょうか?  パフォーマンスバジェットを破ると、ユーザーがコンテンツとやりとりする方法には、興味深い洞察が得られます。

The VergeSB Nationの版元であるVox Mediaは、競争相手をベンチマークすることでパフォーマンス破産を宣言しました。 これは、コミュニティとの絆を作り、リッチで高速なユーザーエクスペリエンスを提供するというチャレンジに対して透明性をつくる素晴らしい方法です。

誰かが「あなたのサイトはどれくらい速いのですか?」と尋ねると、すぐに答えを出すのは難しいのです。 私たちは、Voxでパフォーマンスを定量化する方法についてチームに教育しています。これは、それぞれの指標のどういう意味を持つか?お互いにどう作用するか?を説明しようとしています。

Etsy(雑貨販売)は、パフォーマンスと彼ら自身が設定したバジェット達成のレポートを公開する素晴らしい仕事をしました。

パフォーマンスバジェットは、楽しく、より速いユーザーエクスペリエンスの提供を確固とする素晴らしい方法です。 しかし、正しいメトリックを選択し、適切なしきい値を設定した場合にのみ機能します。 カスタムメトリック、Speed Index、start renderなど、ユーザーエクスペリエンスをより正確に測定するメトリックに焦点を当てることをオススメします。 これらのメトリックはすべてSpeedCurveで利用できます。 ユーザーが実際に見ているものを測定し、それを追跡してより速く配信できるようにすることに重点を置いています。

 

 

 

 

 

 

関連記事

コメント

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

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

CAPTCHA