Core Web Vitals | A experiência do usuário é a chave para o sucesso de qualquer site on-line. Historicamente, porém, o UX sempre foi medido subjetivamente.
A fim de melhor quantificar a experiência de uso de um site, o Google introduziu o Web Vitals, uma iniciativa para dar orientação unificada para sinais de qualidade específicos da experiência do usuário. Vamos rever o significado de cada uma dessas métricas e ajudá-lo a entender como o desempenho é medido dentro do seu marketing. Confira mais detalhes em nosso portal!
O que são o Google Core Web Vitals?
Pense neles como sinais vitais na visita de um médico.
São medidas para verificar rapidamente o pulso da experiência de um usuário, e quantificar o quão saudável pode ser o desempenho de um site. Os sinais vitais da Web são o subconjunto dos sinais vitais da Web que mais importam e também as medidas que se aplicam a todas as páginas da Internet.
Cada Core Web Vital se refere a um componente distinto da experiência do usuário de uma página. Enquanto estes evoluirão ao longo do tempo, o Google anunciou três importantes Vitais Essenciais da Web que serão lançados como um fator de classificação em maio de 2021. Estes três sinais vitais se referem ao carregamento, interatividade e estabilidade visual.
É provável que este fator de classificação seja semelhante a outros que o Google tem lançado em torno da segurança do site, dos interstícios intrusivos e da facilidade de uso do celular. O Google ainda tentará servir o melhor resultado de busca para a consulta do usuário. Páginas que tendem a passar os limites do Core Web Vitals podem ver um ligeiro aumento nos rankings, já que o Google pretende servir também para uma boa experiência do usuário.
Relatório do Core Web Vitals
Você pode avaliar o desempenho de seu site e obter uma discriminação página por página dos problemas usando o relatório principal dos sinais vitais da web no Console de Busca do Google. Este relatório mostra o desempenho de sua página com base em dados de uso do mundo real ou dados de campo.
O relatório do Core Web Vitals mostrará a você três métricas:
- Largest Contentful Paint (LCP)
- First Delay Input (FID)
- Cumulative Layout Shift (CLS)
Carregamento: Largest Contentful Paint (LCP)
O núcleo vital da web mede como a carga impacta a experiência de um usuário é chamada de Largest Contentful Paint (LCP). A Largest Contentful Paint é essencialmente o maior elemento que é pintado no navegador, marcando o ponto no tempo de carregamento da página quando o conteúdo principal provavelmente apareceu para o usuário.
O LCP de uma página deve ocorrer dentro de 2,5s.
Interatividade: Largest Contentful Paint(FID)
O sinal principal vital da web para interatividade é chamado de First Input Delay (FID). O atraso de entrada mede a capacidade de resposta. Em vez de apenas medir a rapidez com que o conteúdo é carregado em uma página, o FID é projetado para medir a rapidez com que os usuários podem interagir com esse conteúdo.
Normalmente, o atraso de entrada ocorre se a linha principal do navegador estiver ocupada processando algo mais, de modo que ainda não pode responder à interação de um usuário.
O JavaScript é geralmente um grande culpado aqui – se o navegador estiver ocupado analisando um grande arquivo JavaScript ou mesmo carregando folhas de estilo em segundo plano, pode haver um atraso na resposta à interação do usuário. Considere a seguinte linha do tempo:
- O conteúdo é solicitado pelo usuário
- O servidor responde e começa a enviar dados (Time to First Byte)
- O navegador começa a pintar o código na tela (First Contentful Paint)
- Outras solicitações de rede são feitas em segundo plano
- O usuário clica em um elemento
- As solicitações da rede terminam e o conteúdo é finalmente interativo (Time to Interactive)
O atraso entre quando o usuário clica pela primeira vez ou interage com algo e a página é finalmente interativa e capaz de responder é o FID.
O FID deve ser inferior a 100ms.
Estabilidade Visual: Cumulative Layout Shift (CLS)
A teia vital projetada para medir a estabilidade visual é o Cumulative Layout Shift (CLS).
A estabilidade visual é exatamente o que parece: Quando o conteúdo se move em uma página. Você já esteve lendo um artigo apenas para ter um anúncio ou imagem acima do que você está lendo, fazendo com que o conteúdo se mova para baixo na tela? Pior ainda, já foi clicar em um link apenas para ter algo carregado e fazer com que o link se mova, o que significa que você clicou na coisa errada?
O objetivo do CLS é fornecer uma medida para mudanças inesperadas de layout para que os webmasters possam ficar de olho na frequência com que os usuários podem encontrar uma má experiência devido à mudança de conteúdo na tela.
Medir o CLS pode parecer complicado, porque é calcular como elementos instáveis aparecem entre dois frames diferentes ao carregar a página, e a distância que esses elementos se moveram em relação ao tamanho da tela.
A multiplicação dessas medidas produz a pontuação CLS. Uma pontuação CLS passante deve ser inferior a 0,1.
Medindo o Core Web Vitals
Para medir os sinais vitais da Web, é importante contar com uma combinação de dados de laboratório (testes únicos) e de campo (medições agregadas de UX ao longo do tempo).
Para os dados de laboratório, o Google fornece as principais ferramentas de sinais vitais da web, como Lighthouse e PageSpeed Insights. Para dados de campo, considere apoiar-se no painel de controle Chrome User Experience da equipe Chrome, que fornece uma medição agregada da experiência de um usuário ao longo do tempo.
Assim, agora que você sabe o que são os principais sinais vitais da Web, talvez você esteja se perguntando para onde ir a partir daqui. De volta à analogia de nosso consultório médico: verifique regularmente os sinais vitais de seu website. Lembre-se, as melhorias virão iterativamente.
Use ferramentas que o ajudarão a medir os sinais vitais da Web ao longo do tempo para entender melhor como as melhorias no carregamento, interatividade e estabilidade visual estão impactando sua experiência de usuário em geral.
Para saber mais detalhes, confira tudo sobre o Curso Page Speed Academy!
