QR-meny CDN-optimering: 0,8 s laddning på svagt 4G

En fiskrestaurang på Karaburun-halvön hörde av sig mitt under säsongen: "menyn öppnas inte, gästerna går". Vodafone 4G mätte 1,4 Mbps, Lighthouse visade LCP 9,2 s. Mål: LCP under 1 sekund, servitörsknapp tryckbar inom 1,5 s.

Edge-stack: Workers och HTTP/3

Första lagret: leverera färdigrenderad HTML direkt från Cloudflare Workers KV-cache i stället för att gå till Next.js SSR. Vi nådde TTFB 38 ms. HTTP/3 (QUIC) klarar paketförluster på 4G utan ny handshake — H/2 tog 1,6 s, H/3 stänger på 240 ms.

Brotli nivå 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB, 34 % färre byte än gzip. Verifiera att origin-svaret har content-encoding: br.

Bildpipeline: AVIF + lazy

Bilderna stod för 72 % av vikten. Image Resizing producerar tre storlekar (96, 320, 640 px) och förhandlar AVIF, WebP eller JPEG. En 320 px AVIF väger 14 KB, en sjättedel av original-JPEG.

• Above-the-fold: eager med fetchpriority="high"
• Below-the-fold: IntersectionObserver, rootMargin 200 px
• LQIP: blurhash 8×8 under 60 byte

Font-subsetting och kritisk CSS

Inter Variable vägde 312 KB. glyphhanger begränsade till U+0100-017F vilket gav 28 KB WOFF2. font-display: optional behåller systemfont om 100 ms-budgeten överskrids.

De 4 KB kritisk CSS ligger inline i head, resten laddas async via media="print" onload. Renderblockerande förfrågningar minskade från sju till en, slutlig LCP 0,78 s.

FAQ

Vilka Cache-Control? HTML: s-maxage=300, stale-while-revalidate=86400. Hashade tillgångar: immutable, max-age=31536000.

Är en Service Worker värd det? Ja — andra besöket öppnas på 180 ms. App Shell + Workbox SWR.

Och på 2G? Respektera Save-Data: endast 96 px-bilder, emoji som fallback, systemfont. LCP stannar under 2,5 s.

Var detta hjälpsamt? Dela det.