Otimização CDN do menu QR: 0,8 s de carregamento em 4G fraco

Um restaurante de peixe na península de Karaburun abriu um chamado em plena temporada: "o menu não abre, os clientes vão embora". Vodafone 4G media 1,4 Mbps, Lighthouse mostrava LCP 9,2 s. Meta: LCP abaixo de 1 segundo, botão de chamar garçom tocável em 1,5 s.

Stack de edge: Workers e HTTP/3

Primeira camada: servir HTML pré-renderizado do cache KV do Cloudflare Workers em vez de bater no SSR do Next.js. Resultado: TTFB de 38 ms. HTTP/3 (QUIC) sobrevive à perda de pacotes em 4G; H/2 levava 1,6 s, H/3 fecha em 240 ms.

Brotli nível 11: HTML 22 KB → 6 KB, CSS 41 KB → 9 KB — 34 % menos bytes que gzip. Confirme que a resposta de origem traz content-encoding: br.

Pipeline de imagens: AVIF + lazy

As fotos representavam 72 % do peso. O Image Resizing gera três tamanhos (96, 320, 640 px) e negocia AVIF/WebP/JPEG. Um AVIF de 320 px pesa 14 KB, um sexto do JPEG original.

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

Subsetting de fontes e CSS crítico

Inter Variable pesava 312 KB. glyphhanger limita ao intervalo turco U+0100-017F, gerando 28 KB WOFF2. font-display: optional mantém a fonte do sistema se o orçamento de 100 ms estourar.

Os 4 KB de CSS crítico ficam inline; o resto carrega async via media="print" onload. Pedidos bloqueantes caíram de sete para um, LCP final 0,78 s.

FAQ

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

Vale Service Worker? Sim — segunda visita em 180 ms. App Shell com Workbox SWR.

E em 2G? Respeite Save-Data: somente imagens 96 px, emoji em vez de ícones, fonte do sistema. LCP fica sob 2,5 s.

Achou útil? Compartilhe.