モバイルファーストパフォーマンスバジェットの設定
低速3G接続のモバイルユーザー向けに最適化されたパフォーマンスバジェットの定義方法を学びます。モバイルファーストWeb開発における合計ページ重量、JavaScript制限、タイミング目標をカバー。
詳細な説明
モバイルファーストパフォーマンスバジェット
モバイルファーストパフォーマンスバジェットは、ユーザーが経験する最も遅い接続の制約から始めます。典型的な低速3G接続（0.4 Mbps）では、すべてのキロバイトが読み込み時間に測定可能な影響を与えます。
モバイルバジェットの計算
重量ベースのバジェットの公式：
合計バジェット (KB) = 接続速度 (Mbps) x 目標読み込み時間 (秒) x 125
低速3G（0.4 Mbps）で5秒目標の場合：0.4 x 5 x 125 = 250 KB合計。
Fast 3G（1.6 Mbps）で3秒目標の場合：1.6 x 3 x 125 = 600 KB合計。
推奨モバイルファースト制限
| カテゴリ | バジェット |
|---|---|
| 合計ページ | 300 KB |
| JavaScript | 100 KB |
| CSS | 40 KB |
| 画像 | 100 KB |
| フォント | 40 KB |
| リクエスト | 20 |
| TTFB | 600 ms |
| FCP | 1500 ms |
| LCP | 2000 ms |
JavaScriptに最も厳しい制限がある理由
JavaScriptにはダウンロードサイズ以上のユニークなコストがあります。デコードのみが必要な画像と異なり、JavaScriptはパース、コンパイル、実行が必要です。中価格帯のスマートフォンでは、100 KBのJavaScriptのパースに300-500 msかかる可能性があり、インタラクティビティをブロックします。
プログレッシブエンハンスメント戦略
モバイルファーストバジェットでは、厳しい制約内でコア体験を構築し、高速な接続向けに段階的に拡張します：
- コア体験 — HTML + クリティカルCSS + 最小限のJS（モバイルバジェットに収まる）
- 拡張体験 — 追加のインタラクティビティ、非クリティカルCSS（デスクトップバジェットに収まる）
- フル体験 — リッチアニメーション、高解像度画像、Webフォント（ブロードバンドのみ）
モニタリングと実施
Lighthouse CIやbundlewatchなどのツールを使用してCI/CDパイプラインで自動チェックを設定します。このトラッカーからバジェットをJSONとしてエクスポートし、これらのツールの設定として使用します。
ユースケース
モバイルファーストバジェットは、グローバルなオーディエンスをターゲットとするすべてのサイトに不可欠です。新興市場では、ほとんどのユーザーが3Gまたは低速4G接続で中価格帯のAndroidデバイスからWebにアクセスします。モバイルファーストバジェットを設定し実施するEコマースサイトは、モバイルデバイスでのコンバージョン率が15-30%改善することがよくあります。