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).
As métricas do Core Web Vital surgiram em 2020, após um Core Update do Google, e se concentram em três pilares: carregamento, interatividade e estabilidade visual, sendo guiadas pelas métricas LCP, FID e CLS.
Conhecer e compreender essas métricas é papel de profissionais de SEO, UX e Desenvolvimento, pois além de fatores de ranqueamento do Google, foram desenvolvidas justamente para que sites ofereçam ótimas experiências aos seus usuários. Saiba mais a seguir!
O que é 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.
- 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.
Por que essas métricas são tão importantes para o usuário?
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.
Entendeu o quanto essas métricas importam agora?
Ferramentas para identificação de erros
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.
gravidade do erro e qual é o problema. 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 do 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
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
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.
Referências do conteúdo
Site Web.Dev
Relatório de Principais métricas da Web
