Como otimizar a performance de aplicações React e React Native para passar no Core Web Vitals

Você investiu em React porque prometia uma experiência rápida. Aí o PageSpeed mostra vermelho, o Search Console avisa que as páginas "precisam de melhorias" e o app parece pesado no Android de entrada. O framework não é o problema — a forma como ele foi montado, quase sempre, é.

O que o Google mede de verdade

O Core Web Vitals olha três coisas na experiência real dos usuários (não só no seu notebook): LCP, o tempo até o maior elemento visível aparecer; INP, quanto a página demora para responder a um clique ou toque; e CLS, quanto o layout "pula" durante o carregamento. Cada uma tem causas diferentes, e misturar tudo num "o site está lento" é o primeiro erro.

Onde aplicações React costumam perder pontos

• Tudo num pacote só. Um único bundle com todas as telas faz o celular baixar e interpretar código de páginas que a pessoa nem vai abrir. A saída é dividir por rota — explicamos em Code splitting por rota no React: carregue só o que a página precisa.
• Conteúdo que só existe depois do JavaScript. Em SPA, o LCP depende de baixar, executar e buscar dados. Pré-renderizar o HTML muda o jogo, como mostramos em SPA e SEO: por que o Google e as IAs não leem o seu site React.
• Imagem principal sem prioridade. A foto do topo carregando como qualquer outra é a causa número um de LCP ruim. Veja os ajustes em LCP alto por causa da imagem principal? 6 ajustes que resolvem na maioria dos sites.
• Re-renderizações em cascata. Um estado global mal posicionado faz a tela inteira re-renderizar a cada tecla. É o caminho mais curto para um INP alto (INP: o que fazer quando cliques e toques demoram para responder).

E no React Native?

No app, o equivalente do Core Web Vitals é a sensação de fluidez: tempo de abertura, listas que rolam a 60 quadros por segundo e toques que respondem na hora. Os vilões são parecidos — renderizar demais e fazer trabalho pesado na thread principal. Listas longas são o caso clássico, e o tratamos em detalhe em Listas lentas no React Native: FlatList, FlashList e memorização na prática.

Uma ordem de ataque que funciona

1. 1.Meça com dados de campo (Search Console ou relatório CrUX), não só com o teste de laboratório.
2. 2.Ataque o LCP primeiro: imagem principal, fontes e HTML pré-renderizado.
3. 3.Elimine o CLS reservando espaço para tudo que carrega depois.
4. 4.Só então refine o INP, que exige olhar o código com lupa.

Foi esse trabalho que levou portais como os da RDVS Imports e do Grupo New Motors à nota máxima (veja o case). Se o seu site ou app precisa desse nível, conheça nossa frente de Performance WPO ou conte o seu caso.