QRメニュー CDN最適化:弱4Gで0.8秒ロード

カラブルン半島の魚料理店からハイシーズン中に連絡が入りました。「メニューが開かない、客が席を立つ」。Vodafone 4Gは1.4 Mbps、Lighthouse LCPは9.2秒。目標は明快、LCPを1秒未満、店員呼出ボタンを1.5秒以内にタップ可能にすることでした。

エッジ構成:Workers と HTTP/3

第一階層はCloudflare WorkersのKVキャッシュからHTMLを直接配信し、Next.js SSRへ戻らないこと。TTFB 38ミリ秒を達成。HTTP/3 (QUIC) は4Gのパケットロスでも再ハンドシェイク不要、H/2の1.6秒に対してH/3は240ミリ秒で完了します。

Brotli レベル11でHTMLは22 KB→6 KB、CSSは41 KB→9 KB。gzipよりバイト数34%減。オリジン応答にcontent-encoding: brが含まれるか確認してください。

画像パイプライン:AVIF + 遅延読込

料理写真が全体の72%を占めていました。Image Resizingで96、320、640pxの3サイズを生成し、AVIF→WebP→JPEGの順で交渉。320px AVIFの平均は14 KB、元のJPEGの6分の1です。

• ファーストビュー:eager + fetchpriority="high"
• 下部:IntersectionObserver、rootMargin 200px
• LQIP:8×8 blurhash、60バイト未満

フォントサブセットとクリティカルCSS

Inter Variableは312 KB。glyphhangerでトルコ語U+0100-017Fに限定し28 KBに圧縮。font-display: optionalと組み合わせ、100ミリ秒予算を超えたらシステムフォントのまま固定します。

4 KB分のクリティカルCSSをheadにインライン、残りはmedia="print" onloadで非同期化。レンダーブロッキングが7から1へ、最終LCPは0.78秒でした。

FAQ

Cache-Controlの推奨は? HTMLはs-maxage=300, stale-while-revalidate=86400、ハッシュ付きアセットはimmutable, max-age=31536000。

Service Workerは必要? はい。2回目の表示は180ミリ秒。App Shell + Workbox SWRを推奨。

2G対策は? Save-Dataを尊重し、96px画像のみ、絵文字フォールバック、システムフォント。2.5秒以内のLCPを維持できます。

お役に立ちましたか?シェアしてください。