Core Web Vitals: o que é e qual a importância para UX?

LCP, CLS e FID: essas três siglas podem ser a solução para os problemas de muitos profissionais de User Experience. Será que é o seu caso?

Quando o assunto é experiência do usuário no Google, fique atento a elas: as Core Web Vitals

Muito se fala sobre como as estratégias de SEO são focadas na experiência dos usuários: otimizações são feitas e há uma extensa busca pelas primeiras posições na SERP — Search Engine Results Page. 

No entanto, muitas empresas ainda não têm investido tempo e dinheiro nas Core Web Vitals, que são as métricas essenciais para a avaliação da experiência que um usuário está tendo em suas respectivas páginas.

Caso você não as conheça: está no lugar certo! 

As Core Web Vitals, ou CWV, foram definidas e implementadas pelo próprio Google e ajudam no entendimento da estabilidade e velocidade na qual uma página responde às interações dos consumidores. 

Parece interessante, não?

Nós vamos te provar que sim e como elas são o pilar essencial para profissionais de UX. 

Vamos aprender?

O que é Core Web Vitals?

Em suma, podemos elencar que as Core Web Vitals são métricas que ditam o andamento da experiência de um usuário em uma página específica. 

Infográfico sobre Core Web Vitals
Core Web Vitals

O Google as usa no seu algoritmo, junto com os web crawlers e, assim, consegue avaliar a usabilidade da página, além de compreender o quão perto ou longe ela está de atingir uma boa experiência para o usuário. 

Conhecidas também por “principais métricas da web” elas são divididas em três grandes indicadores. São eles: 

  • Largest Contentful Paint (LCP): responsável por medir o tempo de carregamento da página;
  • First Input Delay (FID): mede o tempo que o usuário leva para interagir com a página;
  • Cumulative Layout Shift (CLS): encarregado de medir a estabilidade do conteúdo enquanto a página está em carregamento até a interação do usuário.

Quando o Core Web Vitals foi implementado?

Em maio de 2020 o Google fez um anúncio comunicando que as Core Web Vitals estavam sendo desenvolvidas e o seu intuito era unificar a maneira de entender a performance de uma página sem lidar com uma grande quantidade de métricas e ferramentas. 

No fim do mesmo mês, o anúncio foi outro: as CWV seriam incorporadas ao algoritmo do Google e esse processo ocorreu aos poucos.

Assim, em junho de 2021 começou a implementação que hoje, por sua vez, já faz parte do nosso cotidiano, principalmente no de profissionais de SEO e User Experience.

Quais as métricas analisadas pelo Core Web Vitals?

Você já sabe que as CWV envolvem três fatores: LCP, FID e CLS. 

Agora, chegou a hora de conhecermos cada uma dessas métricas de forma mais detalhada.

1. LCP – Largest Content Paint

Métrica Largest Contentful Paint - LCP analisada pelo Core Web Vitals
Largest Contentful Paint (LCP) analisada pelo Core Web Vitals.

Focada na medição da velocidade na qual uma página carrega de forma completa o conteúdo para o usuário, a LCP mede a velocidade de carregamento pelo tempo de renderização, ou seja, até o momento que o maior elemento da página (que pode ser um vídeo, imagem ou até mesmo o texto) seja mostrado na tela do usuário. 

Além disso, é importante ressaltar que esse tempo de carregamento pode ser influenciado por vários fatores, como CSS, JavaScript e até mesmo pelo tempo do servidor. 

O Google faz algumas recomendações sobre os valores da Largest Contentful Paint: 

  • Recomendável: abaixo de 2.5 segundos;
  • Precisa de ajustes: entre 2.5 e 4 segundos;
  • Faça grandes mudanças: acima de 4 segundos. 

Caso a sua página se encontre no último fator você, provavelmente, está perdendo muitos visitantes. Fique de olho!

2. FID – First Input Delay 

Métrica First Input Delay (FID)
Métrica First Input Delay (FID) analisada pelo Core Web Vitals.

Em suma, a FID é a métrica responsável por medir a velocidade de resposta à primeira interação do usuário. Pode ser um clique ou até mesmo um controle de JavaScript.

Esse tempo medido do momento que o usuário interage pela primeira vez até o site responder acontece em milissegundos e os atrasos podem ser decorrentes de outros fatores como carregamento de arquivos grandes de JavaScript. 

O Google também faz algumas recomendações sobre os valores da First Input Delay: 

  • Recomendável: abaixo de 100 milissegundos;
  • Precisa de ajustes: entre 100ms e 300ms;
  • Má experiência de usuário: acima de 300ms. 

3. CLS – Cumulative Layout Shift 

Métrica Cumulative Layout Shift (CLS).
Métrica Cumulative Layout Shift (CLS) analisada pelo Core Web Vitals.

A terceira e última métrica das CWV é a CLS, que faz a medição da frequência e a gravidade das mudanças de layout feitas de modo inesperado em uma página.

Você provavelmente já acessou algum site no qual, do nada, um elemento da página mudou de lugar e você clicou onde não queria por causa dessa mudança: a CLS mede exatamente isso. 

Esses movimentos repentinos atrapalham a experiência da página e irritam muito os usuários. Pensando nisso, o Google construiu recomendações acerca dos valores da Cumulative Layout Shift: 

  • Recomendável: abaixo de 0.1;
  • Precisa de ajustes: entre 0.1 e 0.25;
  • Má experiência de usuário: acima de 0.25. 

Como medir o Core Web Vitals?

Antes de conhecermos as ferramentas de medição, você precisa compreender que as métricas das Core Web Vitals podem ser medidas em Lab Data (no laboratório) ou no Field Data (no campo). 

Entenda melhor: 

  • Lab data: é feita uma simulação do carregamento da página em ambientes controlados;
  • Field data: neste caso, a análise usa as interações reais dos usuários e consegue captar nuances que o laboratório não consegue. 

É importante ressaltar que o LCP e o CLS podem ser analisados em ambos os casos, mas o FID apenas pode ser medido em campo.

Agora, vamos conhecer ferramentas que ajudam no entendimento dessas métricas? 

PageSpeed Insights

O PageSpeed Insights mede a velocidade das páginas, informa as métricas CWV, tanto em mobile quanto em desktop e ainda traz sugestões de melhorias.

No que diz respeito aos dados de campo, ela informa ao Chrome UX Report. Já quando falamos de dados de laboratório, os dados são baseados na análise do Lighthouse. 

Lighthouse

Como citado acima, o PSI usa dados de laboratório do Lighthouse, que é uma ferramenta que verifica dados de LCP, FID e CLS, além de medir a velocidade de sites e diversos elementos de experiência de uma página. 

Search Console

O Google Search Console é uma ótima ferramenta por oferecer um relatório específico de Core Web Vitals. 

Além de usar os dados de campo dos sites, os resultados obtidos nos seus relatórios são divididos por status (ruim, melhorias necessárias e bom), o que faz com que a visão das páginas que precisam de melhorias seja mais rápida e fácil.

Chrome User Experience Report

Essa ferramenta analisa as CWV por meio de dados de campo, analisando, também, métricas de diagnóstico das páginas. 

Você pode encontrar os seus dados de diversas maneiras: pelo PageSpeed Insights, como já foi citado, pelo CrUX API, ótimo para profissionais de UX, porque integra dados de outros aplicativos e pelo CrUX Dashboard.

Como analisar as métricas do Core Web Vitals?

Em cada uma das ferramentas citadas acima você conseguirá ter acesso aos dados. 

Portanto, correlacione os mesmos com as recomendações do Google para cada uma das métricas das CWV, também já citadas neste artigo, e compreenda em quais delas sua página está boa, com necessidade de melhorias ou entregando uma má experiência para o usuário.

Como melhorar a pontuação do Core Web Vitals?

Fez as suas análises e percebeu que a sua pontuação não é a ideal? 

Então, é a hora de fazer ajustes e trabalhar pesado para entregar uma melhora nos dados das Core Web Vitals. 

Algumas melhorias são: 

  • Melhorar o tempo de resposta do servidor: otimize o servidor, antecipe conexões de terceiros e armazene em cache parte ou todo o conteúdo da página HTML;
  • Adiar JavaScript e CSS: elimine caracteres desnecessários no código, assim arquivos são reduzidos; e adie o carregamento de scripts que não são essenciais para a página;
  • Diminuir o tempo de carregamento de recursos: comprima imagens, compacte arquivos de texto e pré-carregue recursos importantes;
  • Tenha um web worker: assim o JavaScript poderá ser executado em segundo plano e, como consequência, há uma melhora no FID.

Qual a importância do Core Web Vitals na experiência do usuário?

Em suma, são essas métricas, a LCP, CLS e FID que garantem que o dono de uma página entenda se o seu consumidor está tendo uma experiência positiva ao acessar o site ou blog. 

É comum entrarmos em páginas e sairmos logo em seguida, seja porque elas demoram muito para abrir, mudam layouts automaticamente e de maneira desorganizada, ou até mesmo não carregarem imagens. O foco é um só: todos nós queremos ter uma boa experiência na internet e as Core Web Vitals são importantes por serem um caminho para alcançarmos esse fato!

Como melhorar projetos UX com o Core Web Vitals?

Muito se fala da importância das CWV para o SEO quando, na realidade, o foco é o usuário, ou seja, a experiência dele. 

Entendendo as métricas das Core Web Vitals você, profissional de UX, conseguirá compreender como a sua página está se comportando frente aos seus visitantes e, assim, será possível traçar estratégias personalizadas para cada uma das suas páginas e os seus projetos de UX serão mais direcionados e eficientes. 

Portanto, se você quer aprender mais sobre Experiência do Cliente, assine já a Multi +

Uma plataforma da XP Educação com bootcamp de Experiência do Cliente, onde você poderá dominar as ferramentas necessárias para garantir uma melhor experiência para seus consumidores e alcançar o sucesso. Saiba mais! 

spot_img

Continue Aprendendo

spot_img