No cenário atual do desenvolvimento web, a experiência do usuário (UX) e a performance não são mais apenas diferenciais — elas ditam o sucesso de um produto digital. Um site rápido e estável retém mais usuários, converte melhor e ganha pontos valiosos com os motores de busca. É aqui que entram os Core Web Vitals.

Indice

O que é o Core Web Vitals?

O Core Web Vitals é uma iniciativa do Google que estabelece um conjunto de métricas unificadas para avaliar a qualidade da experiência do usuário na web.

Em vez de focar apenas em métricas técnicas abstratas, o foco está na percepção humana: quão rápido a página carrega visualmente (LCP), quão rápido ela reage às interações (INP) e quão estável ela permanece enquanto renderiza (CLS).

As Métricas Principais

Atualmente, o Core Web Vitals é composto por três pilares fundamentais:

1. LCP (Largest Contentful Paint) — Desempenho de Carregamento

O LCP mede o tempo que leva para o maior elemento de conteúdo visível na tela, geralmente uma imagem de destaque, um banner ou um grande bloco de texto, leva para ser totalmente renderizado a partir do momento em que a página começa a carregar.

LCP Web Vitals

  • Bom: Até 2,5 segundos.
  • Precisa melhorar: Entre 2,5 e 4,0 segundos.
  • Ruim: Acima de 4,0 segundos.

Lembrando os passos do navegador para renderizar uma página:

1 - O navegador recebe o HTML da página.

2 - Constrói a árvore do DOM (Document Object Model).

3 - Baixa os arquivos CSS e JS referenciados no HTML.

4 - Constrói a árvore do CSSOM (CSS Object Model).

5 - Finalmente, combina o DOM e o CSSOM para renderizar a página na tela.

Como você pode ver, o navegador tem certo trabalho até renderizar a página e tudo isso afeta o tempo de carregamento e consequentemente o LCP.

Dicas para melhorar o LCP:

  • Otimização de Imagens: Utilize formatos modernos (WebP, AVIF), implemente srcset para tamanhos responsivos, diminua imagens muito grandes e use ferramentas de compressão.
  • Priorização de Recursos: Adicione o atributo fetchpriority="high" na sua imagem principal (LCP) e utilize <link rel="preload"> em arquivos críticos. Evite fazer lazy-loading na imagem de destaque.
  • Reduza o TTFB (Time to First Byte): Otimize o tempo de resposta do servidor, implemente estratégias eficazes de cache e utilize uma CDN (Content Delivery Network).
  • Minifique o Código: Reduza o tamanho dos arquivos CSS e JS para acelerar o tempo de download.
  • Evite Bloqueio de Renderização: Scripts e estilos que bloqueiam a renderização devem ser carregados de forma assíncrona ou adiada.
  • Use Fontes Otimizadas: Prefira fontes do sistema ou utilize técnicas como font-display: swap para evitar bloqueios de renderização.

2. INP (Interaction to Next Paint) — Responsividade na Interação

O INP substituiu oficialmente o FID (First Input Delay) em março de 2024. Enquanto o FID media apenas o atraso do primeiro clique, o INP avalia a latência de todas as interações do usuário (cliques, toques e pressões de teclas) ao longo de toda a visita à página, identificando quanto tempo o navegador leva para atualizar a tela (o próximo frame) após a ação.

INP Web Vitals

  • Bom: Até 200 milissegundos.
  • Precisa melhorar: Entre 200 e 500 milissegundos.
  • Ruim: Acima de 500 milissegundos.

Dicas para melhorar o INP:

  • Divida Tarefas Longas (Long Tasks): Qualquer tarefa JavaScript executada por mais de 50 ms é considerada uma Long Task e pode bloquear a main thread. Use padrões como setTimeout ou requestIdleCallback para quebrar execuções pesadas.
  • Otimize a Execução do JavaScript: Remova código não utilizado (tree-shaking), adie scripts não essenciais com defer ou async e reavalie o peso de bibliotecas de terceiros.
  • Evite Layout Thrashing: Evite ler e escrever propriedades de estilo de forma intermitente que forcem o navegador a recalcular o layout várias vezes na mesma tarefa.
  • Use Web Workers: Para tarefas pesadas que não precisam acessar diretamente o DOM, considere mover a execução para um Web Worker, liberando a main thread para responder rapidamente às interações do usuário.
  • Prefira CSS para Animações: Sempre que possível, utilize animações baseadas em CSS, que são mais eficientes e menos propensas a bloquear a thread principal.

3. CLS (Cumulative Layout Shift) — Estabilidade Visual

Sabe quando você vai clicar em um botão e, de repente, um anúncio ou imagem carrega, empurra o conteúdo para baixo e você acaba clicando no lugar errado?

CLS Web Vitals

Mal exemplo de CLS

O CLS mede exatamente isso. Ele calcula a soma total de todas as pontuações de mudanças inesperadas de layout que ocorrem durante a vida útil da página.

CLS Web Vitals

  • Bom: Menos de 0,1.
  • Precisa melhorar: Entre 0,1 e 0,25.
  • Ruim: Acima de 0,25.

Dicas para melhorar o CLS:

  • Dimensões Explícitas: Sempre defina atributos de largura e altura (width e height) em tags <img>, <video> e <iframe>, ou utilize a propriedade CSS aspect-ratio.
  • Espaço Reservado para Elementos Dinâmicos: Reserve espaço estilizado (como esqueletos de carregamento ou min-height) para banners de anúncios, modais ou conteúdos injetados assincronamente.
  • Animações Seguras: Prefira propriedades como transform (para tradução e escala) em vez de animar propriedades de layout como top, left, width ou height.
  • ** Evite Inserção de Conteúdo Assíncrono:** Sempre que possível, carregue anúncios, imagens e outros conteúdos de forma síncrona ou reserve espaço para eles antes que sejam carregados.

Como Medir os Core Web Vitals

Para otimizar, primeiro precisamos medir. As principais ferramentas para medição são:

  • PageSpeed Insights: Combina dados de campo (CrUX) e dados de laboratório (Lighthouse) em um único relatório detalhado. Link: PageSpeed Insights
  • Chrome DevTools (Aba Performance e Lighthouse): Ideal para inspecionar gargalos localmente enquanto você desenvolve.
  • Google Search Console: Oferece um relatório consolidado de Core Web Vitals para todas as páginas indexadas do seu site, agrupando problemas por métrica. Link: Search Console
  • Biblioteca Web-Vitals (JS): Uma biblioteca leve que você pode instalar diretamente no seu projeto para capturar as métricas dos usuários e enviá-las para ferramentas de Analytics (Google Analytics, Vercel Analytics, Datadog, etc.). Link: web-vitals package

Core Web Vitals e Frameworks Modernos

Como vimos as métricas do Core Web Vitals são essenciais para a experiência do usuário e pontuação no Google, mas como elas se aplicam em frameworks modernos como React, Vue e Angular?

Por padrão, essas bibliotecas monta o conteúdo da página dinamicamente no lado do cliente com Javascript, o que pode impactar negativamente o LCP e o CLS.

Para contornar isso, é recomendado utilizar técnicas de Server-Side Rendering (SSR) ou Static Site Generation (SSG) para entregar HTML pré-renderizado ao navegador, diminuindo o tempo de carregamento, o tamanho do JavaScript necessário e evitando mudanças de layout inesperadas.

Ferramentas como Next.js, Remix, Astro e Nuxt oferecem suporte nativo a SSR e SSG, permitindo que você entregue páginas otimizadas para Core Web Vitals sem esforço adicional.

Benefícios de Otimizar

Investir tempo na melhoria do Core Web Vitals traz retornos claros em diferentes frentes:

  • Melhoria no SEO: Páginas que atendem aos limites recomendados de Core Web Vitals ganham vantagem no rankeamento do Google em buscas mobile e desktop.
  • Aumento nas Conversões: Menor tempo de carregamento e maior estabilidade geram uma experiência de compra ou navegação fluida, diminuindo taxas de rejeição (bounce rate).
  • Eficiência de Custo: Códigos otimizados e imagens comprimidas reduzem o tráfego de dados na rede, diminuindo custos com servidores e CDN.

Conclusão

Dominar o Core Web Vitals é entender que a engenharia de software na web vai muito além de apenas fazer o código funcionar. Trata-se de como esse código impacta a experiência de quem está na outra ponta da tela.

Ao alinhar boas práticas de desenvolvimento front-end com os recursos avançados fornecidos por frameworks como Next.js, Remix e Astro, conseguimos entregar aplicações robustas que são, ao mesmo tempo, extremamente velozes e agradáveis de usar.