Next.js 14 + Edge: como entregamos sites com LCP abaixo de 1s

Existe uma correlação que sempre aparece em qualquer estudo sério: cada 100ms de melhoria em LCP gera entre 0,5% e 1,5% de aumento em conversão. Em sites com tráfego pago, performance é literalmente custo de aquisição menor.

Esse post é o playbook que aplicamos em todo site novo da HLT pra entregar LCP < 1s com folga.

1. Static generation por padrão

No Next 14 com App Router, todas as páginas são estáticas por padrão. Mantenha assim sempre que possível. Use revalidate ou ISR pra páginas que precisam de dados frescos. Servir HTML estático do CDN é literalmente o caminho mais rápido entre o usuário e o conteúdo.

2. Edge runtime pra rotas dinâmicas

Quando precisa ser dinâmico (ex.: imagem OG personalizada, A/B test, geolocalização), use o edge runtime. Latência cai de 200–400ms (Lambda) pra 20–60ms (edge), e o código roda perto do usuário.

// app/api/personalized/route.ts
export const runtime = "edge";

export async function GET(req: Request) {
  const country = req.headers.get("cf-ipcountry") ?? "BR";
  // ...
  return Response.json({ country });
}

3. next/font + next/image — sem desculpa

next/font auto-hospeda fontes do Google e elimina CLS de FOIT/FOUT. next/image faz responsive + AVIF/WebP automático + lazy loading correto. São dois utilitários que sozinhos resolvem 30% dos problemas de Core Web Vitals em sites brasileiros.

4. Bundle splitting agressivo

Tudo que não é crítico pra primeira tela vira dynamic import. Modais, calculadoras interativas, animações pesadas — carregue sob demanda. O First Load JS deveria ficar abaixo de 100kb pra a página inicial.

import dynamic from "next/dynamic";

// Modal só carrega quando o usuário clica
const ContactModal = dynamic(() => import("@/components/ContactModal"), {
  loading: () => null,
  ssr: false,
});

5. Mensure no campo, não no laboratório

Lighthouse local é útil pra detectar regressões, mas não substitui dados reais. Use o Real User Monitoring (Vercel Speed Insights, Cloudflare Analytics ou next/web-vitals customizado) pra ver o LCP no p75 dos seus usuários reais — não da sua máquina de dev em fibra de 1Gbps.

Onde aprender mais

O guia oficial do Next.js sobre performance é excelente. O https://web.dev/vitals da Google é a referência canônica de Core Web Vitals. E o curso do Addy Osmani sobre LCP/INP é o que mais recomendamos pra times que querem se aprofundar.