QR-menu CDN-optimalisatie: 0,8 s laden op zwak 4G

Een visrestaurant op het schiereiland Karaburun belde midden in het seizoen: "het menu opent niet, gasten lopen weg". Vodafone 4G mat 1,4 Mbps, Lighthouse rapporteerde LCP 9,2 seconden. Doel: LCP onder 1 seconde, ober-roepknop binnen 1,5 s aanraakbaar.

Edge-stack: Workers en HTTP/3

Eerste laag: gerenderde HTML rechtstreeks vanuit Cloudflare Workers KV-cache leveren in plaats van naar Next.js SSR te gaan. Resultaat: TTFB 38 ms. HTTP/3 (QUIC) overleeft pakketverlies op 4G zonder nieuwe handshake — H/2 deed er 1,6 s over, H/3 sluit in 240 ms.

Brotli niveau 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB, 34% minder bytes dan gzip. Controleer dat de origin-respons content-encoding: br bevat.

Beeldpijplijn: AVIF + lazy

Productfoto's waren goed voor 72% van het gewicht. Image Resizing produceert drie maten (96, 320, 640 px) en onderhandelt AVIF, WebP of JPEG. Een 320 px AVIF weegt 14 KB, een zesde van de originele JPEG.

• Above-the-fold: eager met fetchpriority="high"
• Below-the-fold: IntersectionObserver, rootMargin 200 px
• LQIP: blurhash 8×8 onder 60 bytes

Font-subsetting en kritische CSS

Inter Variable woog 312 KB. Met glyphhanger tot Turks bereik U+0100-017F leverde dat 28 KB WOFF2. font-display: optional houdt het systeemlettertype als het 100 ms-budget wordt overschreden.

De 4 KB kritische CSS staat inline in head, de rest laadt async via de media="print" onload-truc. Render-blokkerende requests daalden van zeven naar één, finale LCP 0,78 s.

FAQ

Welke Cache-Control? HTML: s-maxage=300, stale-while-revalidate=86400. Gehashte assets: immutable, max-age=31536000.

Is een Service Worker zinvol? Ja — tweede bezoek opent in 180 ms. App Shell met Workbox SWR.

Wat met 2G? Respecteer Save-Data: alleen 96 px afbeeldingen, emoji als fallback, systeemfont. LCP blijft onder 2,5 s.

Was dit nuttig? Deel het.