Performance

Web Vitals (LCP, INP, CLS)

Métricas oficiais Google para UX: Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift.

Definição

Web Vitals são métricas Google para experiência do usuário. Core Web Vitals: LCP (tempo até maior elemento visível < 2.5s), INP (tempo até resposta a interação < 200ms — substituiu FID em 2024), CLS (layout shift acumulado < 0.1). Afetam SEO.

Problema → Solução

Problema

Performance subjetiva é difícil de medir. Usuários percebem 'lento' diferentemente. Google penaliza no SEO sites com Web Vitals ruins.

Solução

Otimizar especificamente: LCP via image optimization e lazy load. INP via code splitting e debounce. CLS via dimensões fixas em imagens/ads. Monitorar com next/web-vitals em produção.

Dica de entrevista

Tip

INP (2024) é mais rigoroso que FID. Mede TODAS as interações, não só a primeira. JavaScript pesado em handlers prejudica diretamente.

Código

// Reportar Web Vitals em Next.js
// app/layout.tsx
export function reportWebVitals(metric) {
  // Enviar para analytics
  if (metric.label === 'web-vital') {
    sendToAnalytics({
      name: metric.name,    // LCP, INP, CLS
      value: metric.value,
      id: metric.id
    });
  }
}

// Próximo image previne CLS automaticamente
import Image from 'next/image';
<Image src="/foto.jpg" width={800} height={600} alt="..." />

Perguntas de entrevista

Q.O que mais impacta LCP?▾

A.1) Imagens grandes não otimizadas. 2) Fontes web carregadas sem font-display:swap. 3) JS bloqueante no <head>. 4) CSS render-blocking. 5) Servidor lento (TTFB alto).

Q.Como melhorar INP?▾

A.1) Code splitting agressivo. 2) Debounce em handlers pesados. 3) startTransition para updates não-urgentes. 4) Web Workers para cálculos. 5) Remover libs grandes desnecessárias.

Q.O que causa CLS?▾

A.Imagens sem width/height. Anúncios injetados. Web fonts trocando. Conteúdo carregando após inicial render. Solução: reservar espaço (aspect-ratio, min-height).

Termos relacionados

41/122← →