Webパフォーマンス予算ツール — バンドルサイズとCore Web Vitalsを管理

使い方

1. 「プリセットから始める」でサイト種別（ECサイト・ブログ・SPA・LP）を選択すると、推奨予算値が自動入力されます。
2. 「リソース予算設定」でJS・CSS・画像・フォント・合計のサイズ上限をKB単位で入力してください。
3. 「実際のサイズ」欄に、Chrome DevTools や Lighthouse で計測した実際のバンドルサイズを入力します。プログレスバーで予算消費率を即時確認できます。
4. 「Core Web Vitals 目標設定」でLCP・INP・CLSの目標値をスライダーで設定してください。Googleの基準（Good / Needs Improvement / Poor）でカラー表示します。
5. 設定は「JSONでダウンロード」でファイルに保存し、チームメンバーと共有できます。「JSONを読み込む」で以前の設定を復元できます。
6. 入力内容はブラウザのlocalStorageに自動保存されるため、再訪問時も設定が引き継がれます。

パフォーマンス予算とは

パフォーマンス予算（Performance Budget）とは、Webページのリソースサイズや読み込み速度の上限値をあらかじめ定めたルールセットです。フロントエンドエンジニアやチームがパフォーマンスを維持するための「予算」として活用します。例えば「JavaScriptは300KB以下に抑える」「LCPは2.5秒以内」などの目標を設定することで、機能追加や依存関係の増加がパフォーマンスに与える影響を定量的に把握できます。Calibre・SpeedCurve・Webpack Bundle Analyzerなどのツールと組み合わせて継続的に監視するのが一般的です。

Core Web Vitals（CWV）について

Core Web Vitalsは、Googleが定めるWebパフォーマンスの主要指標群です。LCP（Largest Contentful Paint）はページの主要コンテンツが表示されるまでの時間を計測し、2.5秒以内がGoodとされます。INP（Interaction to Next Paint）はユーザー操作への応答速度を示し、200ms以下がGoodです。CLS（Cumulative Layout Shift）はページ読み込み中のレイアウトの安定性を測り、0.1以下がGoodとされています。Core Web VitalsはGoogleの検索ランキングシグナルの一部にもなっており、SEOの観点からも重要な指標です。定期的にLighthouseやPageSpeed Insightsで計測し、本ツールで設定した目標値と比較することで、パフォーマンスの改善サイクルを回すことができます。

プリセット値の根拠

本ツールのプリセット値は、HTTP Archive・Web Almanac・GoogleのCWVガイドラインを参考に設定しています。ECサイトはカート機能・決済JSなどの重みを考慮し、ブログは軽量な構成を前提にしています。SPAはJavaScriptバンドルが大きくなりやすい特性を踏まえた値です。LPはコンバージョン重視のため、読み込み速度を最優先にしたやや厳しめの値を設定しています。プリセットはあくまで出発点として活用し、実際の計測値に合わせて調整してください。

プライバシーについて

入力したデータはすべてブラウザ内で処理されます。外部サーバーへのデータ送信は一切行いません。