Otimização de performance em aplicações Next.js com Core Web Vitals

Crie um plano de otimização de performance para [NOME DO PROJETO], uma aplicação Next.js [VERSÃO: 14/15] com App Router hospedada na [VERCEL/AWS/DOCKER].

**Métricas atuais:**
- LCP (Largest Contentful Paint): [VALOR]s (meta: < 2.5s)
- FID (First Input Delay): [VALOR]ms (meta: < 100ms)
- CLS (Cumulative Layout Shift): [VALOR] (meta: < 0.1)
- TTFB: [VALOR]ms
- Tamanho do bundle JS: [VALOR]KB

**Diagnóstico por área:**

1) **Renderização e Data Fetching:**
- Análise de SSR vs SSG vs ISR por tipo de página
- Server Components vs Client Components (onde está o boundary)
- Streaming e Suspense boundaries
- Parallel data fetching vs waterfalls

2) **Bundle e JavaScript:**
- Análise de bundle com @next/bundle-analyzer
- Code splitting e dynamic imports estratégicos
- Tree shaking de bibliotecas pesadas (lodash, moment, etc.)
- Lazy loading de componentes abaixo do fold

3) **Imagens e Mídia:**
- Next/Image: sizes, priority, placeholder blur
- Formatos modernos (WebP, AVIF)
- Responsive images com srcSet
- Lazy loading com Intersection Observer

4) **CSS e Layout Shift:**
- Font loading strategy (font-display, preload)
- Skeleton screens para evitar CLS
- Dimensões explícitas em imagens e embeds
- Critical CSS inline

5) **Caching e CDN:**
- Cache-Control headers por tipo de asset
- ISR com revalidação sob demanda
- Edge middleware para personalização
- Service Worker para assets estáticos

Para cada otimização, estime o impacto esperado na métrica e a complexidade de implementação (alta/média/baixa). Priorize em formato de sprint de 2 semanas.