Core Web Vitals: o que são e por que afetam a experiência e o SEO

O que são Core Web Vitals?

Core Web Vitals são um conjunto de métricas voltadas à experiência do usuário em páginas da web.

Em vez de olhar apenas para quanto tempo uma página inteira leva para terminar de carregar, elas procuram observar momentos que possuem impacto mais direto sobre quem está utilizando o site.

Atualmente, as três métricas principais são:

• LCP (Largest Contentful Paint): carregamento do conteúdo principal;
• INP (Interaction to Next Paint): capacidade de resposta às interações;
• CLS (Cumulative Layout Shift): estabilidade visual da página.

Isso ajuda a entender por que Core Web Vitals não são simplesmente um sinônimo de “velocidade do site”.

Uma página pode aparecer rapidamente na tela, por exemplo, mas responder mal quando o visitante tenta abrir um menu, clicar em um botão ou preencher um formulário.

Também pode carregar rápido e, ainda assim, apresentar elementos que mudam de posição inesperadamente enquanto a pessoa tenta utilizá-la.

LCP, INP e CLS: o que cada Core Web Vital mede?

Cada métrica procura representar um problema diferente. Por isso, uma página pode estar bem em uma delas e apresentar dificuldades nas outras.

LCP: Largest Contentful Paint

O Largest Contentful Paint mede o momento em que o maior elemento de conteúdo relevante visível na área inicial da página é renderizado.

Dependendo da página, esse elemento pode ser uma imagem, um bloco de texto ou outro conteúdo de destaque.

Pense, por exemplo, em uma página de serviço com um banner principal contendo título, texto e uma grande fotografia.

Se essa imagem demora vários segundos para aparecer, o visitante pode ter a sensação de que a página ainda não terminou de carregar, mesmo que outros pequenos elementos já estejam visíveis.

Problemas de LCP podem estar relacionados a fatores como:

• tempo de resposta do servidor;
• imagens grandes ou mal otimizadas;
• recursos importantes carregados tarde demais;
• CSS ou JavaScript bloqueando a renderização;
• fontes e elementos essenciais aguardando outros recursos;
• estrutura inadequada de carregamento da página.

INP: Interaction to Next Paint

O Interaction to Next Paint observa a capacidade de resposta de uma página às interações realizadas pelo usuário.

Isso inclui ações como clicar, tocar na tela ou utilizar determinadas entradas do teclado.

Imagine que alguém clique no botão que abre o menu de um site no celular. Se existe um atraso perceptível entre o toque e a mudança visual na tela, essa experiência pode contribuir para um INP ruim.

O mesmo pode acontecer em filtros, formulários, menus, calculadoras, abas, modais e outras interfaces interativas.

Um dos grandes responsáveis por problemas de responsividade costuma ser a quantidade de trabalho executada pelo navegador, principalmente quando tarefas de JavaScript ocupam a thread principal por tempo demais.

CLS: Cumulative Layout Shift

O Cumulative Layout Shift mede mudanças inesperadas na posição dos elementos enquanto a página está sendo utilizada.

Um exemplo clássico acontece quando você está prestes a clicar em um botão e, de repente, uma imagem, banner ou anúncio é carregado acima dele e desloca todo o conteúdo.

Além de frustrante, esse comportamento pode fazer a pessoa clicar no elemento errado.

Algumas causas comuns são:

• imagens sem espaço previamente reservado;
• iframes ou vídeos sem dimensões definidas;
• banners inseridos depois do carregamento;
• fontes que alteram significativamente o tamanho do texto;
• elementos adicionados dinamicamente acima de conteúdo já exibido.

Quais são os valores recomendados para Core Web Vitals?

Para classificar a experiência como boa, as recomendações atuais trabalham com os seguintes limites:

Existe outro detalhe importante: a avaliação não deveria considerar apenas uma visita específica.

A recomendação é observar o 75º percentil das visitas, separando dispositivos móveis e computadores.

Em termos práticos, isso procura avaliar se a boa experiência está acontecendo para uma parcela ampla dos usuários, e não somente em um computador rápido, conectado a uma rede excelente e utilizado pelo próprio desenvolvedor.

Core Web Vitals afetam o SEO?

A experiência na página é um dos aspectos considerados pelos sistemas de busca, e o Google recomenda que proprietários de sites busquem bons resultados nas Core Web Vitals.

Isso, porém, precisa ser interpretado corretamente.

Conseguir notas excelentes nas métricas não significa que uma página automaticamente passará para a primeira posição.

O mecanismo de busca precisa avaliar diversos outros aspectos para decidir quais páginas fazem mais sentido para cada pesquisa.

Uma página extremamente rápida, mas que não responde adequadamente à intenção do usuário, não se torna o melhor resultado apenas porque passou nas Core Web Vitals.

O inverso também merece atenção.

Ter um conteúdo relevante não significa que problemas graves de usabilidade e performance devam ser ignorados.

Se você ainda está começando nesse assunto, vale ler também o que é SEO e como funciona.

Dados reais e testes de laboratório não são a mesma coisa

Uma das maiores fontes de confusão ao analisar Core Web Vitals é encontrar números diferentes em ferramentas diferentes.

Isso pode acontecer porque existem dois tipos importantes de medição: dados de campo e dados de laboratório.

Dados de campo

Dados de campo representam experiências observadas em usuários reais.

Eles incorporam variações que acontecem no uso cotidiano, como:

• celulares mais rápidos ou mais lentos;
• conexões diferentes;
• localização dos usuários;
• quantidade de interações realizadas;
• estado do navegador e do dispositivo;
• variações entre páginas e visitas.

O Chrome User Experience Report, conhecido como CrUX, é uma das fontes utilizadas pelas ferramentas do Google para apresentar esse tipo de informação.

Dados de laboratório

Um teste de laboratório executa a página em condições controladas ou simuladas.

Esse tipo de avaliação é extremamente útil durante o desenvolvimento porque ajuda a reproduzir problemas, investigar causas e comparar alterações.

Entretanto, um teste isolado não representa necessariamente a experiência de todos os usuários reais.

Por que o PageSpeed pode mostrar resultados diferentes?

O PageSpeed Insights pode apresentar dados de campo quando existem informações suficientes disponíveis e também uma análise de laboratório da página.

Por isso, é possível encontrar uma situação em que o teste executado naquele momento parece bom, mas os dados reais ainda indicam problemas.

Também pode ocorrer o contrário.

Uma otimização recente pode produzir um bom teste de laboratório enquanto os dados de campo ainda refletem visitas realizadas antes da melhoria.

Como medir as Core Web Vitals de um site?

Não existe necessidade de depender de uma única ferramenta.

Cada uma pode ajudar em uma etapa diferente da análise.

PageSpeed Insights

É uma forma prática de começar porque reúne informações de experiência real quando disponíveis e uma análise de laboratório da URL testada.

O ponto mais importante é não olhar somente para a nota geral.

Observe quais métricas estão apresentando problemas e quais diagnósticos podem explicar os resultados.

Google Search Console

O relatório de Core Web Vitals do Search Console ajuda a observar o desempenho a partir de dados reais de uso e agrupa páginas com comportamentos semelhantes.

Isso é especialmente útil para compreender se o problema está concentrado em uma página ou se aparece em um conjunto maior de URLs.

Chrome DevTools

Para quem precisa investigar tecnicamente o problema, as ferramentas de desenvolvimento do Chrome permitem analisar carregamento, execução de scripts, renderização, interações e mudanças de layout com mais profundidade.

Lighthouse

O Lighthouse é útil em testes de laboratório e fornece diagnósticos relacionados a desempenho.

Como uma execução automatizada não possui uma pessoa interagindo normalmente com a página, a INP real não pode ser reproduzida da mesma forma em um teste de laboratório.

Métricas auxiliares podem ajudar na investigação de problemas de responsividade.

O que costuma prejudicar Core Web Vitals?

A causa depende da arquitetura e da tecnologia de cada projeto. Ainda assim, alguns padrões aparecem com frequência.

Imagens maiores do que o necessário

Uma imagem de destaque pesada pode atrasar justamente o elemento que será considerado no LCP.

O problema não se resolve apenas reduzindo a qualidade indiscriminadamente. É preciso avaliar dimensões, formato, compressão e forma de carregamento.

JavaScript em excesso

Scripts de plugins, rastreamento, animações, widgets e recursos de terceiros podem competir pelo processamento do navegador.

Quando a thread principal permanece ocupada, uma ação simples do usuário pode levar mais tempo para produzir uma resposta visual.

Plugins e recursos que carregam em todas as páginas

Em sistemas de gerenciamento de conteúdo, é comum que determinados recursos sejam carregados globalmente mesmo quando são utilizados apenas em algumas páginas.

Isso pode aumentar CSS, JavaScript e requisições sem adicionar valor àquela visita específica.

Elementos sem dimensões definidas

Se o navegador não sabe antecipadamente quanto espaço uma imagem ou componente ocupará, pode precisar reorganizar o conteúdo depois que o recurso estiver disponível.

Esse comportamento é uma causa frequente de problemas de CLS.

Fontes mal configuradas

Fontes personalizadas podem adicionar atrasos e também causar mudanças de layout quando a tipografia inicial é substituída pela fonte definitiva.

Servidor e entrega lentos

Se o documento inicial demora para começar a chegar ao navegador, todo o restante da sequência de carregamento pode ser atrasado.

Hospedagem, cache, processamento no servidor e distância de entrega podem fazer parte da investigação.

Scripts de terceiros

Chats, mapas, players, pixels, ferramentas de análise e outros recursos externos também podem influenciar o desempenho.

A pergunta correta não é necessariamente “posso remover todos?”, mas quais recursos são realmente necessários e como podem ser carregados de maneira mais eficiente.

Como melhorar Core Web Vitals?

A otimização deveria começar pelo diagnóstico, e não pela instalação aleatória de plugins ou pela aplicação de uma lista genérica de configurações.

Se o problema está no LCP, as prioridades podem ser diferentes de um site cujo principal problema é INP.

Para melhorar LCP

Dependendo da causa identificada, o trabalho pode envolver:

• otimizar a imagem ou conteúdo principal;
• priorizar recursos necessários para a primeira dobra;
• reduzir bloqueios provocados por CSS e JavaScript;
• melhorar o tempo de resposta inicial;
• revisar a sequência de carregamento dos recursos.

Para melhorar INP

Alguns caminhos possíveis são:

• reduzir tarefas longas de JavaScript;
• evitar processamento desnecessário durante interações;
• carregar apenas scripts realmente necessários;
• dividir operações pesadas quando possível;
• investigar componentes que demoram para responder.

Para melhorar CLS

A correção normalmente passa por estabilizar o layout antes que todos os recursos terminem de carregar.

Isso pode incluir:

• reservar espaço para imagens, vídeos e embeds;
• evitar inserir conteúdo acima do que já está visível;
• configurar fontes adequadamente;
• controlar banners e componentes carregados dinamicamente;
• definir dimensões e proporções dos elementos.

Quando vale fazer uma análise técnica do site?

Nem toda variação pequena em uma pontuação exige uma reformulação completa.

Uma investigação mais detalhada passa a ser especialmente útil quando:

• o Search Console apresenta grupos de URLs com problemas;
• a experiência mobile está claramente prejudicada;
• páginas importantes carregam de forma inconsistente;
• menus, filtros ou formulários demoram para responder;
• elementos mudam de posição durante o carregamento;
• um site acumulou muitos plugins e scripts ao longo do tempo;
• uma reformulação ou migração está sendo planejada;
• o desempenho piorou depois de uma alteração técnica.

Nesses casos, olhar somente para a pontuação final de uma ferramenta costuma ser insuficiente.

É preciso encontrar qual recurso, componente ou decisão de implementação está provocando o comportamento.

É justamente nesse ponto que desenvolvimento e SEO técnico se encontram.

Uma análise de SEO técnico pode investigar performance junto com rastreamento, indexação, estrutura, dados estruturados e outros aspectos técnicos que influenciam o funcionamento do site.

Em projetos novos, parte desses problemas também pode ser evitada ao considerar desempenho desde a criação do site, em vez de tentar corrigir toda a estrutura somente depois da publicação.