サイトタイプ別の総ページウェイト目標
異なるWebサイトタイプ（ブログ、EC、SPA、ダッシュボード、ランディングページ）の推奨総ページウェイト目標を確認。業界ベンチマークと中央値のページウェイトを含みます。
Fundamentals
詳細な説明
総ページウェイト目標
HTTP Archiveはウェブの状態を追跡し、2024年の中央値ページウェイトはデスクトップで約2.5 MB、モバイルで2.2 MBと報告しています。これらの数値は良いパフォーマンスには高すぎます。業界の中央値以下に明示的なウェイト目標を設定することで、サイトに競争優位性をもたらします。
サイトタイプ別の推奨目標
| サイトタイプ | 目標ウェイト | 備考 |
|---|---|---|
| ブログ/コンテンツ | 400-600 KB | テキスト中心、インタラクティブ要素少 |
| ランディングページ | 300-500 KB | 単一フォーカス、最小限のナビゲーション |
| ECサイト商品ページ | 600-900 KB | 商品画像がウェイトの大部分 |
| SPA（初期読み込み） | 500-800 KB | 重いJSフレームワーク、ルートのコード分割 |
| ダッシュボード | 400-700 KB | データ駆動、画像は最小限 |
| ドキュメント | 300-500 KB | テキスト + コードブロックのみ |
| ニュース/メディア | 800-1200 KB | リッチメディアだが最適化すべき |
中央値との比較
2.2 MBのウェブページ中央値は推奨目標の3-5倍重いです。超過分は通常以下から来ます：
- 未最適化の画像 — 総ページウェイトの50-70%を占めることが多い
- 未使用のJavaScript — サードパーティスクリプト、未使用のフレームワークコード
- Webフォント — サブセットではなくフォントファミリ全体の読み込み
- 動画自動再生 — 埋め込み動画のポスターとプリロード
目標の設定方法
- ユーザーベースの特定 — デバイスタイプ、接続速度、地理的分布をアナリティクスで確認
- 競合のベンチマーク — WebPageTestまたはLighthouseで同分野の上位3サイトを測定
- 接続プロファイルの選択 — モバイルは3G（1.6 Mbps）、デスクトップはFast 4G（12 Mbps）が一般的
- バジェットの計算 — 速度 × 時間 × 125
- 20%のマージンを追加 — サードパーティスクリプトの増加と将来の機能に備える
ユースケース
総ページウェイト目標は、チーム全員 — デザイナーからプロダクトマネージャー、QAテスターまで — が理解できる明確で測定可能な目標を提供します。提案されたデザインの実現可能性を評価するプロジェクト計画時に特に有用です。モックアップにヒーロー動画、パララックス画像ギャラリー、複雑なインタラクティブウィジェットが含まれている場合、ウェイト目標はビジュアルの豊かさとパフォーマンスのトレードオフを即座に浮き彫りにします。