Core Web Vitals: Optimização para Next.js
Técnicas avançadas para maximizar performance e SEO em aplicações Next.js.
Core Web Vitals (LCP, INP, CLS) afectam directamente o SEO e a experiência do utilizador. Next.js oferece ferramentas excelentes para optimizar estas métricas, mas requer configuração consciente.
Largest Contentful Paint (LCP)
LCP mede o tempo até o maior elemento visível carregar. Para optimizar: use next/image com priority na hero, preload fonts críticas, e minimize JavaScript no critical path.
Server Components no Next.js App Router reduzem significativamente o JS enviado ao cliente.
Interaction to Next Paint (INP)
INP substituiu FID como métrica de interactividade. Para melhorar INP: evite long tasks no main thread, use Web Workers para processamento pesado, e lazy-load componentes não críticos.
Framer Motion e animações pesadas devem ser carregadas apenas onde necessário.
Cumulative Layout Shift (CLS)
CLS mede estabilidade visual. Defina dimensões explícitas em imagens e embeds, reserve espaço para conteúdo dinâmico, e evite injectar conteúdo acima do fold após load.
next/font elimina layout shift de fontes web, uma causa comum de CLS elevado.