Ottimizzazione CDN menu QR: caricamento 0,8 s su 4G debole

Un ristorante di pesce nella penisola di Karaburun ci ha contattati a stagione piena: "il menu non si apre, i clienti se ne vanno". Vodafone 4G a 1,4 Mbps, Lighthouse LCP 9,2 secondi. Obiettivo: LCP sotto 1 secondo, pulsante chiama cameriere toccabile entro 1,5 s.

Edge stack: Workers e HTTP/3

Primo livello: HTML pre-renderizzato dal KV cache di Cloudflare Workers anziché passare dall'SSR Next.js. Risultato: TTFB 38 ms. HTTP/3 (QUIC) sopravvive ai pacchetti persi su 4G; H/2 impiegava 1,6 s, H/3 chiude in 240 ms.

Brotli livello 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB. 34 % di byte in meno rispetto a gzip. Verifica che il response includa content-encoding: br.

Pipeline immagini: AVIF + lazy

Le foto pesavano il 72 % del totale. Image Resizing crea tre dimensioni (96, 320, 640 px) e negozia AVIF, WebP o JPEG. Una AVIF 320 px pesa 14 KB, un sesto del JPEG originale.

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

Subsetting font e CSS critico

Inter Variable pesava 312 KB. glyphhanger limita all'intervallo turco U+0100-017F, ottenendo 28 KB WOFF2. font-display: optional mantiene il font di sistema se sfora i 100 ms.

I 4 KB di CSS critico sono inline; il resto si carica async via media="print" onload. Richieste bloccanti scese da sette a una, LCP finale 0,78 s.

FAQ

Quali Cache-Control? HTML: s-maxage=300, stale-while-revalidate=86400. Asset hashati: immutable, max-age=31536000.

Service Worker conviene? Sì — seconda visita in 180 ms. App Shell con Workbox SWR.

E in 2G? Rispetta Save-Data: solo immagini 96 px, emoji al posto delle icone, font di sistema. LCP resta sotto 2,5 s.

Ti è stato utile? Condividilo.