Core Web Vitals: O que são e como você pode testá-los?

Última atualização em 17 de setembro de 2020

Qualquer pessoa que administra um site sabe o quanto é importante que ele funcione da maneira mais tranquila possível. Sites lentos e mal construídos não transmitem uma sensação de confiabilidade e credibilidade. O usuário médio da web precisa se sentir assim antes de se sentir confortável o suficiente para usar seu site. Para ajudar você e os desenvolvedores da Web em todo o mundo a melhorar seus sites, o Google lançou recentemente o Core Web Vitals. Este é um novo programa que fornece uma série de métricas para ajudar a determinar a qualidade e a experiência potencial do usuário em um site. Neste artigo, detalharemos as principais métricas, ou web vitals, e como você pode testá-las para determinar a posição do seu site.

Quais são os principais Web Vitals?

Ao determinar a qualidade do serviço fornecido por um site, existem algumas métricas que devem ser analisadas para desenvolver uma imagem clara. O Google reduziu para o desenvolvedor web médio. Eles determinaram que três métricas são os principais componentes pelos quais um site pode ser avaliado. Essas três métricas são a maior pintura de conteúdo (LCP), o atraso da primeira entrada (FID) e o deslocamento de layout cumulativo (CLS).

A maior pintura de conteúdo é uma medida de quão rápido sua página da web carrega. Ele marca o ponto onde o conteúdo principal da página em questão foi medido. Esta é a medida de quanto tempo leva para o maior bloco de texto (ou imagem) em sua página carregar. Em geral, você gostaria que a maior pintura de conteúdo em seu site não levasse mais de 2,5 segundos para carregar. Certamente, este é um ponto que vale a pena considerar durante o web design .

O atraso na primeira entrada mede como seu site se comporta quando os usuários interagem com a página. Isso envolve coisas como capacidade de resposta. Sempre que um usuário clica em sua página, o tempo que o site leva para responder a esse clique é medido pelo primeiro atraso de entrada. Normalmente, qualquer coisa mais rápida que 100ms é boa, mas depois disso, você vai querer fazer algumas melhorias.

Por fim, o deslocamento de layout cumulativo mede a estabilidade dos visuais em sua página. É uma medida quantificável da quantidade de mudança inesperada de layout da página. Para cada uma dessas três métricas, você deve atingir o percentil 75 ou mais de todos os carregamentos de página. Isso seria considerado “aprovado” na medida em que essas métricas fossem consideradas.

Como medir os principais pontos vitais da Web?

Estabelecemos que essas métricas podem ser tão importantes quanto uma campanha de SEO bem executada, então como elas são medidas? Como o Google considera os principais aspectos vitais da web a espinha dorsal da experiência do usuário, eles se comprometeram a fornecer ferramentas para medi-los. Abaixo estão três maneiras pelas quais se pode medir o desempenho dos principais elementos vitais da web de seu site.

Por meio do Relatório de experiência do usuário do Chrome, o Google coleta experiências reais e anônimas do usuário para cada elemento vital da Web. Isso é útil porque significa que os aplicativos externos não precisam ser configurados antecipadamente. Na verdade, o Google já cuidou disso antes do tempo. Além disso, ferramentas como o PageSpeed ​​Insights são executadas na mesma plataforma, o que significa que você pode usá-las imediatamente.

Embora esse método seja bastante direto e exija pouca contribuição de você, a análise oferecida por esse método não é muito detalhada. Ele negligencia a inclusão de telemetria por visualização de página, entre outras coisas. Isso ajudaria alguém a diagnosticar com precisão possíveis problemas com uma página da web.

Usando JavaScript

Alternativamente, pode-se usar JavaScript para lidar com os principais elementos vitais da web. A maneira mais simples de começar é simplesmente puxar a entrada do JavaScript em sua biblioteca para web-vitals. Isso fornece APIs da Web prontas para uso que são precisas. Além disso, a Chrome Web Store oferece uma extensão, chamada Web Vitals Chrome Extension , que permite relatar cada web vital sem ter que escrever nenhum código.

Por fim, pode-se usar ferramentas de laboratório para medir cada um dos principais elementos vitais da web. Isso é particularmente útil para quem deseja ter uma ideia do desempenho de um site antes de ser lançado. Isso não significa, no entanto, que as métricas de campo possam ser desconsideradas. A experiência de um usuário é afetada por uma ampla variedade de fatores. Os exemplos incluem condições de rede e programas adicionais que podem estar sendo executados pelo usuário. Portanto, é de seu interesse aproveitar os testes de ferramentas de campo assim que seu site estiver funcionando. É uma maneira simples de garantir que tudo está em ordem.

Outras métricas para conhecer

Embora os principais aspectos vitais da Web cobertos sejam os mais importantes a serem considerados, existem outras métricas valiosas de qualidade da Web a serem consideradas. Afinal de contas, qualquer melhoria no desempenho do site e o prazer de seus clientes em um site são desejáveis. Essas medidas geralmente ajudam no ajuste fino de um diagnóstico de uma página da web. Algumas delas incluem medidas como Time to First Byte, que é importante para a experiência de carregamento dos usuários em seu site, e Time to Interactive, que é útil se você estiver sofrendo de um problema com a interatividade em seu site. Ambos, embora importantes, não são mensuráveis ​​em campo e, portanto, não recebem o mesmo status que os principais componentes vitais da web.

O que está acontecendo com o Lighthouse 6.0?

Se você estiver interessado em avaliar a qualidade do seu site, uma dessas ferramentas que pode ajudá-lo a começar se estiver procurando por um diagnóstico rápido é o Lighthouse. Esse programa de auditoria é automatizado e está disponível no Chrome DevTools como uma extensão disponível na Chrome Store ou como um módulo de nó e uma CLI.

A versão mais recente do Lighthouse incorpora a ênfase do Google nos principais elementos vitais da Web, como FDI e CLS, e fornece uma avaliação do desempenho do seu site em relação a essas métricas. Agora, a pontuação de desempenho fornecida pelo Lighthouse em relação ao seu site foi atualizada para incluir esses novos modelos, o que significa que o modelo antigo e ponderado foi adaptado para ficar assim:

Essas novas mudanças têm efeitos tangíveis nas avaliações de desempenho dos sites. Apenas 20 por cento dos sites tiveram uma melhoria em suas pontuações de avaliação, enquanto aproximadamente cinqüenta por cento de todos os sites experimentaram um declínio de cinco pontos ou mais nas pontuações com a escala ponderada recém-implementada.

Chrome DevTools

O Chrome DevTools, como o Lighthouse, passou por algumas novas mudanças para atender melhor aos desenvolvedores da web. A principal dessas mudanças é a correção da guia de problemas, que em iterações anteriores sofria de problemas frequentes e confusão. Além disso, o painel de desempenho agora registra o tempo total de bloqueio na parte inferior da página após registrar seu desempenho de carregamento. Essa ferramenta mede por quanto tempo uma página parece estar funcional, mas não é realmente utilizável no momento devido ao bloqueio do thread principal do JavaScript, impedindo que a entrada do usuário seja acionada pela página. Por fim, o Chrome UX Dashboard agora divide as páginas por conteúdo web vitals, permitindo que os usuários comparem o desempenho de seu site com o da concorrência, bem como do setor como um todo.

Core Web Vitals, em suma, são medidas de experiência do usuário em uma página da web. À medida que as coisas evoluem, é provável que mudem de maneiras menores e significativas. À medida que você otimiza sua página da web, tente manter os principais elementos vitais da web saudáveis, e você certamente manterá aqueles que visitam seu site satisfeitos.