QR Menü Önbellek (CDN) Optimizasyonu: 4G Yavaş Bölgede 0.8 sn Yükleme

İzmir Karaburun'un kıyı şeridindeki bir balık restoranı, sezon ortasında bize "menü açılmıyor, müşteri masadan kalkıyor" şikayetiyle geldi. Vodafone 4G ölçümü 1.4 Mbps, Lighthouse LCP değeri 9.2 saniyeydi. Hedefimiz net: LCP < 1 saniye, garson çağrı butonu ekranda 1.5 saniye içinde dokunulabilir olsun.

Edge Stack: Cloudflare Workers + HTTP/3 + Brotli

İlk katman, statik HTML'i Cloudflare Workers'tan döndürmek. Origin'e (Next.js SSR) gitmek yerine KV cache'te tutulan render edilmiş HTML 38 ms TTFB sağladı. HTTP/3 (QUIC) sayesinde 4G'deki paket kayıplarında bile bağlantı yeniden kurulmuyor — H/2 üzerinden 1.6 sn olan handshake, H/3 ile 240 ms'ye düştü.

Brotli level 11 ile precompressed asset'ler (HTML 22 KB → 6 KB, CSS 41 KB → 9 KB). gzip yerine Brotli kullanmak %34 daha az bayt demek. Cloudflare 'Brotli' toggle'ı Pages projesinde otomatik açık geliyor ama origin response'ları doğrulayın: content-encoding: br header'ı zorunlu.

Görsel Pipeline: AVIF + Lazy Load + LQIP

Ürün fotoğrafları toplam ağırlığın %72'siydi. Cloudflare Image Resizing ile her görseli üç boyutta üretiyoruz: 96px (kart küçük), 320px (kart büyük), 640px (lightbox). Format negotiation: AVIF destekleniyorsa AVIF, yoksa WebP, son çare JPEG. 320px AVIF ortalama 14 KB — eski 89 KB JPEG'in altıda biri.

• Above-the-fold (ilk 6 ürün): eager + fetchpriority="high"
• Below-the-fold: IntersectionObserver ile lazy, root margin 200px
• LQIP: 8x8 base64 blurhash placeholder, < 60 byte

Font Subsetting ve Critical CSS Inline

Inter Variable font 312 KB. glyphhanger ile Türkçe karakter aralığı (U+0100-017F, U+011E, U+0130) subset edip 28 KB'a indirdik. WOFF2 + font-display: optional kombinasyonu: 100 ms içinde font yetişmezse sistem fontu kalıyor, FOIT yok.

Critical CSS (yukarıdaki katlama için gereken ~4 KB) HTML head'ine inline. Geri kalan stil media="print" onload trick'iyle async yükleniyor. Sonuç: render-blocking request sayısı 7'den 1'e indi, LCP 0.78 sn.

FAQ

Cache-Control header'ını nasıl ayarlamalıyım? HTML: s-maxage=300, stale-while-revalidate=86400. Görseller: public, max-age=31536000, immutable (hash'li URL ile).

Service Worker eklemeli miyim? Menü için evet. İkinci ziyarette ortalama 180 ms açılış. App Shell pattern + Workbox stale-while-revalidate stratejisi.

2G bölgede ne yapmalı? SaveData header'ı geldiğinde sadece 96px görseller, görsel yerine emoji fallback ve client-side font yerine system-ui. 2G'de bile 2.4 sn LCP yakalanıyor.

Faydalı buldunuz mu? Paylaşın.