STATUS IS UPウェブサイト最適化ウィキ
03高速化
最適化の基礎 / 高速化

チームが守れるウェブサイトのパフォーマンス予算の設定方法

顧客にとって重要なジャーニーを基準に、ページ重量、読み込み、応答性の実効的な上限を作る方法。

チームが守れるウェブサイトのパフォーマンス予算の設定方法 — ビジュアルガイド
読む
8 分
出典
6
再検証
2027-03-27
レビュー済み
Web performance and release engineering reviewer
短い答え

まず決断から始める。

ウェブサイトのパフォーマンス予算は、重要なユーザージャーニーを数個選び、それらの現在の体験を測定し、リリースで実際に合格できる上限を合意することで設定します。ユーザー向けのターゲットを1〜2件と、初期JavaScript、画像、サードパーティリクエストなどの制御可能な上限を組み合わせます。例:モバイルの読み込みとインタラクションを75パーセンタイルで目標にし、初期JS・画像・外部リクエストにキャップを設ける。各上限には警告レベルとリリースを止めるエラーレベルを与えます。

汎用のページ重量(キロバイト)から始めないでください。プロダクトページ、検索結果、サインイン後のダッシュボードは目的が異なります。実ユーザーのフィールドデータがあればまず使い、重要なジャーニーはリリース前に一貫したラボテストで実行してください。ある機能が容量を使う場合は、他を削るか延期する、経路を改善する、または是正期限付きの例外を承認して対応することを検討します。

ビジュアルガイド

作業をシステムとして見る。

個別の戦術に取り掛かる前に、この記事の意思決定をこのマップで結び付けてください。

SIU高速化
01サイト平均ではなくジャーニーから始める
02成果と制御可能な入力を両方選ぶ
03基準値(ベースライン)から数値を設定する
04予算をリリースルールにする
01

サイト平均ではなくジャーニーから始める

遅延に明確な顧客や運用上のコストがあるジャーニーを3〜5件挙げます:キャンペーンページのランディング、商品検索、リードフォームの送信、サインイン、サポートリクエストの完了など。各ジャーニーについて、開始点、達成と見なす有用な結果、主要なデバイスクラス、および正常に動作すべきページや操作を書き出します。

各ジャーニーに独自の予算行を与えます。ダッシュボードは公開記事より多くのコードを含むかもしれませんが、フィルタ操作には応答性目標が必要です。メディアの多い商品ページは大きな画像を許容できても、主要な可視画像に対する上限は必要です。こうすることで、クリティカルパスの弱点がオリジン全体の平均に埋もれるのを防げます。

価値が提供される瞬間を定義する

訪問者が見たりできたりすること(オファーを読む、結果を見る、フォームの確認を受け取るなど)を名前で定義します。

新規とリピーターの経路を分ける

キャッシュによりアセットコストが大きく変わるため、予算が初回訪問、再訪問、または両方を想定しているかを記録します。

02

成果と制御可能な入力を両方選ぶ

成果指標(アウトカム)と入力上限の両方を使います。Google は Largest Contentful Paint(LCP)を読み込みの指標、Interaction to Next Paint(INP)をインタラクション応答性の指標、Cumulative Layout Shift(CLS)を視覚的安定性の指標として説明しています。推奨される良好な閾値は、モバイルとデスクトップを別にして75パーセンタイルで LCP ≤ 2.5 秒、INP ≤ 200 ミリ秒、CLS ≤ 0.1 です。

原因を早期に露出する上限を追加します:初期の JavaScript、主要コンテンツ前に必要な画像、ルート全体の転送量、サードパーティのリクエスト、既知の高コストウィジェットなど。圧縮後の転送サイズを一貫して追跡してください。診断指標として Time to First Byte(TTFB)は遅い読み込みを調査するのに役立ちますが、それ自体が顧客の体験結果ではありません。

読み込みの予算

ジャーニーが主要コンテンツの可視化に依存する場合は LCP を使います。

応答性の予算

検索、フィルタ、メニュー、チェックアウトなどにはフィールドの INP を使い、フィールドデータがないときはラボのプロキシを使います。

重量(ウェイト)の予算

初期ルートと最大寄与要素に上限を設け、違反時にどこを変えるべきかを明示します。

03

基準値(ベースライン)から数値を設定する

各ジャーニーのベースラインを取得します。PageSpeed Insights では、Chrome User Experience Report(CrUX)などのフィールドデータ(実際の Chrome ユーザーの体験を集計したもの)と、Lighthouse のようなラボデータ(制御されたテスト)を区別してください。フィールドデータはユーザーに到達する体験を確認し、ラボテストはリリース前に変更を再現可能にします。

少なくともモバイルとデスクトップでセグメントし、可能なら重要なテンプレートや URL ごとに区分します。PageSpeed Insights は URL データがない場合にオリジンデータにフォールバックすることがあり、CrUX データが存在しないページもあります。その場合はそのジャーニーをラボベースラインとしてラベル付けし、重要なジャーニーには実ユーザー計測を追加してください。各ベースラインにはテスト URL、デバイスとネットワークのプロファイル、キャッシュ状態、日付、ツールのバージョンを記録します。

現状より改善する計画的なステップになる目標を選び、代表的な条件でテストします。リリースを通常阻むような予算は簡単に回避され、現状より甘い予算は誰も保護しません。

パーセンタイルの読み方を正しくする

75パーセンタイルは観測された体験のうち75%がその値以下である点であり、平均値ではありません。

04

予算をリリースルールにする

予算をコードやリリースチェックリストのそばにバージョン管理されたレビュー可能な場所で保管します。各行にはジャーニー、指標、テストプロファイルまたは対象母集団、警告閾値、エラー閾値、オーナー、測定方法、例外ルートが必要です。MDN は警告レベルとエラーレベルを推奨しています:警告は事前計画を支援し、エラーは顕著な悪影響を伴う上限です。

信頼できるチェックを自動化します。バンドラは過大なアセットや初期エントリポイントを拒否できます。webpack は最大アセットやエントリポイント制限、および本番エラー警告をサポートします。プルリクエストやリリース候補で対象ジャーニーの再現可能なラボテストを実行してください。フィールド指標は不安定なビルドゲートではなく、リリース後の検証と優先順位付けのために保ちます。

上限が失敗したときは、アセットを削減する、不要なコードを延期する、体験を変える、リリースを分割する、または例外を承認します。ビルドを通すために閾値をひっそり引き上げてはいけません。

例外ルール

プロダクトと技術のオーナー、顧客影響、期限、是正タスクをリリース前に記録します。

ブロッキングルール

保護されたジャーニーについて再現可能なエラ―閾値でリリースをブロックし、警告閾値は通知して調査します。

05

ローンチ後の検証と是正

ページ重量だけでは完全な体験を予測できません。リクエスト順、レンダーブロッキング作業、デバイス能力、ネットワーク条件、キャッシュ、サードパーティも影響します。入力上限は成長を検出するために保ち、アウトカム指標でその経路が使えるかをテストします。W3C Resource Timing インターフェースは、詳細な診断のためにリソースのタイミングや転送、エンコード後・デコード後サイズを公開します。クロスオリジンのタイミング詳細は timing permissions によって制限されることがあるため、不完全なウォーターフォールがサードパーティコストの不存在を証明するわけではありません。

テンプレート、プラットフォーム、マーケティングタグ、トラフィックの大きな変更後にはフィールド結果をレビューします。LCP が悪化したらサーバー応答、LCP リソース、レンダーブロッキング作業を調査します。INP が悪化したら実際のインタラクションを検査します;Lighthouse はユーザー入力がないため INP を計測できませんが、Total Blocking Time はラボの代理指標です。SIU のプロアクティブな最適化ワークフローを使って違反をトリアージし、クリティカルパスを安定化させ、同じ計測コンテキストで修正を検証してください。

まず例外をレビューする

期限切れの例外は、一時的なパフォーマンス負債が恒久化したことを素早く明らかにします。

実行 / 検証

実践的なTo‑Doガイド。

  1. 01

    重要なジャーニーを選ぶ

    明確な顧客結果、テンプレートまたは URL、主要デバイスクラスを持つ3〜5の経路を選びます。

    検証: 共有リストが各ジャーニーの価値提供の瞬間を定義しています。
  2. 02

    ベースラインを取得する

    利用可能な場合はフィールド結果を保存し、上限設定の前に再現可能なラボ実行を行います。

    検証: 各記録に日付、URL、プロファイル、キャッシュ状態、ソースが含まれています。
  3. 03

    成果指標を割り当てる

    ジャーニーに合う場合にのみ読み込み、応答性、安定性の指標を使います。

    検証: 各重要ジャーニーに顧客向けのアウトカム指標があります。
  4. 04

    入力上限を追加する

    初期 JavaScript、必要な画像、転送、関連するサードパーティのリクエストに上限を設けます。

    検証: 違反があれば調査対象のアセットクラスや依存が特定されます。
  5. 05

    警告とエラーのレベルを定義する

    早期対応のために警告を、リリースブロックには再現可能なエラーを使います。

    検証: 予算はどの閾値が通知し、どの閾値がブロックし、誰が対応するかを明示しています。
  6. 06

    安定したチェックを自動化する

    バンドルチェックと再現可能なラボテストをデリバリーパスに追加します。

    検証: 提案変更はリリース前に可視な合格、警告、または失敗を返します。
  7. 07

    例外を明示化する

    違反時には影響、オーナー、期限、是正タスクを要求します。

    検証: 全ての有効な例外にはオーナーとレビュー日があります。
  8. 08

    リリース後に検証する

    十分なトラフィックが蓄積された後、フィールドや実ユーザーデータをレビューします。

    検証: リリース記録がプレリリース結果とポストリリースチェックをリンクしています。
  9. 09

    証拠に基づいて再ベースライン化する

    不便さだけでなく、重要なジャーニーやプラットフォームの変更があった場合に上限を変更します。

    検証: 予算変更は証拠、決定オーナー、有効日を記録します。
議論のテーマ

トレードオフを比較し、非公開データは共有しないでください。

これらのプロンプトをチームやサイトオーナーコミュニティで使ってください。手法や学びは共有して構いませんが、認証情報や顧客データ、非公開インフラの詳細を貼り付けないでください。

  1. 01

    サイト全体の平均に埋もれていたパフォーマンストレードオフを露出させたジャーニーはどれで、意思決定者にどう見える化しましたか?

  2. 02

    あなたのリリースプロセスで、パフォーマンス警告が無視されにくく有用になるには何が必要ですか?

  3. 03

    プロダクト、デザイン、エンジニアリングのオーナーは、機能が時間限定の例外に値するかどうかをどのように決めますか?

人気/信頼できる資料

出典資料を開く。

web.devPerformance budgets 101 ↗

Google の実践的なガイド:量的でユーザー中心のタイミング予算、ページ別上限、デリバリーチェックに関する説明。

レビュー日 2026-09-27
MDN Web DocsPerformance budgets ↗

予算の種類、警告とエラーレベル、ベースライン条件、ファイルサイズチェックの限界を説明。

レビュー日 2026-09-27
web.devWeb Vitals ↗

現在の Core Web Vitals を定義し、推奨閾値とフィールド対ラボ計測の注意点を示す。

レビュー日 2026-09-27
Chrome for DevelopersHow to view Chrome UX Report data on PageSpeed Insights ↗

PageSpeed Insights が CrUX のフィールドデータと Lighthouse の診断をどのように組み合わせ、URL データがない場合にどう扱うかを示す。

レビュー日 2026-09-27
W3CResource Timing ↗

バイト数や読み込みフェーズを調査するために使うブラウザのリソースタイミングデータに関する技術仕様(W3C Resource Timing)。

レビュー日 2026-09-27
webpackPerformance configuration ↗

webpack プロジェクト向けのビルド時アセットとエントリポイント上限、およびエラーレベルのパフォーマンスヒントに関するドキュメント。

レビュー日 2026-09-27

出典ポリシー 計測可能な主張は公式の技術文書や標準を用います。リソースは読者向けの参照であり、内部リンクや SID リンクはナビゲーション目的で、証拠ではありません。

簡単な補足

よくある質問

現実的なウェブサイトのパフォーマンス予算とは何ですか?

名前の付いたジャーニー、代表的なデバイスと接続、測定されたベースラインに紐づくものです。普遍的なキロバイト目標から始めず、計画的な改善ステップで始めてください。LCP や INP のような成果指標を、初期 JavaScript や必要画像の転送といった制御可能な上限と組み合わせます。警告はリリースブロック閾値より低く設定します。

Core Web Vitals をそのまま全部のパフォーマンス予算にしてよいですか?

いいえ。Core Web Vitals は有用な成果を表しますが、どのアセットや依存が増えたかを特定しません。ページ重量、リクエスト数、サードパーティ上限を追加して、チームがリリース前に制御できるようにします。各指標はジャーニーに適した場面で適用してください:フィルタ経路はインタラクションに注意が必要で、記事は読み込みと安定性が重要です。

Lighthouse は変更が実ユーザーにとって安全かを証明できますか?

いいえ。Lighthouse は制御されたラボテストで、リリース前の回帰を見つけますが、デバイス能力、ネットワーク、ユーザーの振る舞いはフィールドで変動します。Lighthouse は INP を計測できません。リリース制御には再現可能なラボ結果を使い、重要なジャーニーは利用可能ならフィールドや実ユーザーデータで検証してください。

Status Is UP Editorial Team · Uptime Enablement Editors

レビュー: Web performance and release engineering reviewer。公開 2026-09-27、更新 2026-09-30。