Otimizando aplicações React para Core Web Vitals

14/04/2026 Glauber A. Magalhães 3 minutos de leitura

A performance de uma app React não é só velocidade — é como o site parece para quem usa. O Google mede isso com três métricas principais:

LCP (Largest Contentful Paint): quanto tempo até o conteúdo principal aparecer.
INP (Interaction to Next Paint): quanto tempo a interface responde depois de um clique ou toque.
CLS (Cumulative Layout Shift): quanto o layout “pula” enquanto a página carrega.

A boa notícia: melhorar essas métricas não exige mágica. Exige medir, priorizar e aplicar boas práticas.

1. Evite re-renderizações desnecessárias

Cada renderização gasta processamento. Quando um componente re-renderiza sem precisar, você perde performance sem ganhar nada.

Use

React.memo

useMemo

useCallback

só onde faz sentido:

const ExpensiveList = React.memo(({ data }) => {
  // renderiza lista grande
});

const Container = ({ items }) => {
  const sortedItems = useMemo(() => sortData(items), [items]);
  const handleClick = useCallback(() => console.log('clicked'), []);

  return <ExpensiveList data={sortedItems} onClick={handleClick} />;
};

Dica: use essas ferramentas em listas grandes ou cálculos pesados. Aplicar em tudo pode complicar o código e até piorar a performance.

2. Divida o bundle com React.lazy

Apps grandes carregam muito JavaScript no primeiro acesso. Isso atrasa o LCP. A solução é carregar só o que a pessoa precisa agora:

import React, { Suspense } from 'react';
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Carregando...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Cada rota ou módulo pesado entra sob demanda, e o primeiro carregamento fica mais leve.

3. Otimize imagens e fontes

Use WebP ou AVIF quando possível.
Em fontes,
```
font-display: swap
```
evita texto invisível enquanto a fonte baixa.
Sirva imagens no tamanho certo com
```
srcset
```
e
```
loading="lazy"
```
.

Esses ajustes impactam diretamente o LCP — a métrica mais sensível ao que aparece na tela.

4. Mede antes de otimizar

Ferramentas como Lighthouse, WebPageTest e o React Profiler mostram onde o tempo está sendo gasto.

Sem medição, você otimiza no chute.

5. Referências úteis

Conclusão

Melhorar Core Web Vitals em React é um trabalho contínuo: menos re-renderizações, bundles menores, imagens e fontes bem configuradas — e medição constante para ver se mudou algo.

O resultado é um site mais rápido e mais confortável de usar.

Escrito por Glauber A. Magalhães

Engenheiro de software sênior. Escrevo sobre React, performance, acessibilidade e segurança — com exemplos de projetos reais.

LinkedIn GitHub