QR-menu CDN-optimering: 0,8 s indlæsning på svagt 4G

En fiskerestaurant på Karaburun-halvøen meldte midt i sæsonen: "menuen åbner ikke, gæster forlader bordet". Vodafone 4G målte 1,4 Mbps, Lighthouse viste LCP 9,2 s. Mål: LCP under 1 sekund, tjenerkald-knap berørbar inden 1,5 s.

Edge-stack: Workers og HTTP/3

Første lag: levér forrenderet HTML direkte fra Cloudflare Workers KV-cache i stedet for at gå til Next.js SSR. Vi opnåede TTFB 38 ms. HTTP/3 (QUIC) overlever pakketab på 4G uden nyt handshake — H/2 brugte 1,6 s, H/3 lukker på 240 ms.

Brotli niveau 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB, 34 % færre bytes end gzip. Bekræft at origin-svar bærer content-encoding: br.

Billed-pipeline: AVIF + lazy

Madfotos var 72 % af vægten. Image Resizing producerer tre størrelser (96, 320, 640 px) og forhandler AVIF, WebP eller JPEG. AVIF 320 px vejer 14 KB, en sjettedel af original-JPEG.

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

Font-subsetting og kritisk CSS

Inter Variable vejede 312 KB. Med glyphhanger begrænset til U+0100-017F gav det 28 KB WOFF2. font-display: optional holder systemfonten, hvis 100 ms-budgettet overskrides.

De 4 KB kritisk CSS ligger inline i head, resten loades async via media="print" onload. Render-blokerende requests faldt fra syv til én, endelig LCP 0,78 s.

FAQ

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

Er en Service Worker værd? Ja — andet besøg åbner på 180 ms. App Shell + Workbox SWR.

Og på 2G? Respekter Save-Data: kun 96 px-billeder, emoji som fallback, systemfont. LCP forbliver under 2,5 s.

Var dette nyttigt? Del det.