ブログ・コンテンツサイト向けパフォーマンスバジェット
コンテンツ重視のWebサイト（ブログ、ドキュメント、ニュースサイト）向けパフォーマンスバジェットを作成。高速なテキストレンダリング、SEO、読者エンゲージメントのためのリーンなページウェイト目標で最適化。
Site Type
詳細な説明
ブログ・コンテンツサイト向けパフォーマンスバジェット
コンテンツサイトはパフォーマンスに対して自然な優位性を持っています：主要なアセットは極めて軽量なテキストです。しかし多くのブログは、未最適化の画像、重いCMSテーマ、過剰なサードパーティスクリプトのために、ECサイトよりも重くなっています。
目標バジェット：400-600 KB
適切に最適化されたブログページの合計ウェイトは400-600 KBであるべきです：
| カテゴリ | バジェット | 理由 |
|---|---|---|
| HTML | 25 KB | 記事マークアップ、最小限のボイラープレート |
| CSS | 25 KB | クリーンなタイポグラフィ、シンプルなレイアウト |
| JavaScript | 50 KB | 最小限 — ナビゲーション、コードハイライト |
| 画像 | 250 KB | 2-3記事画像、WebP形式 |
| フォント | 40 KB | 本文フォント1 + コードフォント1（サブセット） |
| その他 | 10 KB | 最小限のアナリティクス |
ブログが重くなる理由
肥大化したブログページの一般的な原因：
- WordPressテーマ — 多くのテーマが500 KB以上の未使用CSSとJSを読み込む
- コメントシステム — Disqusは200-400 KBを追加。ネイティブコメントか遅延読み込みを検討
- ソーシャル共有ボタン — 各プラットフォームのウィジェットスクリプトが30-80 KBを追加
- ヒーロー画像 — 500 KBの未最適化2000px幅JPEG
- 広告ネットワーク — 500 KB以上のスクリプトとiframeを追加する可能性
静的サイトジェネレーター
ブログに最も軽量なオプションは静的サイトジェネレーターです：
| ジェネレーター | 出力 | 一般的なページウェイト |
|---|---|---|
| Hugo | 静的HTML | 50-200 KB |
| Astro | 静的 + アイランド | 100-300 KB |
| 11ty | 静的HTML | 50-200 KB |
| Next.js (SSG) | 静的 + ハイドレーション | 200-400 KB |
ユースケース
ブログのパフォーマンスバジェットは、ページ速度が検索ランキングとオーガニックトラフィックに直接影響するSEO駆動のコンテンツチームにとって重要です。毎日記事を公開する技術ブログは500 KBのページバジェットを設定して月次監査するかもしれません。開発者ドキュメントのようなドキュメントサイトは、読者がセッション中に多くのページを訪問し累積読み込み時間が全体的な体験に影響するため、さらに厳格なバジェット（300 KB）の恩恵を受けます。