実践：パフォーマンスバジェット（予算）の設定の仕方

目的：パフォーマンスバジェットはどうやって設定するのか？目標設定と効果検証について

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次指標ですが、優れたユーザーエクスペリエンスとの相関関係はありません。 ユーザーはウェブサイトの構築方法などを気にしていません。 気にしているのは、コンテンツの閲覧に、どれくらい時間がかかるかだけなので、すばやくコンテンツを見せることに注力すべきです。

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

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

カスタムメトリックを上手に定義する

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

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

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

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

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

 

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

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

 

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

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

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

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