ウェブサイト読み込み速度と帯域幅要件
ページの重さが異なる帯域幅での読み込み時間にどう影響するかを計算。LCPとFCPのCore Web Vitalsターゲットを満たすためのアセットサイズ最適化。
Web Performance
詳細な説明
ウェブサイト読み込み速度vs帯域幅
ページ読み込み時間はページの重さと利用可能な帯域幅の直接的な関数です。この関係を理解することはWebパフォーマンス最適化とCore Web Vitalsターゲットの達成に不可欠です。
ページ重量ベンチマーク
| ページタイプ | 中央値 | 90パーセンタイル |
|---|---|---|
| シンプルなブログ | 1.5 MB | 3 MB |
| ニュースサイト | 3 MB | 6 MB |
| ECサイト商品ページ | 4 MB | 8 MB |
| SPA（React/Next.js） | 2 MB | 5 MB |
帯域幅別読み込み時間
3 MBのページの場合：
低速3G（0.4 Mbps）: 3 * 8 / 0.4 = 60秒
高速3G（1.5 Mbps）: 3 * 8 / 1.5 = 16秒
4G（20 Mbps）: 3 * 8 / 20 = 1.2秒
WiFi（50 Mbps）: 3 * 8 / 50 = 0.48秒
光回線（1 Gbps）: 3 * 8 / 1000 = 0.024秒
最適化の効果
| テクニック | 一般的な削減量 |
|---|---|
| WebP/AVIF画像 | 画像バイト数の30-50% |
| Brotli圧縮 | テキストバイト数の15-25% |
| コード分割 | 初期JSの40-60% |
| 遅延読み込み | ファーストビュー外アセットの50-80% |
| CDN（レイテンシ削減） | ラウンドトリップあたり100-300ms |
ユースケース
Core Web Vitalsスコアを最適化するフロントエンド開発者、ページ重量バジェットを設定するパフォーマンスエンジニア、ページサイズがモバイルユーザーに与える影響を理解するプロダクトマネージャー、パフォーマンス最適化により検索ランキングを改善するSEOスペシャリストに活用されます。