パフォーマンスはユーザー エクスペリエンスの重要な要素であり、ビジネス指標に影響を与えます。優秀なデベロッパーならサイトのパフォーマンスが上がるのではないかと考えがちですが、実際には、パフォーマンスが優れていても副作用はほとんどありません。他の多くのことと同様に、目標を達成するには、目標を明確に定義する必要があります。まず、パフォーマンス バジェットを設定します。
定義
パフォーマンス バジェットとは、サイトのパフォーマンスに影響する指標に適用される一連の制限です。ページの合計サイズや、モバイル ネットワークでの読み込みにかかる時間、送信された HTTP リクエストの数などがあります。予算を定義することで、ウェブ パフォーマンスに関する検討を始めることができます。設計、テクノロジー、機能の追加に関する決定を行う際の基準となります。
予算があることで、デザイナーは高解像度の画像の効果や、選択するウェブフォントの数について考えることができます。また、デベロッパーは問題に対するさまざまなアプローチを比較し、サイズと解析費用に基づいてフレームワークとライブラリを評価できます。
指標を選択
数量ベースの指標 ⚖️
これらの指標は、サイズの大きな画像やスクリプトを含めることによる影響を強調するため、開発の初期段階に役立ちます。また、デザイナーとデベロッパーのどちらとも簡単にコミュニケーションを取ることができます。
パフォーマンス バジェットに含めることができる項目（ページの重み付け、HTTP リクエスト数など）についてはすでに説明しましたが、次のように、より細かい制限に分けることができます。
- 画像の最大サイズ
- ウェブフォントの最大数
- スクリプト（フレームワークを含む）の最大サイズ
- サードパーティ スクリプトなどの外部リソースの合計数
ただし、これらの数値からユーザー エクスペリエンスについての具体的な情報が分かりません。同じリクエスト数または重みが同じ 2 つのページが、リソースがリクエストされる順序によって、レンダリング方法が異なる場合があります。いずれかのページのヒーロー画像やスタイルシートなどの重要なリソースの読み込みが遅くなると、ユーザーは役に立つ情報を表示して、ページが遅いと認識するまでの時間が長くなります。別のページで最も重要な部分がすばやく読み込まれる場合、ページの残りの部分が読み込まれなくても、ユーザーは気づかないことがあります。
そのため、別の種類の指標を追跡することが重要です。
マイルストーンのタイミング Ұ️
マイルストーンのタイミングは、ページの読み込み中に発生するイベント（DOMContentLoaded イベントや load イベントなど）をマークします。最も有用なタイミングは、ページの読み込みエクスペリエンスに関する何かを示すユーザー中心のパフォーマンス指標です。これらの指標は、ブラウザ API を介して、Lighthouse レポートの一部として使用できます。
First Contentful Paint（FCP）は、ブラウザが DOM からコンテンツ（テキストや画像など）の最初の部分を表示するタイミングを測定します。
Time to Interactive（TTI）は、ページが完全にインタラクティブになり、ユーザー入力に確実に応答するまでの時間を測定します。ページ上でのリンクやボタンのクリック、入力、フォーム要素の使用など、なんらかのユーザー インタラクションが予想される場合は、トラッキングが非常に重要な指標となります。
ルールベースの指標 Ц
Lighthouse と WebPageTest は、ガイドラインとして使用できる一般的なベスト プラクティス ルールに基づいてパフォーマンス スコアを計算します。また、簡単な最適化のヒントも提供します。
最良の結果を得るには、数量ベースのパフォーマンス指標とユーザー中心のパフォーマンス指標を組み合わせて使用します。プロジェクトの初期段階ではアセットのサイズに重点を置き、できるだけ早く FCP と TTI の追跡を開始します。
ベースラインを確立する
自分のサイトにとって何が最適かを知る唯一の方法は、実際に試すこと、つまりリサーチを行い、その結果をテストすることです。競合状況を分析し、貴社のパフォーマンスを把握します。🕵️
お時間がない場合は、まずは以下のデフォルトの数字をご用意ください。
- 操作可能までの時間: 5 秒未満
- 170 KB 未満のクリティカル パス リソース（圧縮/圧縮）
これらの数値は、実際のベースライン デバイスと 3G ネットワークの速度に基づいて計算されます。今日のインターネット トラフィックの半分以上はモバイル ネットワークで発生するため、出発点として 3G ネットワーク速度を使用する必要があります。
予算の例
サイトのページの種類によってコンテンツは異なるため、適切な予算を立てる必要があります。次に例を示します。
- 商品ページで配信する JavaScript は 170 KB 未満でなければなりません（モバイルの場合）
- 検索ページに表示される画像は、パソコンで 2 MB 未満にする必要があります
- Moto G4 の低速 3G で 5 秒未満でホームページを読み込んで操作できる必要があります
- Lighthouse のパフォーマンス監査で、ブログのスコアが 80 を超えている
ビルドプロセスにパフォーマンス バジェットを追加する
そのためのツールの選択は、プロジェクトの規模と、そのタスクに専念できるリソースによって大きく異なります。ビルドプロセスに予算を追加するのに役立つオープンソース ツールがいくつかあります。
定義済みのしきい値を超える場合は、次のいずれかを行います。
- 既存の対象物やアセットを最適化する 🛠?️
- 既存の機能やアセットを削除する 🗑?️
- 新しい機能やアセットを追加しない 🅰?⛔
パフォーマンスのトラッキング
サイトの速度を十分に確保するには、リリース後も測定を続ける必要があります。これらの指標を時系列でモニタリングし、実際のユーザーからデータを取得することで、パフォーマンスの変化が主要なビジネス指標にどのように影響するかを把握できます。
まとめ
パフォーマンス バジェットの目的は、プロジェクト全体を通してパフォーマンスを重視し、早い段階で設定することで、後で後戻りを防ぐことです。ウェブサイトに記載する内容を決める際の参考にしてください。主なアイデアは、機能やユーザーエクスペリエンスを損なうことなくパフォーマンスのバランスを改善できるように目標を設定することです。
次のガイドでは、最初のパフォーマンス バジェットをいくつかの簡単な手順で定義する方法について説明します。