モバイル3G向けパフォーマンスバジェットの設定
モバイル3G接続のユーザー向けに現実的なパフォーマンスバジェットを計算。3秒の読み込み目標で600 KBをHTML、CSS、JS、画像、フォントに配分する方法を解説。
Fundamentals
詳細な説明
モバイル3G向けパフォーマンスバジェット
モバイル3Gネットワークは一般的に約1.6 Mbpsのダウンロード速度と300-400msのレイテンシを提供します。これらの条件はグローバルインターネットユーザーの大部分、特に新興市場のユーザーを代表しています。3G向けの設計はエッジケースではなく、ベースラインです。
600 KBバジェット
1.6 Mbpsで3秒の目標読み込み時間の場合：
1.6 Mbps × 3秒 × 125 = 600 KB
この600 KBは、ブラウザがページをレンダリングするためにダウンロードするすべてをカバーする必要があります：HTML、CSS、JavaScript、画像、フォント、ファビコン、アナリティクススクリプト、およびサードパーティリソース。
3G向け推奨配分
| カテゴリ | バジェット | 理由 |
|---|---|---|
| HTML | 30 KB | 圧縮されたマークアップ、サーバー圧縮 |
| CSS | 40 KB | クリティカルCSS インライン化、残りは遅延 |
| JavaScript | 150 KB | フレームワーク + アプリコード、ツリーシェイキング |
| 画像 | 280 KB | レスポンシブ画像、WebP/AVIF形式 |
| フォント | 60 KB | 1-2フォントファイル、使用文字にサブセット |
| その他 | 40 KB | アナリティクス、ファビコン、マニフェスト |
3GでJavaScriptが最も影響する理由
JavaScriptは低速接続と低スペックデバイスでユニークに高いコストがかかります：
- ダウンロード時間 — 150 KBは3Gで約0.75秒
- パース時間 — モバイルCPUはデスクトップCPUの3-5倍遅い
- 実行時間 — ハイドレーション、イベントリスナー、初期化でさらに遅延
- ブロッキング — レンダーブロッキングスクリプトは他のすべての処理を停止
3G向け最適化戦略
- クリティカルCSSのインライン化 — ファーストビューのスタイルの追加ラウンドトリップを回避
- 非クリティカルJSの遅延 —
asyncとdefer属性を使用、積極的なコード分割 - モダン画像形式の使用 — WebPはJPEGより25-35%節約、AVIFは40-50%節約
- フォントのサブセット —
unicode-rangeとglyphangerなどのツールで必要な文字のみ含める - 圧縮の有効化 — Brotliはテキストアセットをgzipよりさらに15-20%削減
- キャッシュヘッダーの設定 — リピーターは後続の訪問でほぼ何もダウンロードしないようにする
ユースケース
モバイル3Gバジェットの計画は、グローバルオーディエンスをターゲットとするチームにとって不可欠です。特に南アジア、東南アジア、アフリカ、ラテンアメリカなど3Gが依然として主流の地域では重要です。国際展開するECサイトは、潜在的な顧客を失わないよう、3Gで3秒以内にプロダクトページが読み込まれることを保証する必要があります。プログレッシブウェブアプリ（PWA）はモバイルファーストの体験をターゲットとするため、厳格な3Gバジェットが特に有効です。