無料・登録不要

パフォーマンスバジェット設計

LCP/INP/CLSやJS/CSSサイズの目標値を設定し、Lighthouse CI用のJSON設定ファイルを出力します。

このツールをシェア

シェア送るシェア

目標値を設定

各メトリクスの目標値を入力してください。空欄にするとバジェットから除外されます。

Core Web Vitals

LCP — Largest Contentful Paint (ms)

良好

良好: ≤2500ms / 要改善: ≤4000ms / 低速: >4000ms

FID / INP — Interaction to Next Paint (ms)

良好

良好: ≤200ms / 要改善: ≤500ms / 低速: >500ms

CLS — Cumulative Layout Shift

良好

良好: ≤0.1 / 要改善: ≤0.25 / 低速: >0.25

読み込みタイミング

TTI — Time to Interactive (ms)

良好

良好: ≤3800ms / 要改善: ≤7300ms / 低速: >7300ms

TBT — Total Blocking Time (ms)

良好

良好: ≤200ms / 要改善: ≤600ms / 低速: >600ms

リソースバジェット

Total Bundle Size (KB)

推奨内

JS: ≤170KB / CSS: ≤50KB / 画像: ≤1000KB

Image Budget (KB)

推奨内

WebP/AVIF使用推奨。合計1000KB以内が目安

Lighthouseスコア目標

Performance Score (0–100)

高品質

90–100: 良好 / 50–89: 要改善 / 0–49: 低速

Accessibility Score (0–100)

高品質

90以上を目標に。JIS X 8341準拠はAA相当以上

生成結果

メトリクス	目標値	良好しきい値	判定

lighthouserc.json

このツールについて

Webサイトのパフォーマンスバジェットを設計・管理する無料ツールです。ページサイズ、リクエスト数、読み込み時間の目標値を設定し、リソースの配分を最適化します。

バジェット設計

ページサイズ・リクエスト数の目標値を設定

ネットワーク別

3G/4G/5G/Wi-Fi別の読み込み時間を算出

レポート出力

パフォーマンスバジェット表をMarkdown/CSVで出力

活用シーン

フロントエンドエンジニア

Core Web Vitalsの目標値を設定したいとき

LCP/INP/CLSの目標をGUIで設定しLighthouse CI用JSONを出力

テックリード

プロジェクトのパフォーマンス基準を定めたいとき

リソースバジェット表を自動生成しチームで共有

ディレクター

サイト速度の改善目標をクライアントに提示したいとき

目標値と判定を一覧表示、わかりやすいレポート出力

使い方

目標を設定

ページの読み込み時間目標（例：3秒以内）を設定します。

ネットワーク条件を選択

ターゲットユーザーのネットワーク環境（4G等）を選びます。

リソース配分を確認

自動算出されたリソースごとのバジェット配分を確認します。

レポートを出力

バジェット表をMarkdown/CSV形式で出力し、チームに共有します。

よくある質問

パフォーマンスバジェットとは？

Webページの読み込み速度に影響するリソース（画像、JS、CSS等）のサイズ上限を事前に決めておく手法です。

Core Web Vitalsとの関係は？

パフォーマンスバジェットを守ることで、LCP、FID、CLSなどのCore Web Vitals指標の改善につながります。

画像サイズの目安は？

一般的なWebページでは、画像総量を1MB以内に抑えることが推奨です。WebPやAVIF形式の活用も重要です。

JavaScript量の上限は？

モバイルファーストの場合、圧縮後のJS総量は170KB以内が目安です（3Gネットワーク想定）。