Core Web Vitals - O que são e como melhorá-los?

O Google introduziu um novo programa em 2020, chamado Web Vitals. Isso se refere a uma técnica que oferece orientação sobre sinais de qualidade. Segundo o Google, essas métricas são cruciais para a entrega de uma excelente experiência do usuário na web. Em maio de 2021, o Google começou a usar o Core Web Vitals como métrica para classificação de pesquisa em sua plataforma.

O que são os Principais Web Vitais?

Core Web Vitals são métricas para medir a experiência do usuário em um site. Eles medem a rapidez com que os usuários podem interagir com um site e quais resultados eles obtêm com base em sua pesquisa. Os Core Web Vitals funcionam como sinais que avaliam o quão fácil e transparente é para os visitantes do site navegar por um site.

Quando você melhora seu site e a experiência do usuário, sua experiência na página terá uma pontuação mais alta usando as métricas do Core Web Vitals. O Google identifica três métricas do Core Web Vitals que os proprietários de sites devem conhecer e incorporar. Estes são enumerados abaixo:

Carregamento: Também conhecido como maior pintura de conteúdo (LCP), o carregamento mede a velocidade com que os maiores elementos são carregados e exibidos em um site. Esses elementos incluem animações, vídeos, textos, imagens e outros.

Interatividade: o Google chama isso de Mudança de layout cumulativa (CLS) e garante que as páginas de um site não tenham recursos inesperados ou movimentos confusos que possam distrair ou incomodar os usuários ao consumir o conteúdo do seu site.

Estabilidade Visual: Isso é tecnicamente chamado de Atraso na Primeira Entrada (FID) e reflete o nível de capacidade de resposta das páginas de um site quando os visitantes do site interagem com elas pela primeira vez. O FID também mede a velocidade com que um navegador pode gerar resultados para os usuários do seu site.

Como melhorar o Core Web Vitals em seu site

A primeira coisa a fazer é executar uma análise rápida de desempenho do site para ver como seu site se sai nas principais métricas de vitals da web. Você pode usar diferentes ferramentas para essa análise, incluindo Google Search Console e Page Speed ​​Insights, entre outras. Depois de executar a análise, você pode descobrir que precisa implementar algumas das dicas a seguir para ajudá-lo a melhorar seu site.

• Reduzir a execução de JavaScript

Uma classificação FID ruim significa que a página do seu site interage com os visitantes por mais de 300 milissegundos. Quando você reduz e otimiza sua execução de JavaScript, reduz o período de tempo entre quando seu navegador executa códigos JavaScript. O resultado disso é um prazo de execução reduzido. O Google recomenda adiar o JavaScript não utilizado para reduzir a execução. Para saber se seu site possui algum JS não utilizado, siga os passos abaixo:

• Vá para o seu site e clique com o botão direito do mouse em qualquer lado e selecione “Inspecionar”

• Clique na aba “Fontes” e marque os três pontos na parte inferior. Adicione uma ferramenta de “Cobertura” e clique na função de carregamento. Aguarde a conclusão do carregamento e você poderá ver o volume de JS não utilizado em sua página.

Com esse conhecimento, você pode começar a reduzir a execução de JS. Uma maneira de reduzir a execução é usar a divisão de código. Como é que isso funciona? Divida o pacote JavaScript em bits menores. JS empacotados são arquivos combinados que são empacotados para evitar muitas solicitações HTTP necessárias para carregar uma página da web.

Compactar e otimizar imagens

Para muitos sites, as imagens são os maiores elementos em suas páginas. Para garantir que seu site passe nas métricas de carregamento, considere otimizar as imagens em seu site. Com isso, sua página da web fica mais leve e a velocidade de carregamento aumentará significativamente.

Uma página mais leve também melhorará a experiência do usuário, a pontuação do LCP e as classificações nos resultados dos mecanismos de pesquisa. Para reduzir o tamanho da página, comprima as imagens usando uma ferramenta como o Tiny JPG. Reduzir o tamanho geral da sua página não afetará a resolução e a qualidade, mas melhorará os resultados do LCP do seu site.

Recomendamos que você use o formato PNG para gráficos e JPG para imagens de paisagem. Além de compactar imagens, você também pode ativar a CDN (Content Delivery Network) para as imagens do seu site.

Content Delivery Network é um grupo de servidores em todo o mundo que armazena conteúdo da web. Esses servidores são distribuídos em diferentes locais; as imagens podem ser entregues do servidor mais próximo do usuário de maneira mais rápida.

Implementar carregamento lento

A implementação do carregamento lento é muito crucial ao exibir imagens em seu site. Quando você usa essa técnica, sua pontuação principal do Web vitals e a experiência do usuário em seu site não serão afetadas negativamente. Então, o que é carregamento lento? O carregamento lento permite que seu site carregue imagens no mesmo momento em que um usuário rola a página para baixo. Isso garante que a velocidade de carregamento do seu site não seja comprometida e que você possa alcançar um nível de pontuação LCP superior. Há muitos benefícios associados ao carregamento lento. Eles incluem:

• Melhor desempenho do site

• Restrição de uso de largura de banda

• SEO aprimorado no site

• Reter os visitantes do site e minimizar a taxa de rejeição

Se você opera um site com páginas que contêm muitos vídeos, animações, imagens e outros elementos pesados, é importante usar o carregamento lento. Depois de implementar esta dica, você pode comparar sua pontuação LCP anterior com a nova obtida após implementar o carregamento lento.

Use dimensões apropriadas para incorporações e imagens

A pontuação CLS superior a 0,1 é considerada ruim. Os principais culpados por uma pontuação tão baixa são elementos pesados, como incorporações, anúncios e imagens sem dimensão. Para melhorar a pontuação CLS do seu site, preste atenção às dimensões. Quando você usa largura e altura precisas para imagens e incorporações, fica mais fácil para o navegador alocar o volume certo de espaço na página durante o processo de carregamento. Certifique-se de definir as dimensões adequadas para imagens e incorporações ao inserir vídeos do YouTube em seu site. Veja como redimensionar vídeos do YouTube para exibir em seu site.

• Vá ao YouTube e abra o vídeo que deseja incorporar em seu site.

• Procure o botão de compartilhamento e selecione a opção <> Incorporar.

• Você verá todos os detalhes sobre o vídeo, incluindo a dimensão. Copie o código e cole-o no back-end do seu site. Isso irá alterá-lo para a largura e altura corretas para caber em seu site corretamente.

Pensamentos finais

Estas são as principais dicas que você pode usar para melhorar os principais elementos vitais da web em seu site. Neste post, analisamos os conceitos básicos dos principais elementos vitais da web e dicas que você pode empregar para melhorar suas pontuações. Pontuações aprimoradas significam que seus rankings aumentarão nos resultados de pesquisa e haverá uma taxa significativa na taxa de rejeição em seu site.