Core Web Vitals são as principais métricas do Google para mensurar a experiência do usuário nas páginas da Web. São elas: Largest Content Paint (LCP), Input Delay (FID) e Cumulative Layout Shift (CLS).
O que são as Core Web Vitals?
Core Web Vitals foi o nome dado pelo Google às suas principais métricas que mensuram a experiência dos usuários nas páginas da Web e fazem parte do Page Experience. São três métricas:
- Largest Content Paint (LCP) ou Maior Renderização de Conteúdo: mede o desempenho e a velocidade do carregamento do site.
- First Input Delay (FID) ou Atraso da Primeira Entrada: avalia a interatividade da página.
- Cumulative Layout Shift (CLS) ou Mudança Cumulativa de Layout: mede a estabilidade visual da página.
As Core Web Vitals foram criadas para facilitar a vida dos profissionais responsáveis por sites a entenderem a experiência que suas páginas oferecem aos usuários. Para quem quer atuar com SEO Técnico, é preciso dominá-las.
Ou seja, são indicadores que o Google identifica como fundamentais para a experiência do usuário na internet.
Elas medem aspectos vitais como a velocidade com que as páginas carregam, quão rápido um site se torna interativo e se há algum movimento inesperado do conteúdo na tela. Vale ressaltar que um bom desempenho nessas métricas pode elevar a posição do seu site nos resultados dos mecanismos de busca, pois as Core Web Vitals fazem parte dos critérios de ranqueamento do Google.
Em 2024, o Google anunciou que uma nova métrica passaria a integrar as Core Web Vitals. Trata-se da Interaction to Next Paint (INP) ou Atraso até o Próximo Quadro, que mede a capacidade de resposta da página. Ela substituiu a First Input Delay, que continua ativa, mas não é mais considerada um pilar.
Qual é a importância das Core Web Vitals?
Há anos, o Google estuda e pesquisa o comportamento do usuário na Web para melhorar seu algoritmo e lançar novos recursos. Em uma das muitas pesquisas, a empresa entendeu que deveria priorizar a experiência do usuário nos sites, pois é a chave para o sucesso no longo prazo de qualquer site na Web.
Sendo assim, as Core Web Vitals são uma iniciativa para fornecer orientação unificada sobre os sinais de qualidade essenciais para a experiência do usuário nas páginas de um site.
Essas métricas são totalmente focadas no usuário, ou seja, em mim e em você, que está lendo este texto. Elas garantem ao proprietário do site que as suas páginas estão carregando corretamente, que os botões estão clicáveis e a fonte está do tamanho ideal para leitura, por exemplo.
Por isso, desde 2020 os crawlers do Google avaliam sites baseados nas métricas das Core Web Vitals, tornando-as essenciais para quem trabalha com sites, principalmente e-commerces.
Segundo pesquisas publicadas no Chromium Blog, atender aos limites das Principais métricas da Web reduz em 24% a probabilidade dos usuários do site abandonarem o carregamento da página.
Quais são as métricas do Core Web Vitals?
Dentro do universo das Core Web Vitals, encontramos métricas específicas que são verdadeiros termômetros para a saúde do seu site. Elas refletem diretamente na experiência do usuário e indicam onde sua plataforma pode estar perdendo desempenho.
Ao compreender e otimizar cada uma dessas ferramentas de mensuração, você estará dando passos largos rumo ao sucesso digital.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) mede o tempo que leva para o maior conteúdo da sua página ser carregado. Este pode ser um bloco de texto, uma imagem ou um vídeo. Quanto mais rápido esses elementos carregam, melhor é a percepção do usuário sobre a velocidade do site.
Melhorar o LCP é crucial, pois um carregamento lento pode frustrar os visitantes e fazer com que abandonem o site antes mesmo de navegar.
Focar na otimização desse tempo de carregamento leva a uma melhoria significativa na experiência do usuário. Isso reflete diretamente nos resultados de pesquisa do Google, onde sites com melhor desempenho em LCP tendem a aparecer em posições mais altas.
First Input Delay (FID)
O First Input Delay (FID) mede o tempo que seu site leva para responder ao primeiro comando de um usuário, como clicar em um link ou botão. Este é um indicador crítico da interatividade do site e da experiência do usuário.
Sites com FID baixo são rápidos ao reagir às ações dos visitantes, proporcionando sensação de agilidade e resposta imediata.
Ter um FID rápido é crucial para manter os usuários engajados, já que atrasos podem frustrar e levar à desistência da navegação. Uma boa pontuação de FID significa que o site responde sem demora, mantendo a atenção do usuário.
Isso impacta diretamente no sucesso do seu site, pois o Google valoriza sites que oferecem uma experiência positiva ao usuário, refletindo na sua classificação nos resultados de pesquisa.
Em 2024, ela foi substituída pela próxima métrica a ser tratada, muito embora ainda seja um importante indicador para sites.
Interaction to Next Paint (INP)
O termo refere-se especificamente ao tempo decorrido entre a interação do usuário com o site (como clicar em um link ou botão) e o próximo quadro de pintura na tela.
Em outras palavras, Interaction to Next Paint mede o tempo que leva para o conteúdo visual relevante aparecer na tela após o usuário interagir com o site. É uma métrica importante porque reflete a capacidade do site de responder rapidamente às ações do usuário e fornecer feedback visual de forma eficiente.
Um tempo baixo de INP é desejável, pois indica uma resposta rápida do site às interações do usuário, proporcionando uma experiência de usuário mais fluida e responsiva.
Por outro lado, um tempo alto pode resultar em uma experiência do usuário frustrante, especialmente em dispositivos móveis ou conexões de internet mais lentas. Portanto, otimizar essa métrica é fundamental para melhorar a qualidade e a usabilidade de um site.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) é uma métrica crucial para avaliar a estabilidade visual de um site. O CLS monitora quanto conteúdo inesperadamente se move na tela durante o carregamento da página.
Esse tipo de movimento pode frustrar seus visitantes, já que elementos como botões ou links podem mudar de lugar, levando a cliques acidentais e uma experiência de usuário negativa.
Para garantir uma navegação sem sobressaltos, é essencial manter um CLS baixo, demonstrando que a página é estável enquanto carrega. Isso ajuda os usuários a se sentirem mais confortáveis e confiantes ao navegar pelo seu site.
Uma boa prática envolve dimensionar corretamente as imagens e outros elementos de mídia, assim eles não alteram bruscamente o layout ao serem totalmente carregados.
Mantendo sua página estável, você não só melhora a experiência do usuário mas também contribui para uma melhor classificação no ranqueamento do Google.
Qual é a importância das Core Web Vitals para as estratégias de SEO?
As Core Web Vitals são fundamentais para o SEO porque o Google as usa como fatores de ranqueamento. Sites com tempos de carregamento rápidos, interações responsivas e estabilidade visual têm chances maiores de aparecer no topo dos resultados de busca.
Isso mostra que não basta ter conteúdo relevante, a experiência do usuário também é crucial.
Melhorar as Core Web Vitals do seu site significa dar aos visitantes uma navegação mais rápida e suave, o que pode diminuir a taxa de rejeição e aumentar o tempo de permanência na página.
Essas melhorias no desempenho não só cativam os usuários mas também sinalizam para os motores de busca que o seu site merece uma classificação mais alta. A troca para o próximo tópico é natural, pois agora vamos explorar como exatamente o Core Web Vitals afeta os resultados da pesquisa do Google.
Como o Core Web Vitals afeta os resultados da pesquisa do Google?
Sites que otimizam essas métricas proporcionam uma melhor experiência ao usuário, e o Google reconhece essa qualidade ranqueando-os mais alto nas buscas.
Isso ocorre porque a plataforma quer garantir que páginas rápidas, interativas e visivelmente estáveis sejam mais facilmente encontradas pelos usuários. Portanto, um bom desempenho no Core Web Vitals não só agrada os visitantes do site, mas também age como um sinal para o algoritmo do Google de que seu conteúdo merece destaque.
Melhorar seus indicadores de Core Web Vitals significa entrar na competição por posições superiores na página de resultados. O algoritmo do Google valoriza a velocidade de carregamento, a responsividade ao clique e a estabilidade dos elementos visuais da página, integrando essas experiências na sua avaliação geral do site.
Sites que falham em atender a esses padrões podem perder terreno para concorrentes que oferecem uma navegação mais suave e satisfatória. Portanto, investir na otimização dessas vitais métricas vai além de melhorar a experiência dos usuários – é uma estratégia decisiva para aumentar a visibilidade e alcançar o sucesso nas buscas online.
Quais são as ferramentas para identificação de erros das Core Web Vitals?
Google Search Console
O Google Search Console, antigamente chamado de Webmaster Tools, é uma ferramenta completa disponibilizada pelo Google para que proprietários de sites possam acompanhar como o site é rastreado, indexado e classificado nas buscas.
Por isso mesmo, o Search Console conta com relatórios elaborados, atualizados constantemente pela empresa, que identificam os erros que impedem a boa performance de um site.
O relatório das Core Web Vitals podem ser encontrados na barra lateral esquerda da ferramenta, em “Experiência” e depois em “Principais métricas da Web”. Em seguida, você verá dois dashboards: um voltado para celulares e outro para computadores. Eles indicam a quantidade de URLs inválidas; que precisam de melhorias; e adequadas para a Web.
No exemplo da imagem abaixo, temos um erro de LCP em dispositivos móveis:
Além disso, após identificado o problema, partimos para construir a solução. Quando tudo estiver testado e ajeitado, o Search Console tem a opção de validação do erro, onde podemos indicar que já foi ajustado.
Se estiver certo, o erro deixará de existir.
Google PageSpeed Insights
O PageSpeed Insights é uma ferramenta gratuita desenvolvida pelo Google para webmasters. Ele analisa a velocidade de carregamento de um site simulando o acesso via computador e dispositivos móveis, sendo que o seu objetivo é ajudar a construir sites de alta performance na Web.
Para isso, o PageSpeed Insights disponibiliza dois relatórios: o primeiro para entender a experiência dos usuários e o segundo para diagnosticar problemas de desempenho do site, conforme as métricas das Core Web Vitals. Os relatórios são diferentes de acordo com o dispositivo (celular ou computador).
Chrome User Experience Report (CrUX)
O Chrome UX Report (CrUX) é o conjunto de dados oficial das Web Vitals (iniciativa que criou as Core Web Vitals). Através desse relatório, são coletados dados de vários navegadores Chrome ao redor do mundo baseados em alguns critérios.
Dessa forma, há uma série de métricas e dimensões coletadas e que depois nos permitem entender a experiência dos usuários em nossos sites.
Então, os dados do relatório do CrUX nos é apresentado no Google Search Console e PageSpeed Insights. Ao contrário das ferramentas, não há testes que possamos fazer, pois é apenas o banco de dados.
Web Vitals (extensão do Chrome)
Para quem busca mais agilidade, a extensão Web Vitals pode ser útil. Assim como as demais ferramentas, ela mede a performance da URL sem precisar uma nova aba. Ou seja, o resultado é mostrado na extensão.
Lighthouse (extensão do Chrome)
O Lighthouse é uma extensão desenvolvida pelo Google e que faz parte do Chrome Dev Tools. Através da ferramenta, podemos gerar um relatório de performance de qualquer página da Web, que claro, se baseiam nas Core Web Vitals.
O seu relatório é apresentado igual ao do PageSpeed Insights. No entanto, a diferença é que o acesso ao Lighthouse é mais rápido por ser uma extensão do Chrome.
WebPageTest
O WebPageTest é outra ferramenta popular onde podemos medir as Core Web Vitals. O seu relatório é bem detalhado e conta com explicações objetivas dos problemas. As métricas observadas são as mesmas do PageSpeed Insights.
Biblioteca Javascript
Além das ferramentas listadas acima, é possível medir as Core Web Vitals usando a Biblioteca Javascript. No entanto, é necessário conhecimento avançado em programação para fazer dessa forma. Para mais detalhes, é só conferir a documentação completa disponível no Google Developers.
Como corrigir os principais erros das Core Web Vitals?
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP), ou Maior Renderização de Conteúdo, é a métrica que informa o tempo de renderização do maior elemento de conteúdo na página se torna visível. Exemplificando, ela mede o tempo que a página por completo leva para abrir para o usuário.
O LCP de uma página deve ter, no máximo, 2,5 segundos para ser avaliado como bom. A Farfetch é um caso de sucesso de otimização de LCP. Cada redução de 100 ms na métrica gerou um aumento de 1,3% na taxa de conversão da empresa.
Confira como corrigir os problemas de LCP:
- Aplique carregamento instantâneo com o padrão PRPL
- Otimize seu caminho crítico de renderização
- Otimize arquivos CSS
- Otimize os tamanhos e a compactação dos arquivos de imagem
- Otimize ou remova fontes da web
- Otimize ou reduza seu JavaScript
First Input Delay (FID)
First Input Delay, ou Atraso da Primeira Entrada, mede o tempo em que o usuário interage pela primeira vez com uma página (como clicar num link ou interação) até o momento em que o navegador processa e responde a essa interação.
Por isso, a FID é uma métrica muito centrada no usuário porque mede justamente a experiência ao interagir com a página.
Para ter uma boa pontuação na FID, é preciso atingir 100 milissegundos ou menos. Imagine clicar num botão de CTA e nada acontecer, ou demorar para abrir? Assim, faz sentido que essa resposta do navegador seja rápida e quanto menos perceptível ao usuário, melhor.
Um ponto importante sobre a FID é que ela mede o “atraso” do carregamento da interação, e não o tempo do carregamento total da interação. Veja como corrigir os principais problemas da FID:
- Reduza o impacto do código de terceiros
- Reduza o tempo de execução do JavaScript
- Minimize o trabalho de thread principal
- Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos
Interaction to Next Paint (INP)
Melhorar a INP envolve otimizar diversos aspectos do site para que haja uma resposta mais rápida às interações do usuário.
Isso inclui a otimização do desempenho do servidor, recursos estáticos de arquivos CSS, JavaScript e imagens, implementação do carregamento progressivo e pré-carregamento de páginas.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS), ou Mudança Cumulativa de Layout, mede a estabilidade visual de uma página. É uma métrica bastante importante, porque ela identifica e quantifica a frequência em que os usuários experimentam mudanças inesperadas de layout.
Sendo assim, manter uma CLS abaixo de 0.1 segundos ajuda a garantir que a experiência na página seja agradável.
Quando uma página é carregada, normalmente os elementos visuais são processados somente após os recursos essenciais. É neste momento que precisamos tomar cuidado: ao adiar esses elementos, as páginas correm o risco de sofrerem alterações bruscas de layout.
Um exemplo é um botão sendo empurrado para baixo ou um conteúdo mudando de posição repentinamente, como no exemplo abaixo:
Por isso, o espaço para os recursos adiados deve ser demarcado previamente para evitar que o usuário seja induzido ao erro. Veja como corrigir os problemas de CLS:
- Declare explicitamente o tamanho da imagem e iframes
- Carregue uma imagem genérica enquanto aguarda as outras
- Utilize a propriedade font-display
Recomendações para melhorar sua pontuação no Core Web Vitals
Para elevar a pontuação no Core Web Vitals e turbinar a experiência dos usuários, é crucial focar em otimizações técnicas do seu site. Priorize ações que direcionem um carregamento rápido, uma interatividade suave e uma estabilidade visual firme, garantindo assim uma navegabilidade de excelência para quem o visita.
Melhore o tempo de resposta do servidor
O tempo de resposta do seu servidor faz uma grande diferença na velocidade de carregamento do site. Servidores rápidos entregam conteúdos a velocidades que mantêm os visitantes engajados e satisfeitos.
Escolha uma hospedagem confiável e considere a proximidade dos servidores ao seu público-alvo para diminuir o tempo de resposta. Otimize o processamento do servidor removendo gargalos, atualizando softwares e usando cache eficientemente.
Configurações do servidor devem ser ajustadas para lidar com altas demandas e picos de tráfego. Implemente redes de entrega de conteúdo (CDNs) para distribuir o peso dos dados, aliviando a carga em um único servidor.
Ajustes técnicos como compressão de dados, uso de HTTP/2 e ter versões otimizadas das páginas para dispositivos móveis também são cruciais. Essas ações melhoram a pontuação no Core Web Vitals, impactando positivamente na experiência do usuário e no desempenho SEO do seu site.
Minifique e adie JavaScript e CSS
Minificar e adiar o carregamento de arquivos JavaScript e CSS pode aumentar a velocidade do seu site. Reduzindo o tamanho desses arquivos, você tira os espaços extras e comentários desnecessários, fazendo com que eles sejam baixados e processados mais rapidamente pelos navegadores.
Adiar o carregamento de scripts que não são necessários para a renderização inicial da página pode evitar que eles bloqueiem a pintura do conteúdo principal, melhorando assim a métrica Largest Contentful Paint (LCP), uma das Core Web Vitals.
Organize o carregamento de seus recursos com estratégias eficientes como ‘loading lazy’ para imagens e defina prioridades nos elementos essenciais. Isso assegura que seus usuários possam interagir com a página sem esperar que todo o JavaScript e CSS sejam carregados, o que também contribui para uma melhor First Input Delay (FID).
Coloque em prática essas táticas e observe sua pontuação de interatividade do site melhorar significativamente. Agora, prepare-se para reduzir o tempo de carregamento de recursos lentos.
Reduza o tempo de carregamento de recursos lentos
Otimize imagens, vídeos e outros arquivos grandes para que não demorem a carregar. Comprimir esses arquivos reduz o tamanho deles sem perder qualidade, acelerando o processo de carregamento na página do usuário.
Além disso, ajuste a entrega de conteúdo utilizando técnicas como o lazy loading, que só carrega elementos da página quando eles são realmente necessários. Isso evita sobrecarregar a página com dados desnecessários logo de início, o que pode despertar a impaciência do usuário.
Evite o uso de scripts ou fontes externas que demoram para responder. Nesses casos, procure alternativas mais rápidas ou hospede esses recursos localmente. Ao eliminar essas dependências externas lentas, a página ganha velocidade e os visitantes não são obrigados a esperar por recursos que travam a navegação.
Implemente um sistema de cache eficiente. Isso faz com que os retornos ao site sejam mais rápidos, visto que parte do conteúdo já está armazenado no dispositivo do usuário. Dessa maneira, a experiência do usuário melhora consideravelmente, fator determinante tanto para a retenção do público quanto para o desempenho do site nas classificações de experiência vital do Google.
Divida Javascript pesados em tarefas menores e assíncronas
Javascript volumosos podem atrasar o seu site e afetar negativamente as Core Web Vitals, impactando a experiência do usuário. Para evitar isso, quebre esses códigos em pedaços menores.
Isso permite que o navegador processe cada parte sem se sobrecarregar. Ao dividir o trabalho, você também prepara o terreno para que as tarefas sejam executadas de forma assíncrona, ou seja, em paralelo ao carregamento de outras partes da página.
Executar scripts de maneira assíncrona é uma técnica poderosa para melhorar a interatividade do site. Dessa forma, os usuários podem começar a interagir com a página mais rapidamente, enquanto os scripts são processados em segundo plano.
Assim, você garante que elementos críticos da página sejam carregados sem espera desnecessária, colaborando com um bom desempenho nas métricas de carregamento e velocidade da página, elementos chaves para uma sólida estratégia de SEO.
Use um web worker
Depois de dividir os scripts Javascript em tarefas menores, considere implementar um web worker para otimizar ainda mais o desempenho do seu site. Web workers permitem que operações pesadas sejam executadas em um segundo plano, sem afetar a interatividade e a velocidade de carregamento da página principal.
Isso significa que seus usuários não enfrentarão atrasos enquanto o site processa scripts complexos ou realiza cálculos intensivos.
Ao mover essas tarefas para um web worker, você mantém a estabilidade da página e proporciona uma experiência de usuário mais suave, fatores que são essenciais segundo as métricas de desempenho do Core Web Vitals.
Utilizar web workers é uma estratégia inteligente porque auxilia na redução do First Input Delay (FID), uma das métricas vitais que influencia diretamente no ranking do Google e na experiência do usuário.
Ao manter o thread principal livre para responder a interações do usuário, a página se torna mais responsiva. Isso não apenas melhora a percepção do usuário sobre o desempenho do site como também contribui positivamente para o SEO, reforçando a importância de considerar todos os aspectos das Core Web Vitals na otimização do seu site.
Use uma API de carregamento de fontes
Uma API de carregamento de fontes ajuda seu site a exibir o texto mais rapidamente.
Ao invés de esperar que a fonte inteira seja baixada, essa tecnologia permite que o texto seja mostrado com uma fonte padrão e, em seguida, atualiza isso para a fonte escolhida assim que possível.
Isso reduz o tempo até que o conteúdo seja visível para o usuário, melhorando as métricas do Largest Contentful Paint (LCP). Garante também uma experiência mais fluida e minimiza qualquer possível mudança visual indesejada.
Priorizar o carregamento dinâmico de fontes é essencial para otimizar a velocidade de carregamento e para seguir as diretrizes do Page Experience. A interatividade e estabilidade visual do seu site serão significativamente aprimoradas ao integrar uma API de carregamento de fontes eficiente.
Inclua atributos de altura e largura para imagens e vídeos
Depois de otimizar o carregamento das fontes, é hora de focar nas imagens e vídeos do seu site. Definindo os atributos de largura (width) e altura (height) para cada imagem e vídeo, você contribui significativamente para a estabilidade visual da página.
Isso porque o navegador saberá exatamente quanto espaço esses elementos ocuparão antes mesmo de serem carregados, prevenindo alterações inesperadas na disposição dos conteúdos.
Essa prática elimina os chamados saltos de layout, melhorando a métrica de Cumulative Layout Shift (CLS) e, por consequência, as Core Web Vitals do seu site.
Ajustar o width e height melhora a experiência do usuário ao navegar pelo seu site. Sem essas mudanças bruscas na página enquanto carrega, visitantes têm uma percepção mais positiva e são menos prováveis de abandonar a navegação.
Lembre-se que um bom desempenho nas Core Web Vitals aumenta as chances de seu site se destacar na classificação de experiência vital do Google. Portanto, incorpore esses atributos aos seus arquivos multimídia e veja sua página ganhar fluidez, velocidade no carregamento e uma navegação mais suave para todos os usuários.
Reserve espaços fixos para elementos dinâmicos
Definir espaços fixos para elementos que mudam, como anúncios ou sliders, ajuda a evitar deslocamentos inesperados na página. Esse ajuste melhora a estabilidade visual, uma das métricas do Core Web Vitals, e proporciona uma experiência de navegação mais confortável para os usuários.
Sinalizando claramente onde esses elementos aparecerão, você elimina surpresas desagradáveis que podem frustrar e afastar visitantes.
Manter a posição destes componentes sem alteração durante o carregamento é crucial. Isso evita o Cumulative Layout Shift (CLS), que é quando partes do site movem-se repentinamente enquanto a página ainda está carregando.
Com áreas reservadas e bem definidas, a página transmite uma sensação de velocidade e confiança, melhorando assim a interatividade do site e contribuindo para um melhor posicionamento do seu site nos resultados de pesquisa do Google.
Conclusão
As Core Web Vitals são as métricas mais conhecidas do mundinho de SEO, e não é por nada. Afinal, são responsáveis pelas experiências — boas e ruins — de usuários e também fatores importantes para o ranqueamento de páginas.
Apesar da otimização dessas métricas fugirem um pouco do escopo do profissional de SEO, porque muitas vezes é necessário mexer no código do site, é importante entender o que elas são para repassar a pessoa responsável pelas implementações.
