Optimización CDN del menú QR: 0,8 s de carga en 4G débil

Un restaurante de pescado en la península de Karaburun nos contactó en plena temporada: "el menú no abre, los clientes se levantan". Vodafone 4G medía 1,4 Mbps y Lighthouse marcaba LCP 9,2 s. Objetivo: LCP por debajo de 1 segundo, botón de llamar camarero tocable en 1,5 s.

Stack edge: Workers y HTTP/3

Primer paso: servir HTML prerenderizado desde el caché KV de Cloudflare Workers en lugar de viajar al SSR de Next.js. Conseguimos TTFB de 38 ms. HTTP/3 (QUIC) sobrevive a la pérdida de paquetes en 4G; H/2 tardaba 1,6 s, H/3 termina en 240 ms.

Brotli nivel 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB. 34 % menos bytes que gzip. Verifica que la respuesta de origen incluya content-encoding: br.

Pipeline de imágenes: AVIF + lazy

Las fotos pesaban el 72 % del total. Image Resizing produce tres tamaños (96, 320, 640 px) y negocia AVIF/WebP/JPEG. Una AVIF 320 px pesa 14 KB, un sexto del JPEG original.

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

Subsetting de fuentes y CSS crítico

Inter Variable pesaba 312 KB. glyphhanger limita al rango turco U+0100-017F, dejando 28 KB WOFF2. font-display: optional mantiene la fuente del sistema si supera los 100 ms.

Los 4 KB de CSS crítico van inline; el resto carga async vía media="print" onload. Las peticiones bloqueantes bajan de siete a una, LCP final 0,78 s.

FAQ

¿Qué Cache-Control usar? HTML: s-maxage=300, stale-while-revalidate=86400. Assets con hash: immutable, max-age=31536000.

¿Vale la pena un Service Worker? Sí — segunda visita en 180 ms. App Shell con Workbox SWR.

¿Y en 2G? Respetar Save-Data: solo imágenes 96 px, emojis en lugar de iconos, fuente del sistema. LCP queda bajo 2,5 s.

¿Te resultó útil? Compártelo.