Performance: Checklist Completo
Core Web Vitals, bundle size, render otimizado, imagens, fontes e perceived performance.
Definição
Performance front-end é medida pelos Core Web Vitals: LCP (Largest Contentful Paint < 2.5s), INP (Interaction to Next Paint < 200ms), CLS (Cumulative Layout Shift < 0.1). As otimizações caem em 4 categorias: Network (bundle menor, cache, CDN). Rendering (menos re-renders, virtualização, SSR/SSG). Assets (imagens otimizadas, fontes sem FOIT). Perceived (skeletons, optimistic UI).
Problema → Solução
Problema
App lento para carregar (LCP alto por bundle grande ou imagens sem otimização), travamentos ao interagir (INP alto por JS pesado na thread principal), ou elementos pulando ao carregar (CLS por imagens sem dimensões).Solução
LCP: SSR/SSG + imagem hero com priority. INP: React.memo, virtualização, web workers. CLS: sempre definir width/height em imagens. Bundle: code splitting + bundle analyzer. Perceived: skeletons e optimistic UI.Dica de entrevista
Tip
Medir antes de otimizar. Use Lighthouse (lab) para diagnóstico e CrUX / Vercel Analytics para dados reais. 80% dos problemas são: imagens não otimizadas, bundle grande, e re-renders desnecessários.Código
// 1. Imagem LCP com preload
<Image src="/hero.jpg" priority width={1200} height={600} alt="Hero" />
// 2. Virtualização de lista longa
import { FixedSizeList } from 'react-window'
<FixedSizeList height={600} itemCount={10000} itemSize={50}>
{Row}
</FixedSizeList>
// 3. Lazy loading de componente pesado
const HeavyChart = dynamic(() => import('./Chart'), { ssr: false })
// 4. React.memo para componente estável
const Row = React.memo(({ item }) => <div>{item.name}</div>)
// 5. useTransition para update pesado
const [isPending, startTransition] = useTransition()
const handleFilter = (val) => {
setInput(val) // urgente
startTransition(() => setFilter(val)) // não-urgente
}
// 6. Sempre dimensões em imagens (evita CLS)
<img src="..." width={800} height={600} />Perguntas de entrevista
Q.Qual a forma mais impactante de melhorar LCP?▾
A.Imagem hero com priority no next/image (preload), SSR/SSG para o HTML chegar com conteúdo, e CDN para reduzir latência. LCP costuma ser a imagem maior acima do fold.
Q.Como identificar re-renders desnecessários?▾
A.React DevTools Profiler: gravar uma interação e identificar componentes que renderizaram sem necessidade. Componentes que sempre re-renderizam quando o pai re-renderiza são candidatos a React.memo.
Q.O que é INP e como melhorar?▾
A.Interaction to Next Paint: tempo entre interação do usuário e o próximo frame pintado. Melhorar: mover cálculos pesados para useTransition, web workers, ou dividir tasks longas com setTimeout(fn, 0).
Termos relacionados
55/122← →