5. デプロイ先比較【メインパート】
時間: 3分 ⭐ メインパート
測定条件
- 測定元: 東京（オフィス）
- ツール: curl（TTFB）、Chrome DevTools（LCP）
- 回数: 5回平均
- コンテンツ: 同一のHugoサイト（約10ページ）
比較表
| 項目 | GitHub Pages | Cloudflare Pages | S3 + CloudFront | S3のみ |
|---|---|---|---|---|
| CDN | Fastly | Cloudflare | CloudFront | なし |
| 料金 | 無料 | 無料 | 従量課金 | 従量課金 |
| HTTPS | ✅ | ✅ | ✅ | ❌ |
| セットアップ | 簡単 | 簡単 | やや面倒 | 簡単 |
| カスタムドメイン | ✅ | ✅ | ✅ | ✅ |
※ GitHub PagesはバックエンドにFastly CDNを使用
デプロイ方法の比較
| 項目 | GitHub Pages | Cloudflare Pages | S3 + CloudFront | S3のみ |
|---|---|---|---|---|
| デプロイ方法 | git push | git push | CLI / Terraform | CLI / Terraform |
| CI/CD | GitHub Actions | 自動ビルド | 要設定 | 要設定 |
| ビルド環境 | GitHub側 | Cloudflare側 | ローカル | ローカル |
| 初期設定 | 数クリック | 数クリック | IAM/S3/CF設定 | IAM/S3設定 |
| 学習コスト | 低 | 低 | 中〜高 | 低〜中 |
デプロイコマンド比較
# GitHub Pages（GitHub Actionsで自動化）
git add . && git commit -m "update" && git push
# Cloudflare Pages（自動ビルド）
git add . && git commit -m "update" && git push
# S3（手動 or スクリプト）
hugo && aws s3 sync public/ s3://bucket-name --delete
# S3 + CloudFront（キャッシュ削除も必要）
hugo && aws s3 sync public/ s3://bucket-name --delete
aws cloudfront create-invalidation --distribution-id XXX --paths "/*"
パフォーマンス測定結果
| CDN / Hosting | TTFB | LCP |
|---|---|---|
| CloudFront | 57ms 🏆 | 80ms 🏆 |
| GitHub Pages (Fastly) | 59ms | 80ms 🏆 |
| Cloudflare Pages | 83ms | 100ms |
| S3のみ（CDNなし） | 98ms | 160ms |
※ 実測値は環境により変動します
結果のグラフ
TTFB (ms) - 低いほど良い
──────────────────────────────────────
CloudFront ████████████ 57ms 🏆
GitHub Pages ████████████ 59ms
Cloudflare Pages █████████████████ 83ms
S3のみ ████████████████████ 98ms
LCP (ms) - 低いほど良い
──────────────────────────────────────
CloudFront ████████ 80ms 🏆
GitHub Pages ████████ 80ms 🏆
Cloudflare Pages ██████████ 100ms
S3のみ ████████████████ 160ms
なぜ差が出る？
CDNの効果
【S3のみ】
ユーザー(東京) ──────────────────▶ S3(東京)
直接アクセス
【S3 + CloudFront】
ユーザー(東京) ──▶ エッジ(東京) ──▶ S3(東京)
キャッシュHIT！ ↑
即座に返却 初回のみ
今回の結果について
- CloudFront / GitHub Pages (Fastly) が僅差で最速
- Cloudflare Pagesは無料プランでも十分高速
- S3のみでも100ms以下と実用的
💡 CDNの差は数十ms程度。どれを選んでも体感差はほぼなし！
測定方法（参考）
# curl で TTFB 測定
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" https://your-site.com/
次へ: まとめ・結論