Tudo que você precisa saber sobre as Core Web Vitals do Google

O sistema de busca do Google leva em consideração diversas características do site para posicionar os resultados, sendo que esses critérios compõem o seu famoso algoritmo de busca e indexação. Ao contrário do que muitos pensam, esse algoritmo não é estático, recebendo atualizações com a finalidade de melhorar a experiência do usuário. Uma dessas recentes atualizações trouxeram novos parâmetros para a avaliação da experiência da página, as Core Web Vitals.

O que são Core Web Vitals?

As Core Web Vitals é um conjunto de parâmetros que foi incluído no algoritmo de ranqueamento do Google para promover uma melhoria da experiência do usuário ao sair do buscador e entrar na página indicada. Os novos parâmetros trazem a preocupação com a velocidade do carregamento, com a interatividade e com a estabilidade visual. 

Largest Contentful Paint (LCP)

Essa métrica das Core Web Vitals está relacionada com a velocidade de carregamento percebido da página, que mede o tempo que demora para que o maior conteúdo da página seja exibido e conta apenas a primeira dobra, ou seja, a parte da página que é vista sem utilizar o scrolling do site. 

Segundo o site web.dev, um bom LCP é igual ou abaixo de 2,5 segundos. A faixa de 2,5s até 4s de resposta é considerada mediana, e um resultado acima de 4s para o carregamento é um resultado ruim, que precisa ser modificado.

Esse parâmetro considera como conteúdo a ser carregado os seguintes itens: imagens, tags de imagens, capa dos vídeos, imagens de fundo e elementos textuais de forma geral.

First Input Delay (FID)

Essa outra métrica das Core Web Vitals mede interatividade do usuário com a página, especificamente o tempo de responsividade entre o momento que o usuário interage com a página e o início do processamento da ação. 

A pesquisa do web.dev indica que esse redirecionamento deve ser em até 100 milissegundos para que a interatividade do site seja considerada boa. Vale ressaltar que essa métrica considera o tempo para que a ação comece a ocorrer e não o tempo para que ela seja completa, ou seja, não quer dizer que a nova página precisa estar completamente carregada em 100 milissegundos e, por isso, é uma métrica complementar ao LCP.

Cumulative Layout Shift (CLS)

A última métrica das Core Web Vitals avalia a estabilidade visual de uma página, ou seja, se ocorre mudanças inesperadas no layout durante o uso. 

Talvez você já tenha vivido a experiência de estar em um site consumindo algum conteúdo e sem realizar nenhum clique, a tela se mexeu e o conteúdo que você estava vendo desapareceu da sua tela. Essas mudanças bruscas não deveriam ocorrer e definitivamente atrapalham a experiência do usuário, por isso a estabilidade visual é tão importante.

A CLS mede a frequência que a mudança de layout ocorre de maneira inesperada durante toda a existência da página. O artigo da web.dev pontua que o valor dessa Core Web Vitals precisa ser inferior a 0,1 para A CLS mede a frequência que a mudança de layout ocorre de maneira inesperada durante toda a existência da página. O artigo da web.dev pontua que o valor dessa Core Web Vitals precisa ser inferior a 0,1 para permitir que o usuário tenha uma experiência positiva.

Como medir as Core Web Vitals?

Não basta saber o que são Core Web Vitals, é preciso utilizar as diversas ferramentas disponíveis para entender se o seu site está dentro da faixa considerada boa para cada um dos parâmetros.

PageSpeed Insights

O PageSpeed Insights é uma ferramenta do próprio Google que irá trazer os resultados de cada um dos parâmetros da Core Web Vitals, além de outras informações a respeito do desempenho do site. O scan da página traz os resultados por parâmetro, sendo atribuída ainda uma pontuação geral considerando o conjunto dos resultados.

Outro aspecto interessante é que no próprio diagnóstico, a ferramenta já indica alguns pontos que podem ser melhorados.

AMP Page Experience Guide

Caso o seu site mobile seja construído em AMP (uma estrutura específica de HTML voltada para acelerar o carregamento em dispositivos móveis), você precisará utilizar o AMP Page Experience Guide como ferramenta para avaliar as Core Web Vitals e identificar os potenciais de melhoria.

PageExperience Report

O PageExperience Report também é uma ferramenta do Google, mas totalmente voltada para as versões mobile dos sites. Esse relatório traz resultados de todas as métricas de experiência da página consideradas pelo Google em seu algoritmo, sendo uma ferramenta bem completa para entender o desempenho da versão mobile.

Como melhorar as Core Web Vitals do seu site?

Largest Contentful Paint (LCP)

O LCP é uma métrica diretamente afetada pelo tempo de resposta entre site e servidor. Para melhorar essa Core Web Vitals, você pode:

• Otimizar o seu servidor avaliando quais as tarefas executadas, além de retirar ou modificar as que são mais dispendiosas;
• Utilizar uma rede de distribuição de conteúdo (CDN) que possibilita o aumento da velocidade de entrega;
• Manter um salvamento de cache para evitar que seja necessário o carregamento do zero a cada vez de iniciada a página;
• Otimizar o CSS do seu site;
• Otimizar a imagem;
• Armazenar um pré-carregamento de recursos JavaScript e CSS.

First Input Delay (FID)

Assim como no LCP, o FID pode ser melhorado ao armazenar um pré-carregamento dos componentes do JavaScript e CSS, o que acelera a resposta. Outro aspecto é analisar o código JavaScript da página para saber quais os componentes que estão sendo utilizados, uma vez que algumas tarefas criadas no início do desenvolvimento do site podem ter perdido a sua necessidade ao longo do tempo. 

Na linguagem JavaScript, cada passo é executado após o anterior. Caso existam tarefas que possam ser dissociadas e executadas concomitantemente, vale a pena dividi-las em códigos diferentes para acelerar a interatividade da página.

Cumulative Layout Shift (CLS)

A mudança do layout durante o uso normalmente é causada por um componente, como uma imagem ou um botão, que é carregado depois do carregamento do texto, o que pode causar o deslocamento de partes da página. Para evitar que isso ocorra é importante deixar um espaço definido de altura e largura para esses componentes.

Ao deixar um espaço pré-definido, o componente irá aparecer na tela, sem modificar os outros elementos. Essa é uma mudança esperada, não entrando na contagem do CLS.

Por que a experiência da página é importante?

Durante a sua existência, o Google tem demonstrado em diversos momentos o comprometimento com a melhoria constante da experiência do usuário. Mas, por quê?

Vamos pensar como usuários: Quando se está navegando na internet, pode ser que encontremos diversos conteúdos relevantes para aquela dúvida e que podem ser até muito parecidos. Já em um site, a página demora muito para carregar, as imagens não aparecem, você clica em um link, sendo redirecionado para uma página dizendo que aquele conteúdo não existe mais. Já em um segundo site, logo que você entra já consegue consumir o conteúdo, as imagens estão todas aparecendo sem precisar esperar. Qual desses sites você gostaria de ter encontrado ao procurar no Google? 

Agora pense do lado de um fornecedor de serviço. Você quer mostrar para os seus clientes uma solução que entrega uma experiência ruim ou proporcionar a melhor solução combinada com a melhor experiência?

É exatamente isso que o Google vem fazendo, criando meios de colocar a experiência como parte importante do serviço de busca que entrega e deixando o usuário mais feliz em usar a ferramenta justamente por causa disso. 

As Core Web Vitals não são a primeira iniciativa pensando nisso, somente a mais recente. No passado já foram incluídos no algoritmo mudanças para que a página seja otimizada para o celular, o escaneamento para links suspeitos, a consideração a respeito de protocolos de segurança e da quantidade de pop-ups no site. É esperado que as próximas atualizações também tragam mecanismos para tornar a experiência da página cada vez melhor.

Gostou do conteúdo? Em caso afirmativo, compartilhe com outras pessoas em suas redes sociais dando o devido crédito. Ficou com alguma dúvida? Envie para a gente nos comentários. Até a próxima!