このlessonを読み終えると、以下の3つを自信を持ってできるようになります。

• ▸✅ ロードバランサー L4 vs L7 + アルゴリズム (Round Robin · Least Connection)
• ▸✅ CDN (Cloudflare · CloudFront) のキャッシング戦略
• ▸✅ リバースプロキシ (Nginx) の役割

学習目標をチェックリストとして活用し、すべてに答えられるようになったらlessonを閉じてください。

CDN (Content Delivery Network) — 地理的に分散したキャッシュサーバーのネットワーク。

動作の仕組み:
1. ユーザーが image.jpg をリクエスト
2. DNSが最も近いCDNエッジにルーティング
3. エッジキャッシュがヒット？ → 即時レスポンス
4. ミス → オリジンサーバーへリクエスト → 取得してキャッシュ + ユーザーへ配信

なぜ速いのか:

• ▸地理的近接性（ソウルのユーザー → 東京エッジが50ms vs 米国オリジンが200ms）
• ▸混雑のないバックボーン回線（ピアリング · プライベート接続）
• ▸キャッシュヒット率 ~95%（適切な設計の場合）

主要CDNサービス:

キャッシュポリシー（HTTPヘッダー）:

• ▸Cache-Control: public, max-age=31536000, immutable — 1年 · 変更なし
• ▸Cache-Control: private, no-cache — 常にオリジンで検証
• ▸Cache-Control: no-store — キャッシュ完全禁止
• ▸ETag: "abc123" — コンテンツハッシュ（変更検出）

キャッシュ無効化 (Cache Invalidation):

• ▸新バージョンのデプロイ時はURLを変更（例: app.v2.js · app.HASH.js）
• ▸またはパージAPIを呼び出す（Cloudflare · CloudFront）
• ▸誤った無効化 = キャッシュの陳腐化バグ

最新トレンド — エッジコンピューティング:

• ▸Cloudflare Workers · Vercel Edge Functions · AWS Lambda@Edge
• ▸キャッシュ + 演算もエッジで処理（パーソナライズ · 認証）
• ▸レスポンスタイム低下 · サーバー負荷軽減

ロードバランサー — トラフィックを複数のサーバーに分散:

レイヤー別:

• ▸L4 (Transport) — TCP/UDPレベル。高速。AWS NLB
• ▸L7 (Application) — HTTPレベル。URL · ヘッダーベースのルーティング。AWS ALB · Nginx

分散アルゴリズム:

ヘルスチェック:

• ▸LBが定期的に /health を呼び出す
• ▸N回連続失敗 → unhealthy → トラフィックから除外
• ▸復旧時に再び組み込む
• ▸間隔: 5〜30秒、閾値: 2〜5

スティッキーセッション:

• ▸同一ユーザーは常に同一サーバーへルーティング
• ▸セッションデータをメモリに保存する場合に必要
• ▸デメリット: 対象サーバーが落ちると、そのユーザー全員が切断される
• ▸代替案: 共有セッションストア（Redis）

主要LB一覧:

HTTP/2 · gRPC 負荷分散の落とし穴:

• ▸1つのTCP接続で複数ストリーム → L4 LBでは均等分散ができない
• ▸解決策: L7 LB（Envoy · Nginx）またはクライアントサイドLB（gRPC内蔵）

クリティカルレンダリングパス (ブラウザがHTMLを画面に表示するまで):

HTML受信
  ↓ Parse
DOMツリー
  ↓
CSS受信 → CSSOMツリー
  ↓
レンダーツリー (DOM + CSSOM)
  ↓
レイアウト (位置 · サイズ計算)
  ↓
ペイント (ピクセル描画)
  ↓
コンポジット (レイヤー合成 → 画面表示)

JSの読み込みによる影響:

• ▸デフォルト <script> — パーサーをブロック（ダウンロード · 実行が終わるまで停止）
• ▸<script defer> — ダウンロードは並行実行、DOM準備完了後に実行
• ▸<script async> — ダウンロードは並行実行、完了次第即時実行（順序の保証なし）
• ▸<script type="module"> — deferに近い挙動

3つのWeb Vitals (Google):

最適化テクニック:

• ▸画像の遅延読み込み: <img loading="lazy">
• ▸コード分割: ルートごとにJSチャンクを分離
• ▸Preload · Preconnect: 重要なリソースを事前に取得開始
• ▸WebP · AVIF: 画像圧縮（JPEGより30〜50%軽量）
• ▸クリティカルCSS: ファーストビュー用のCSSをインライン化
• ▸CDN: 静的リソースを近くから配信
• ▸HTTP/2 · 3: 多重リクエスト + ヘッダー圧縮

計測ツール:

• ▸Lighthouse (Chrome DevTools内蔵)
• ▸WebPageTest (様々な地域 · デバイスに対応)
• ▸PageSpeed Insights (Google)
• ▸リアルユーザーモニタリング (Datadog · Sentry)

このlessonの概念を理解すれば、AIに具体的に指示できるようになります。漠然と「直して」と頼むのではなく、語彙を使ったリクエスト — それがトークン節約の出発点です。

• ▸「この静的ファイルにCloudflare CDN + 1年キャッシュヘッダーを適用して」
• ▸「Nginxのロードバランシング（least_conn）設定を作って」

なぜこれがトークンを減らすのか

概念を知らないと、AIの回答を受け取っても「それは何ですか？」と再度尋ねなければなりません。その「再質問」がトークンを消費します。概念を一度習得すれば、会話が一度で終わります。