✨ 無料・登録不要

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

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で出力

使い方

目標を設定

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

ネットワーク条件を選択

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

リソース配分を確認

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

レポートを出力

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

よくある質問

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

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

Core Web Vitalsとの関係は？

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

画像サイズの目安は？

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

JavaScript量の上限は？

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