Optimisation CDN QR Menu : chargement 0,8 s sur 4G faible

Un restaurant de poisson sur la presqu'île de Karaburun nous a contactés en pleine saison : "le menu ne s'ouvre pas, les clients partent". La 4G Vodafone mesurait 1,4 Mbps, le LCP Lighthouse 9,2 secondes. Objectif : LCP sous 1 seconde, bouton appel-serveur tappable en 1,5 s.

Stack edge : Workers et HTTP/3

Premier étage : servir le HTML pré-rendu depuis le cache KV de Cloudflare Workers plutôt que d'appeler le SSR Next.js. Résultat : TTFB 38 ms. HTTP/3 (QUIC) résiste aux pertes de paquets 4G — H/2 prenait 1,6 s, H/3 boucle en 240 ms.

Brotli niveau 11 sur les assets pré-compressés : HTML 22 Ko → 6 Ko, CSS 41 Ko → 9 Ko. C'est 34 % moins d'octets que gzip. Vérifier le header content-encoding: br côté origine.

Pipeline image : AVIF + lazy + LQIP

Les photos pèsent 72 % du total. Image Resizing produit trois tailles (96, 320, 640 px) et négocie AVIF puis WebP puis JPEG. Une AVIF 320 px fait 14 Ko, soit un sixième du JPEG d'origine.

• Au-dessus du pli : eager, fetchpriority="high"
• En dessous : IntersectionObserver, rootMargin 200 px
• LQIP : blurhash 8×8 sous 60 octets

Subsetting de police et CSS critique

Inter Variable pesait 312 Ko. glyphhanger limite à U+0100-017F, donnant 28 Ko WOFF2. font-display: optional conserve la police système si le budget 100 ms est dépassé.

Les 4 Ko de CSS au-dessus du pli sont inlinés ; le reste charge async via media="print" onload. Les requêtes bloquantes passent de sept à une, LCP final 0,78 s.

FAQ

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

Service Worker utile ? Oui — seconde visite en 180 ms. Pattern App Shell + Workbox SWR.

Et en 2G ? Honorer Save-Data : images 96 px seulement, emoji en fallback, police système. LCP reste sous 2,5 s.

Cet article vous a été utile ? Partagez-le.