個人、ビジネス、家族の予算を設定すると、支出に上限を設定し、その範囲内に収まるようにすることができます。パフォーマンス バジェットの仕組みは変わりませんが、ウェブサイトのパフォーマンスに影響する指標に対して行われます。
パフォーマンス バジェットを確立し、適用することで、サイトが可能な限り迅速にレンダリングされるようにすることができます。これにより、ユーザーの利便性が向上し、ビジネス指標にプラスの影響を与えます。
ここでは、最初のパフォーマンス バジェットを簡単な手順で設定する方法について説明します。
予備分析
既存のサイトのパフォーマンスを改善するには、まず最も重要なページを特定します。たとえば、ユーザー トラフィックが最も多いページや商品のランディング ページなどです。
重要なページを特定したら、次はそのページを分析します。まず、ユーザー エクスペリエンスを最も効果的に測定するタイミングのマイルストーンに焦点を当てます。
Chrome DevTools の [監査] パネルの下に Lighthouse があります。ゲスト ウィンドウの各ページで監査を 2 回記録します。
非常に特殊な検索エンジンである Doggos.com を例に考えてみましょう。doggos.com はインターネット上のすべての犬関連のコンテンツをインデックスに登録することを目指しており、最も重要なページはホームページと検索結果ページです。パソコンとモバイルで測定したサイトの FCP と TTI の数値は次のとおりです。
| パソコン | FCP | おすすめスポット |
|---|---|---|
| ホームページ | 1,680 ミリ秒 | 5,550 ミリ秒 |
| 結果ページ | 2,060 ミリ秒 | 6,690 ミリ秒 |
| モバイル | FCP | おすすめスポット |
|---|---|---|
| ホームページ | 1,800 ミリ秒 | 6,150 ミリ秒 |
| 結果ページ | 1,100 ミリ秒 | 7,870 ミリ秒 |
競合分析
自分のサイトを分析したら、次は競合他社のサイトを分析します。類似したウェブサイトの結果を比較することで、パフォーマンス バジェットを把握しやすくなります。すでに確立されたプロジェクトに取り組んでいる場合でも、ゼロから始める場合でも、これは重要なステップです。競合他社よりも速くなれば、競争上の優位性が得られます。
どのサイトを確認すればよいかわからない場合は、次のツールをお試しください。
- Google 検索の「related:」キーワード
- Alexa の類似サイト機能
- SimilarWeb
現実的な状況を把握するため、10 社ほどの競合相手を見つけるようにします。
スケジュールのマイルストーンの予算
この例では、ニッチな検索エンジンには数社の競合他社が関わっているため、ホームページをモバイル デバイス向けに最適化することに焦点を当てます。今日、インターネット トラフィックの半分以上はモバイル ネットワーク経由で発生しています。携帯電話番号をデフォルトで使用すると、モバイル ユーザーだけでなくパソコン ユーザーにもメリットがあります。
類似するすべてのウェブサイトの FCP 時間と TTI 時間を含むグラフを作成し、最も時間がかかったサイトをハイライト表示します。このようなグラフを見ると、ウェブサイトのパフォーマンスを競合商品と比較して明確に把握できます。
| サイト/ホームページ | FCP | おすすめスポット |
|---|---|---|
| goggles.com | 880 ミリ秒 | 3,150 ミリ秒 |
| Doggos.com | 1,800 ミリ秒 | 6,500 ミリ秒 |
| quackquackgo.com | 2,680 ミリ秒 | 4,740 ミリ秒 |
| ding.xyz | 2,420 ミリ秒 | 7,040 ミリ秒 |
まだ改善の余地があり、そのためのガイドラインとして 20% ルールがあります。調査によれば、ユーザーは応答時間が 20% を超える場合に差があることを認識しています。つまり、比較可能な最良のサイトよりも明らかに改善するには、少なくとも 20% 高速化する必要があります。
| 測定 | 現在の時刻 | 予算（競合他社より 20% 速い） |
|---|---|---|
| FCP | 1,800 ミリ秒 | 704 ミリ秒 |
| おすすめスポット | 6,500 ミリ秒 | 2,520 ミリ秒 |
既存のサイトを最適化しようとしても、その目標を達成することは不可能に思えるかもしれません。これはあきらめるためのサインではありません。小さなステップから始めて、現在の速度より 20% 速く予算を設定します。そこから最適化を継続します。
Doggos.com の場合、修正後の予算は次のようになります。
| 測定 | 現在の時刻 | 初期予算（現在の時間より 20% 速い） | 長期的な目標（競合他社より 20% 高速） |
|---|---|---|---|
| FCP | 1,800 ミリ秒 | 1,440 ミリ秒 | 704 ミリ秒 |
| おすすめスポット | 6,500 ミリ秒 | 5,200 ミリ秒 | 2,520 ミリ秒 |
さまざまな指標を組み合わせる
堅実なパフォーマンス バジェットとは、さまざまな種類の指標を組み合わせたものです。マイルストーンのタイミングに対する予算は定義済みですが、さらに次の 2 つを追加します。
- 数量ベースの指標
- ルールベースの指標
数量ベースの指標の予算
ページの重量の合計が何であれ、170 KB 未満のクリティカル パス リソース（圧縮/圧縮）を配信するようにしてください。これにより、安価なデバイスや低速の 3G でも、ウェブサイトの速度が保証されます。
パソコン向けの予算は多めに確保できますが、無理は禁物です。昨年の HTTP Archive データによると、パソコンとモバイルの両方のページ ウェイトの中央値は 1 MB を超えています。ウェブサイトのパフォーマンスを高めるには、この中央値を大きく下回ることを目指します。
TTI 予算に基づく例を次に示します。
| ネットワーク | デバイス | JS | 画像 | CSS | HTML | フォント | 合計 | インタラクティブ予算の確保までの時間 |
|---|---|---|---|---|---|---|---|---|
| 低速 3G | Moto G4 | 100 | 30 | 10 | 10 | 20 | ～ 170 KB | 5 秒 |
| 4G（低速） | Moto G4 | 200 | 50 | 35 | 30 | 30 | ～ 345 KB | 3 秒 |
| WiFi | パソコン | 300 | 250 | 50 | 50 | 100 | ～ 750 KB | 2 秒 |
数量指標に基づいて予算を定義するのは難しい作業です。商品の写真がたくさんある e コマース ウェブサイトは、テキストがほとんどであるニュース ポータルとは大きく異なります。サイトに広告やアナリティクスを使用している場合、送信する JavaScript の量が増えます。
上記の表を出発点として、扱うコンテンツの種類に応じて調整してください。ページの内容を定義し、調査結果を確認して、個々のアセットのサイズを根拠に推測します。たとえば、大量の画像を使用するウェブサイトを構築する場合は、JS のサイズに対する制限を厳しくします。
正常に機能するウェブサイトを作成したら、ユーザー中心のパフォーマンス指標でパフォーマンスを確認し、予算を調整します。
ルールベースの指標の予算
ルールベースの指標として非常に効果的なのは、Lighthouse のスコアです。Lighthouse は、アプリを 5 つのカテゴリで評価し、そのうちの 1 つがパフォーマンスです。パフォーマンス スコアは、First Contentful Paint や操作可能になるまでの時間を含む 5 種類の指標に基づいて計算されます。
優れたサイトを構築する際は、Lighthouse のパフォーマンス スコアの予算を 85 以上（100 点満点中）に設定します。Lighthouse CI を使用して pull リクエストに適用します。
優先順位付け
サイト上でどの程度のインタラクションが想定されるかを確認しましょう。ニュースサイトの場合、ユーザーはコンテンツを読むことを第一の目標としているため、レンダリングを高速化し、FCP を低く抑えることに注力する必要があります。Doggos.com の訪問者は、関連リンクをできるだけ早くクリックしたいと考えているため、TTI を低くすることが最優先です。
パソコンとモバイル デバイスで閲覧しているユーザーを正確に把握し、それに応じて優先順位を付けます。競合他社のウェブサイトでのオーディエンスの行動を Chrome ユーザー エクスペリエンス レポートのダッシュボードから確認するのも 1 つの方法です。
次のステップ
パフォーマンス バジェットがプロジェクト全体に適用されるようにし、それをビルドプロセスに組み込みます。