Os Core Web Vitals são medidas fundamentais do Google que visam avaliar a qualidade da experiência do usuário em páginas da web. Elas incluem o tempo de carregamento do maior conteúdo da página (LCP), o atraso de entrada (FID) e o deslocamento acumulativo do layout (CLS).
Esses três indicadores de desempenho são considerados importantes porque afetam diretamente a percepção do usuário sobre a velocidade e a qualidade da página. Quanto melhor forem esses indicadores, mais provável é que o usuário tenha uma experiência positiva e satisfatória no site.
O Google está incluindo os Core Web Vitals como um fator de classificação para o seu algoritmo de busca, o que significa que sites que atendem a esses critérios terão uma vantagem no ranking de resultados de pesquisa.
Quando surgiu essa atualização do Core Web Vitals?
Em 2020, o Google lançou o Core Update, o qual introduziu as métricas do Core Web Vitals. Essas métricas têm como objetivo avaliar a experiência do usuário em três aspectos: carregamento, interatividade e estabilidade visual. Elas são medidas por meio das métricas Largest Content Paint (LCP), Input Delay (FID) e Cumulative Layout Shift (CLS).
É fundamental que profissionais de SEO, UX e Desenvolvimento estejam cientes das métricas do Core Web Vitals, pois elas são importantes para os fatores de ranqueamento do Google quanto para garantir que os sites ofereçam excelentes experiências aos usuários. Saiba mais sobre essas métricas e como elas podem ser utilizadas para otimizar o desempenho e a satisfação dos usuários.
O que é Core Web Vitals?
O Google criou o termo Core Web Vitals para se referir às suas principais métricas de avaliação da experiência dos usuários em páginas da web. Essas métricas, que fazem parte do Page Experience, incluem:
- Largest Content Paint (LCP): mede o desempenho e a velocidade de carregamento da página.
- Input Delay (FID): avalia a interatividade da página.
- Cumulative Layout Shift (CLS): mede a estabilidade visual da página.
As Core Web Vitals foram desenvolvidas para ajudar os profissionais responsáveis por sites a entender como suas páginas são percebidas pelos usuários. É importante que os profissionais de SEO técnico dominem essas métricas, pois elas são fundamentais para garantir uma boa experiência para os usuários e para otimizar o ranqueamento de resultados de busca.
Entendendo a Importância das Core Web Vitals para a Experiência do Usuário
Há algum tempo, o Google tem investido em pesquisas sobre o comportamento do usuário na web com o objetivo de aperfeiçoar seu algoritmo e oferecer novas funcionalidades. Em uma dessas pesquisas, a empresa concluiu que é fundamental priorizar a experiência do usuário em sites, pois essa é a base para o sucesso a longo prazo de qualquer site na web.
Diante disso, as Core Web Vitals são uma medida tomada pelo Google para fornecer diretrizes unificadas sobre os principais indicadores de qualidade que afetam a experiência do usuário em páginas de um site.
Essas métricas têm como objetivo principal garantir a qualidade da experiência do usuário, ou seja, de você e de mim enquanto estamos lendo este texto. Elas ajudam o proprietário do site a garantir que as suas páginas estejam carregando corretamente, que os botões estejam funcionais e que a fonte esteja no tamanho ideal para leitura, entre outras coisas.
Por essa razão, desde 2020 os crawlers do Google têm considerado as métricas das Core Web Vitals ao avaliar sites, tornando-as fundamentais para quem trabalha com sites, especialmente em plataformas de e-commerce.
De acordo com pesquisas publicadas no Chromium Blog, atender aos limites das principais métricas da web pode diminuir em até 24% a chance de os usuários desistirem de carregar a página do site.
Compreendeu a Importância dessas Métricas Agora?
7 Ferramentas para Detectar Problemas de Core Web Vitals
Google Search Console
A ferramenta do Google Search Console, anteriormente conhecida como Webmaster Tools, é uma plataforma completa oferecida pelo Google que permite aos proprietários de sites acompanhar o rastreamento, indexação e classificação de seus sites nas pesquisas.
Por esse motivo, o Search Console dispõe de relatórios detalhados e atualizados constantemente pelo Google que ajudam a identificar problemas que prejudicam o desempenho de um site.
Você pode encontrar o relatório das Core Web Vitals na barra lateral esquerda da ferramenta, acessando “Experiência” e depois “Principais métricas da Web”. Em seguida, serão exibidos dois dashboards: um para dispositivos móveis e outro para computadores. Eles mostram o número de URLs que são inválidas, precisam de melhorias ou estão adequadas para a Web.
Os relatórios indicam o grau de gravidade do erro e qual é o problema. No exemplo da imagem abaixo, há um erro de LCP em dispositivos móveis
Depois de identificado o problema, podemos trabalhar na construção da solução. Quando tudo estiver testado e corrigido, o Search Console oferece a opção de validar o erro, onde podemos informar que a falha já foi corrigida.
Se esses problemas forem validados e estiverem certo, o erro deixará de existir.
Google PageSpeed Insights
O PageSpeed Insights é uma ferramenta gratuita criada pelo Google para webmasters. Ele verifica a velocidade de carregamento de um site, simulando acessos via computador e dispositivos móveis, com o objetivo de ajudar a construir sites de alta performance na web.
Web Vitals (extensão do Chrome)
A extensão Web Vitals é útil para quem deseja aumentar a agilidade, pois permite medir a performance de uma URL sem precisar abrir uma nova aba. O resultado é exibido diretamente na extensão.
Chrome User Experience Report (CrUX)
O Chrome UX Report (CrUX) é a fonte oficial de dados das Web Vitals (iniciativa que criou as Core Web Vitals). Através deste relatório, são coletados dados de vários navegadores Chrome em todo o mundo com base em determinados critérios.
Assim, são coletadas diversas métricas e dimensões que nos ajudam a compreender a experiência do usuário em nossos sites.
Os dados do relatório do CrUX são apresentados no Google Search Console e PageSpeed Insights. Diferentemente das outras ferramentas, não podemos realizar testes, pois se trata apenas de um banco de dados.
Lighthouse (extensão do Chrome)
O Lighthouse é uma ferramenta criada pelo Google que pode ser utilizada através de uma extensão do Chrome Dev Tools. Ela permite gerar um relatório de performance de qualquer página da Web baseado nas Core Web Vitals.
O relatório gerado pelo Lighthouse é semelhante ao do PageSpeed Insights. No entanto, a vantagem do Lighthouse é que ele é mais rápido de acessar, já que pode ser utilizado através de uma extensão do Chrome.
WebPageTest
O WebPageTest é uma ferramenta popular que permite medir as Core Web Vitals. Seu relatório é muito detalhado e fornece explicações claras dos problemas encontrados. As métricas observadas são as mesmas do PageSpeed Insights.
Biblioteca Javascript
As Core Web Vitals também podem ser medidas usando a Biblioteca Javascript, mas é necessário ter conhecimento avançado em programação para utilizar essa opção. Para obter mais informações, basta consultar a documentação completa disponível no Google Developers.
Veja como podemos corrigir os principais erros do Core Web Vitals
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) é uma métrica que mede o tempo que o maior elemento de conteúdo da página leva para ficar visível. Em outras palavras, ela indica quanto tempo leva para a página inteira carregar para o usuário.
Um bom LCP de uma página deve ser de, no máximo, 2,5 segundos. A Farfetch é um exemplo de empresa que obteve sucesso na otimização do LCP. Quando conseguiu reduzir a métrica em 100 ms, houve um aumento de 1,3% na taxa de conversão.
Veja agora alguns pontos de como corrigir os problemas de LCP:
- Minimize o tamanho dos arquivos CSS, JavaScript e imagens.
- Implemente o carregamento por demanda de conteúdo, ou seja, carregue os elementos de conteúdo apenas quando necessário.
- Utilize cache de navegador e servidor para diminuir o tempo de carregamento.
- Optimize a ordem de carregamento dos elementos da página.
- Minimize o uso de plugins e recursos externos que possam atrasar o carregamento da página.
First Input Delay (FID)
First Input Delay (FID) é uma métrica que mede o tempo entre a primeira interação do usuário com uma página (como clicar em um link ou realizar outra ação) e o momento em que o navegador processa e responde a essa interação.
Por isso, a FID é uma métrica muito focada na experiência do usuário, pois mede justamente o tempo de interação com a página.
Para ter uma boa pontuação na FID, é preciso atingir um tempo de 100 milissegundos ou menos. Imagine clicar em um botão de chamada para ação (CTA) e nada acontecer, ou demorar para abrir? Por isso, é importante que a resposta do navegador seja rápida e, quanto menos percebível pelo usuário, melhor.
Um detalhe importante sobre a FID é que ela mede o atraso no carregamento da interação e não o tempo total de carregamento da interação. Veja algumas dicas para corrigir os problemas mais comuns da FID:
- Minimize o tamanho dos arquivos JavaScript e minimize o uso de recursos externos.
- Utilize o carregamento por demanda de conteúdo, ou seja, carregue os elementos de conteúdo apenas quando necessário.
- Otimize a ordem de carregamento dos elementos da página.
- Utilize cache de navegador e servidor para diminuir o tempo de carregamento.
- Minimize o uso de plugins e recursos externos que possam atrasar o carregamento da página.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) é uma métrica que mede a estabilidade visual de uma página. É muito importante, pois indica e quantifica a frequência com que os usuários sofrem mudanças inesperadas no layout da página.
Manter a CLS abaixo de 0,1 segundos ajuda a garantir uma experiência agradável para o usuário na página.
Quando uma página é carregada, os elementos visuais normalmente só são processados depois dos recursos essenciais. É importante ter cuidado neste momento, pois adiar esses elementos pode causar alterações bruscas no layout da página.
Um exemplo de mudança brusca no layout é um botão que é empurrado para baixo ou um conteúdo que muda de posição repentinamente, como mostrado na imagem abaixo:
Para evitar que o usuário seja enganado pelas mudanças bruscas de layout, é importante reservar espaço previamente para os recursos adiados. Aqui estão algumas dicas para corrigir os problemas de CLS:
- Utilize as dimensões e as margens das imagens e outros elementos visuais para reservar o espaço que será ocupado quando os elementos forem carregados.
- Defina tamanhos de fontes e alturas de linhas para evitar que o layout da página mude repentinamente.
- Utilize os atributos HTML “loading” e “sizes” nas imagens para reservar espaço.
- Evite adicionar ou remover elementos da página enquanto ela está sendo carregada.
- Se precisar adicionar ou remover elementos da página, use as APIs do JavaScript “IntersectionObserver” e “MutationObserver” para evitar mudanças bruscas de layout.
Concluindo
As Core Web Vitals são as métricas mais populares no mundo do SEO e isso não é à toa. Elas são responsáveis pela qualidade da experiência do usuário e também são fatores importantes para o ranqueamento de páginas nos mecanismos de busca.
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.
Sites de referências para o conteúdo
Site Web.Dev
Relatório de Principais métricas da Web
As pessoas também perguntam
Quais as principais Metricas de web vitals?
Largest Contentful Paint (LCP): Mede o tempo que leva para o conteúdo principal da página ser carregado e exibido para o usuário. O objetivo é medir quão rapidamente a página está pronta para ser usada pelo usuário.
First Input Delay (FID): Mede a latência de interação do usuário, ou seja, o tempo que leva para que a página responda à primeira interação do usuário, como clicar em um botão. O objetivo é garantir que a página esteja sensível e interativa o mais rapidamente possível.
Cumulative Layout Shift (CLS): Mede a estabilidade visual de um site, ou seja, a quantidade de vezes que os elementos da página se movem depois de a página ter sido carregada. O objetivo é garantir que a página esteja estável e previsível para o usuário.
Essas três métricas são consideradas como importantes para a experiência do usuário, e o Google tem dito que vai considerá-las como fator de ranqueamento de SEO a partir de maio 2021. É importante medir e garantir que seu site atenda aos objetivos de desempenho dessas métricas para melhorar o ranqueamento do seu site nos resultados de pesquisa do Google, e ter uma boa experiência de usuário.
O que é LCP core web vitals?
LCP (Largest Contentful Paint) é uma métrica de desempenho de página que mede o tempo que leva para que o conteúdo principal da página seja carregado e exibido para o usuário. O conteúdo principal pode ser texto, imagens, vídeos, etc. O objetivo é medir quão rapidamente a página está pronta para ser usada pelo usuário.
Qual é o significado de CLS?
Cumulative Layout Shift (CLS) é uma métrica de desempenho de página que mede a estabilidade visual de um site. Ela mede a quantidade de vezes que os elementos da página se movem depois de a página ter sido carregada, causando deslocamentos na tela para os usuários.
O objetivo do CLS é medir a qualidade de experiência do usuário, uma vez que movimentos inesperados na tela podem ser perturbadores e difíceis de seguir. Ele é considerado como um dos Core Web Vitals, o conjunto de métricas de desempenho que o Google considera importantes para a experiência do usuário. O objetivo do desempenho desejado para o CLS é 0,1 ou menos.
Como melhorar o LCP?
Existem várias maneiras de melhorar a LCP de um site, incluindo:
- Otimização de imagens: Reduzir o tamanho das imagens pode ajudar a diminuir o tempo de carregamento da página.
- Minimizar o uso de recursos de terceiros: Plugins e scripts de terceiros podem adicionar vários segundos ao tempo de carregamento da página.
- Utilizar um Content Delivery Network (CDN): Um CDN ajuda a reduzir a distância física entre o usuário e os recursos de uma página, aumentando assim a velocidade de carregamento.
- Melhorar a velocidade de processamento: Utilizando técnicas de otimização de código, você pode reduzir a quantidade de tempo que seu navegador leva para processar e renderizar a página.
Por que a LCP é importante?
A LCP é importante porque é uma das principais formas de medir a velocidade de carregamento de uma página e a satisfação do usuário. Um tempo de carregamento lento pode levar a uma taxa de rejeição mais alta, o que significa que os usuários estão saindo da página antes de ela carregar completamente. Isso pode afetar negativamente o tráfego, as conversões e as receitas de um site.
Quais são os objetivos de desempenho para a LCP?
De acordo com o Google, o objetivo de desempenho para a Largest Contentful Paint (LCP) é que ela ocorra dentro de 2,5 segundos para 75% das páginas carregadas. Isso significa que, para a maioria das páginas, o conteúdo principal deve ser carregado e exibido dentro de 2,5 segundos.
Essa é a meta que o google recomenda para garantir uma boa experiência do usuário, uma vez que um tempo de carregamento mais rápido geralmente resulta em menos abandono de página e uma maior satisfação do usuário.
É importante lembrar que é uma métrica que é medida em relação ao carregamento da página, então ainda que você tenha um tempo de carregamento rápido, se o conteúdo importante da página demorar muito para ser carregado, sua LCP será afetada. Por isso é importante trabalhar em ambos os aspectos, tanto o tempo de carregamento geral quanto as otimizações específicas para o conteúdo principal da página.
Como o Core Web Vitals afeta o SEO?
O Google tem dito que o Core Web Vitals serão levados em consideração como fator de ranqueamento de SEO a partir de maio 2021. Isso significa que sites com boas pontuações Core Web Vitals podem ter vantagem em relação a sites com pontuações ruins nessas métricas. Portanto, é importante garantir que seu site atenda aos objetivos de desempenho do Core Web Vitals para melhorar o ranqueamento do seu site nos resultados de pesquisa do Google.
