solicite uma proposta
Blog

Core Web Vitals: veja este guia com tudo sobre o tema!

Já ouviu falar sobre Core Web Vitals ou da importância que o Google dá para a implementação de técnicas que melhoram a experiência do usuário? Caso ainda não tenha estudado o assunto, chegou ao conteúdo certo!

Segundo um estudo realizado pela RubyGarage, 75% dos usuários julgam um site pela aparência e boa usabilidade. Ainda nesse estudo foi constatado que 38% dos internautas saem de um site se ele não tiver uma estética ou layout atraente.

Neste guia vamos abordar sobre o que é Core Web Vitals, quais são as métricas que o mecanismo de busca leva em consideração e como mensurar essas métricas, além de outros indicadores que podem ajudar a melhorar a experiência do usuário em um site.

Acompanhe a leitura!

O que é o Core Web Vitals?

Core Web Vital é o nome do conjunto de métricas criadas pelo Google para metrificar a experiência do usuário em um site. A tríade de mensuração serve para avaliar a velocidade, interatividade e estabilidade visual de uma página, e é composta pelas seguintes métricas:

  • LCP: Largest Contentful Paint 
  • FID: First Input Delay
  • CLS: Cumulative Layout Shift

O principal objetivo do Core Web Vitals é facilitar a mensuração da usabilidade do site, que faz toda a diferença na hora do usuário criar uma relação saudável com uma marca, estruturando, então, uma imagem positiva frente aos possíveis clientes.

Mas você deve estar se perguntando quando a experiência do usuário passou a ser tão importante, né? Veja a resposta abaixo.

No início de maio de 2020, o Google anunciou que estava desenvolvendo essas métricas, a fim de ajudar e orientar os proprietários e profissionais de marketing em como criar e otimizar as suas páginas e, assim, oferecer as melhores experiências possíveis para seus visitantes.

Antes disso, existiam várias ferramentas que davam scores para os websites, mas as informações não eram centralizadas e “uniformes”, então o Google resolveu criar o Core Web Vitals justamente para unificar as orientações qualitativas de uma página. 

Já no final de maio de 2020, o famoso mecanismo de busca anunciou que o Core Web Vitals ia ser incorporado ao algoritmo do Google, sendo que a implementação chegaria em junho de 2021.

As métricas dessa atualização são fatores de ranqueamentos, por isso, sua empresa deve cuidar delas e sempre oferecer a melhor experiência possível para seus clientes em potencial, a fim de que seu site obtenha um bom desempenho nas SERPs.

Com uma equipe especializada, essas métricas de velocidade de carregamento, interatividade e estabilidade visual também podem ser otimizadas e bem trabalhadas com estratégias de UX (User Experience), UI (User Interface) e SEO (Search Engine Optimization).

A seguir, explicaremos mais detalhadamente o que cada uma dessas métricas significam e a relevância delas para que um website tenha sempre os melhores resultados. Confira!

As 3 principais métricas do Google

Como abordamos anteriormente, existe uma tríade de métricas criadas pelo Google para ajudar na avaliação de Core Web Vitals de uma determinada página. Agora é o momento de desmembrarmos as principais métricas da web e entendermos o que cada uma significa. 

1. Velocidade de carregamento (LCP)

A primeira métrica do Core Web Vitals é a LCP, que analisa a experiência que os usuários têm com a velocidade de carregamento da página. Ou seja, trata-se da percepção do tempo de carregamento das páginas calculando o tempo de início do carregamento da página até a renderização do seu elemento mais pesado.

Os elementos que são considerados no cálculo dessa métrica são:

  • <img>
  • <image> dentro de um elemento <svg>
  • <video>
  • elemento com imagem de background, carregado via função URL()
  • elementos block-level contendo textos

O tempo ideal de carregamento é de menos de 2,5 segundos. Para que a página seja considerada com um desempenho em LCP razoável, ela precisa estar entre 2,5 e 4 segundos. Podemos considerar como carregamento lento uma página que possui um LCP maior do que 4 segundos, nesse cenário, esse site precisará de várias melhorias, pois é um indicador de que o site pode estar perdendo diversos visitantes. 

Além da avaliação desses elementos para desempenho em desktop, o Google também vai avaliar essa métrica no mobile, já que, hoje, com a disseminação do uso de smartphones, existe a certeza de que os sites precisam ser pensados para mobile first.

Como melhorar o LCP do seu site?

Os principais fatores que podem impactar negativamente o seu LCP, são:

  • Servidor com tempo de resposta lento.
  • Bloqueio de renderização por Javascript e CSS.
  • Carregamento lento dos recursos da página.
  • Renderização do lado do cliente.

Algumas implementações que podem ajudar a melhorar essa métrica são:

  • Direcionar seus usuários para um CDN próximo.
  • Ativar cachê.
  • Otimizar seu servidor, a fim de otimizar o tempo de resposta.
  • Usar Service Worker para páginas HTML “cache-first”.
  • Antecipar conexões de terceiros.
  • Remover todos os caracteres desnecessários do código-fonte (minificar) e adiar JavaScript e CSS que não são críticos para a página.
  • Usar Signed Exchanged (SXG), que são um mecanismo de entrega que permite experiências bem mais rápidas para os usuários ao fornecer conteúdos num formato facilmente armazenável em cachê.

Para conferir o cenário atual quanto a essa métrica de carregamento, bem como algumas sugestões de otimização para as páginas do seu website, use a ferramenta do Google, PageSpeed Insights

2. Interatividade (FID)

A segunda métrica do Core Web Vitals é a FID (First Input Delay) e ela mede a interatividade dos usuários com a página, ou seja, é o cálculo do tempo que leva entre a primeira interação do usuário até o instante em que o navegador começa a processar os eventos de resposta. 

Vale destacar que o FID calcula apenas o delay causado entre a interação do visitante e o início do carregamento daquela determinada página e não o carregamento da página em si.

Para essa métrica, o referencial é que um site otimizado para Core Web Vitals leva até 100 milissegundos para fazer esse “caminho”. Se o site ficar entre 100 e 300 milissegundos, saiba que esse tempo é considerado razoável. Mas se ele tiver um FID acima de 300 milissegundos, é tido como um site que necessita de melhorias urgentes.

Para esse último cenário, existem algumas formas de melhorar a velocidade de carregamento das páginas:

  • Divida tarefas longas, que são aqueles períodos de execução de JavaScript, no qual os visitantes podem perceber que a interface do site não responde, em tarefas assíncronas menores.
  • Otimize sua página para a prontidão de interação (interaction readiness).
  • Use um web worker, pois ele possibilita a execução de JavaScript numa thread em segundo plano. Isso é fundamental, pois uma thread principal bloqueada é uma das principais causas do atraso de entrada.
  • Reduza o tempo de execução do JavaScript, limitando a quantidade de JavaScript em sua página.

3. Estabilidade visual (CLS)

Por fim, a última métrica do Core Web Vitals é o CLS (Cumulative Layout Shift), que calcula as mudanças que ocorreram nas páginas depois do carregamento, afetando negativamente a experiência do usuário. 

O CLS é uma métrica totalmente centrada no usuário, já que, quando está alta, gera muita frustração nos visitantes. Para esse cálculo, o navegador utiliza como base o tamanho da janela de visualização e a movimentação dos elementos contidos na página.

Quando o CLS está abaixo de 0,1, ele é considerado muito bom. Já quando está entre 0,1 e 0,25, podemos considerá-lo razoável, que ainda pede melhorias. E quando o CLS está acima de 0,25, é considerado ruim, precisando de otimizações urgentes.

Como mensurar todas essas métricas? 

Agora que você já conhece cada uma das métricas do Core Web Vitals e sabe como é importante mantê-las saudáveis, que tal aprender a mensurá-las? Conheça, a seguir, 7 ferramentas que podem ajudar a sua equipe nessa missão!

1. Lighthouse

A primeira ferramenta da nossa lista é o Google Lighthouse, que ajuda a medir a qualidade das páginas do seu site. Ele audita o desempenho, a acessibilidade e a otimização do mecanismo de pesquisa de qualquer página web, sendo ela pública ou que exija autenticação. Essa plataforma é automatizada e ajuda os desenvolvedores a diagnosticar possíveis problemas e a identificar oportunidades de melhorias de UX. 

O Lighthouse pode ser executado de duas maneiras: como extensão do Google Chrome ou como ferramenta de linha de comando. A extensão acaba oferecendo uma interface mais fácil de usar para leitura e produção de relatórios. Já a segunda opção permite que você integre o Lighthouse a sistemas de integração contínua.

2. Page Speed Insights

O PageSpeed Insights (PSI) já foi até citado nos tópicos anteriores deste guia sobre Core Web Vitals, isso porque essa é uma ferramenta que despende muitos insights quanto às otimizações que são necessárias para que um site tenha um bom desempenho nas principais métricas da web.

Ele apresenta relatórios sobre o desempenho de laboratório e de campo de uma determinada página, tanto em dispositivos móveis quanto em desktop. O PSI apresenta um overview sobre a experiência na página por usuários do mundo real e um conjunto de recomendações que podem ser implementadas para melhorar o UX do site.

3. Chrome DevTools

O Chrome DevTools é um conjunto de ferramentas para desenvolvedores Web integradas diretamente no navegador Google Chrome. Elas permitem inspecionar o HTML (DOM) renderizado e a atividade de rede das páginas do seu site.

O painel Chrome DevTools Performance possui uma nova seção Experience, em que é possível detectar alterações inesperadas de layout. Isso acaba sendo bem útil para localizar e corrigir problemas de instabilidade visual nas páginas do seu site, o que contribui para a melhora do CLS.

4. Console de Busca

O Google Search Console (GSC) acrescentou um novo relatório que ajuda a metrificar a evolução do seu site nos quesitos do Core Web Vitals. Esse relatório ajuda a identificar grupos de páginas do seu site que precisam de mais atenção, com base em dados do mundo real (campo) do CrUX.

O desempenho da URL é agrupado por tipo de métrica, status e grupo de URLs (grupos de páginas web parecidas). O relatório do GSC usa como base as três métricas Core Web Vitals: LCP, FID e CLS, por isso, é uma ferramenta de destaque na nossa lista de ferramentas que podem ajudar na mensuração das mesmas.

5. Medição Web Dev

A ferramenta de mediação do Web.Dev permite a medição do desempenho de suas páginas ao longo do tempo, oferecendo uma lista priorizada de codelabs e guias que podem ajudar a melhorar. A medição é fornecida pelo PageSpeed Insights e a ferramenta também ajuda a melhorar as métricas Core Web Vitals. 

6. Extensão Web Vitals Chrome

Além de todas as ferramentas já vistas por aqui, uma outra opção que pode ajudar bastante na hora de dar um suporte às métricas Core Web Vitals é a extensão Web Vitals Chrome.

Essa extensão mede as três métricas já apresentadas em tempo real para o Google Chrome (desktop). Isso pode ser muito útil para encontrar problemas no início do workflow de desenvolvimento, além de ajudar a diagnosticar e avaliar o desempenho das suas páginas em cada uma das principais métricas da web.

7. Chrome UX Report

A última ferramenta da nossa lista, o Chrome UX Report, ou só CrUX como é mais conhecido, é um dataset público composto de dados reais da experiência que os usuários têm com a página.

Ele metrifica as versões de campo de todas as métricas de Core Web Vitals, indo na contramão dos dados de laboratórios, os dados do CrUX vêm de usuários autorizados em campo. Com isso, é possível que os desenvolvedores entendam mais profundamente e de maneira mais realista a usabilidade do seu site ou de seus concorrentes.

Outros indicadores que influenciam na experiência do usuário  

Agora você já possui todos os insumos necessários para começar a arrasar nas métricas de Core Web Vitals, tanto em conhecimento quanto em ferramentas, mas ainda existem outros indicadores que também influenciam na UX. 

Segurança do usuário

O primeiro indicador é a segurança do usuário. Ele precisa se sentir seguro dentro do site e isso é possível com algumas otimizações, como o HTTPS, que significa Hypertext Transfer Protocol Secure ou, em português, “Protocolo de Transferência de Hipertexto Seguro”. Ele nada mais é do que um protocolo de segurança e, por isso, é tão importante para indicar para os visitantes que seu website é seguro.

Se o usuário entrar em algum site com o protocolo HTTP, logo ele é avisado que o site pode não ser seguro e isso pode levar a rejeição do site , ou seja, muitos visitantes podem abandonar por medo.

Por essa razão, oferecer uma navegação segura é fundamental, além de que hoje existe a LGPD (Lei Geral de Proteção de Dados) em vigor, a qual tornou ainda mais obrigatória a proteção dos usuários e de seus dados.

Não utilização de intrusivos

Um outro indicador que influencia bastante na experiência dos usuários, para além das métricas já vistas de Core Web Vitals, é a utilização de intrusivos, como Pop-ups, que são aquelas mensagens que pulam na tela e que atrapalham a visualização do conteúdo da página.

Esse tipo de elemento acaba não sendo nada estratégico, além de prejudicar muito a experiência do usuário, fazendo com que muitos desistam de consumir tal conteúdo por consequência desse intrusivo.

Agora que você compreendeu a importância de cuidar das métricas de UX com o nosso guia sobre Core Web Vitals, com uma equipe especializada em SEO, é possível manter essas questões em dia e bem otimizadas!

Caso não tenha uma expertise em sua equipe de trabalho para cuidar desses fatores, conte com a Web Estratégia. Faça uma cotação de consultoria de SEO e comece a usufruir dos ótimos resultados.

Deixe um comentário

O seu endereço de e-mail não será publicado.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound