Olá, Kangaroozinho, como vai? Se você ainda não conhece as métricas Core Web Vitals, neste artigo nós vamos te falar sobre elas, como funcionam, o que metrificam, e como elas impactam no seu site, principalmente quando se trata da experiência do usuário final.

É importante dizer que, embora essas métricas indiquem diretamente o desempenho do seu site, o impacto do servidor sobre elas é menor do que a construção e estrutura do seu site em si. Isso significa que, mesmo que o seu servidor tenha um desempenho extremo, a construção do seu site ainda é a parte mais importante caso você esteja buscando por melhores resultados com as Core Web Vitals.

Quais são as métricas Core Web Vitals

Para não restar dúvidas sobre quais métricas fazem parte das Core Web Vitals, elas são 3 no total, sendo elas às: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) e CLS (Cumulative Layout Shift). É importante citar essas métricas pois, em testes de PageSpeed, várias outras métricas são avaliadas.

Para testes de PageSpeed, as ferramentas mais conhecidas e utilizadas são as PageSpeed Insights e GTMetrix, e para o GTMetrix, eles mudam um pouco o conceito das Core Web Vitals, visto que eles não consideram a métrica INP, e no lugar dela eles usam a métrica TBT (Total Blocking Time), eles consideram uma alternativa plausível, e que não deve prejudicar os testes.

Certo, mas o que cada uma metrifica no seu site? Abaixo falamos um pouco mais sobre cada uma delas:

• Largest Contentful Paint (LCP): A LCP serve para avaliar o tempo que a maior imagem (ou maior objeto visível da página) leva para carregar para o usuário que está acessando o seu site, ou seja, avalia quanto tempo leva para o maior elemento da página ser carregado completamente.
  
  A métrica é calculada a partir do momento que a página começa a carregar, até o momento em que o maior elemento está 100% carregado. Pode ser melhorado ao otimizar as imagens, vídeos, ou o elemento identificado como o maior da página do seu site.
• Interaction to Next Paint (INP): O INP avalia o tempo de resposta geral de uma página em relação às interações do usuário. Então, ela avalia quanto tempo a página, botão, etc, leva para responder a partir do clique ou interação do usuário.
• Cumulative Layout Shift (CLS): O CLS irá avaliar as mudanças INESPERADAS que possam ocorrer na visualização ou ação do usuário no seu site.
  
  Exemplo: Caso existam dois botões na tela, um para “continuar” e outro para “sair”, o usuário ao tentar clicar no botão de “sair”, pode aparecer uma mensagem de “tem certeza”, e isso acaba jogando o botão de “continuar” para baixo, isso pode ocasionar em uma nota ruim na avaliação do CLS.

Se se você geralmente usa o GTMetrix, deixamos abaixo também especificamente a métrica usada por eles (TBT) para substituir o INP:

• Total Blocking Time (TBT): O TBT mede o tempo em que a página está “bloqueada”, em outras palavras, o tempo em que o usuário não consegue interagir com os botões ou elementos do seu site.
  
  Ele engloba outras duas métricas que vamos ver mais pra frente, a First Paint e a Time to Interactive, que em resumo, é a primeira renderização na página (First Paint) até o momento em que algum elemento interativo surge na tela (Time to Interactive).

Testes na prática:

Realizamos alguns testes para demonstrar na prática como as métricas Core Web Vitals atuam, onde é possível ter uma ideia, e inclusive exemplificar como o desempenho bruto não significa que às métricas estão sendo atingidas. Em nossos testes, usamos a ferramenta PageSpeed Insights.

Em nosso primeiro teste, analisamos um site que, embora tenha um resultado excelente de desempenho, SEO e boas práticas, ele ainda acabou sendo reprovado nas Core Web Vitals:

Nesse exemplo, podemos ver que a única métrica em que o site foi aprovado foi no CLS, as demais (LCP e INP) precisam de uma atenção do desenvolvedor da aplicação, visto que a LCP está com um desempenho abaixo do ideal, e a INP sequer pôde ser avaliada, por algum motivo.

Agora, segue um exemplo onde as Core Web Vitals foram aprovadas, mesmo em um site que não apresenta resultados tão bons como o anterior, quando falamos de desempenho:

Como pode ver, mesmo com uma nota de desempenho de 74, ainda assim as métricas Web Vitals foram todas aprovadas, e até com certa margem, sendo um resultado, que, se for o seu foco, seria totalmente satisfatório.

Conclusão

Para concluir, é muito importante que você entenda algumas coisas, a primeira e principal é que buscar resultados focados em específico nessas métricas pode não ser o ideal. Dizemos isso pois, embora essas métricas ajudem no SEO e ranqueamento do seu site, se você usar sites bem ranqueados no Google nesses testes, você encontrará vários que são reprovados, mas mesmo assim são bem ranqueados.

Por isso, caso queira utilizar as ferramentas de PageSpeed para validar e encontrar pontos onde seu site pode melhorar, é extremamente válido, mas pode não ser o melhor ficar centrado nessas métricas buscando apenas e somente notas melhores. A melhor métrica que você pode ter é o feedback real dos usuários que estão acessando o seu site, e os seus testes de navegação.

E é isso, Kangaroozinho, vamos ficando por aqui. Esperamos que você tenha gostado deste artigo, se gostou, não deixe de dar uma olhada em outras publicações aqui em nosso blog. Abraços =)