Os Core Web Vitals do Google são métricas de experiência que medem o desempenho de um site e a qualidade da experiência do usuário que ele oferece. Em junho de 2021, o Google lançou uma melhoria em suas métricas de experiência do usuário chamada Core Web Vitals, que se concentra na velocidade de carregamento, interatividade e estabilidade visual. Esses principais sinais vitais da Web são: Cumulative Layout Shift (CLS), First Input Delay (FID), Largest Contentful Paint (LCP), Interaction To Next Paint (INP) e Time to First Byte (TTFB).
Os Core Web Vitals são importantes por serem um conjunto comum de métricas e benchmarks usados em vários serviços do Google, com impacto direto nos rankings de busca. Ao medir e otimizar o seu site para o Core Web Vitals, você também melhora a experiência geral do usuário no site.
O CLS mede a estabilidade visual do conteúdo na página. Para isso, ele soma a pontuação de cada deslocamento de layout em cada deslocamento de layout inesperado que ocorre durante a vida útil da página. O deslocamento de layout acontece quando um elemento sai da posição inicial devido a recursos carregando mais tarde no ciclo de vida da página e empurrando o conteúdo abaixo dela. Por exemplo: durante uma compra on-line, assim que o usuário tenta clicar no botão "Adicionar ao carrinho", um anúncio aparece acima do botão e empurra o carrinho para baixo. Com esse deslocamento de layout, o usuário clica sem querer no anúncio, em vez do botão "Adicionar ao carrinho". Um baixo CLS garante ao usuário uma experiência positiva no site, de forma que ele realize rapidamente o que pretende fazer.
O FID mede o atraso na interatividade e na capacidade de resposta. O momento vai desde que o usuário, para interagir com seu conteúdo, clica em um link, toca em um botão ou pressiona uma tecla até quando o navegador processa essa interação. O FID conta apenas o atraso, não o tempo necessário para processar o evento ou quanto tempo a IU leva para atualizar. O atraso acontece geralmente porque o navegador está ocupado carregando o restante do conteúdo da página e ainda não pode responder à interação do usuário. Um FID curto aumenta a chance de o usuário permanecer na página e interagir com o conteúdo. No momento, a maioria dos sites tem bom desempenho na medição do FID.
Nota
O zoom e rolagem não são medidos quanto ao FID.
O LCP mede o tempo necessário para que o maior elemento visível da página seja carregado em relação ao momento em que a página começou a carregar pela primeira vez. À medida que diferentes elementos carregam, o LCP pode mudar. O navegador para de medir o LCP quando o usuário começa a interagir com a página, já que as interações geralmente mudam o que fica visível ao usuário. O carregamento rápido mostra ao usuário que a página é útil, pois o conteúdo aparece rapidamente para ele.
Elementos que podem ser o LCP:
-
<img>
-
<imagem> dentro de um <svg>
-
<video>
-
Elemento com imagem de fundo carregada usando a função
url()
em vez de um gradiente CSS -
Elementos de bloco que contêm nós de texto ou outros elementos-filhos de texto embutido
Nota
À medida que o Google expande seus Core Web Vitals, eles indicaram que <svg> e <video> podem ser incluídos como elementos usados para medir o LCP no futuro.
A INP se refere a como a página responde às interações específicas do usuário que são programadas nas métricas gerais da INP medidas pelos dados de laboratório e de campo do Google Chrome. A INP oferece uma representação do atraso geral da interação de uma página; para isso, ela trabalha com uma amostra das interações mais longas quando um usuário visita a página. Por exemplo: se uma página tiver menos de 50 interações no total, a INP leva em consideração a interação com o pior atraso absoluto. A medição da INP é uma representação do tempo que o usuário precisa esperar para interagir com a página inteira - o oposto do FID (Atraso da primeira entrada).
A INP aborda os seguintes tipos de interações:
-
Qualquer clique do mouse de um elemento interativo.
-
Qualquer toque em um elemento interativo em qualquer aparelho que tenha tela sensível ao toque.
-
O pressionar de uma tecla no teclado físico ou na tela.
Segundo a documentação web.dev do Google, uma INP com bom valor vai até 200 milissegundos.
Nota
O INP substituiu o FID em março de 2024. Se você receber um aviso do Google informando que seu site tem problemas de INP, revise-o para garantir que ele esteja seguindo as melhores práticas atuais (para obter informações detalhadas sobre as melhores práticas, consulte as melhores práticas do Core Web Vitals).
Ao medir o Core Web Vitals, você pode usar dados de laboratório ou de campo. Os dados do laboratório são coletados no site tool que simula o carregamento e a interação de uma página. Os dados de campo são coletados a partir da interação real do usuário com seu site. É recomendável usar métricas do mundo real, como monitoramento real de usuários (RUM), em vez de testes de laboratório, para que você possa otimizar seu site com mais precisão. O conjunto de dados CruX do Google pode ser usado para medir seu site e é uma ótima opção porque é o que o Google usa para medir os Core Web Vitals.
Tanto o CLS e o LCP podem ser medidos no laboratório ou no campo. O FID só pode ser medido no campo, pois é necessário um usuário real interagindo com o conteúdo. Recomendamos testar todas as páginas do seu site.
As seguintes ferramentas podem ser utilizadas para medir os Core Web Vitals:
Campo tool:
-
Relatório de experiência do usuário do Chrome (recomendado)
-
PageSpeed Insights (somente se houver dados CRuX suficientes; se não houver, este é um laboratório tool)
Laboratório tool:
Nota
O WebPage Test do Google tool não é mais uma recomendação do setor tool.
Para saber mais sobre as diferenças entre o Lighthouse e o Core Web Vitals, consulte Comparação entre o Lighthouse e o Core Web Vitals.
Para que uma página do site seja aprovada, ela precisa atingir 75% em todas as seguintes métricas:
-
CLS. até 0,1 na pontuação de deslocamento de layout
-
FID. até 0,1 segundo
-
LCP. até 2,5 segundos
Atualmente, apenas 20% dos sites passam pelas três métricas. Para saber como otimizar seu site, consulte as melhores práticas do Core Web Vitals.