Web Vitals: Conheça as Métricas Essenciais para um Site Saudável
Fique Atento: Episódio Google Web Vitals
Durante o ano de 2021, otimizamos a qualidade da experiência do usuário - chave para o sucesso a longo prazo de qualquer site na web. Por meio de nosso envolvimento e colaboração contínuos com milhões de desenvolvedores da web e proprietários de sites, desenvolvemos muitas métricas e ferramentas úteis no Google para ajudar proprietários de empresas, profissionais de marketing e desenvolvedores a identificar oportunidades para melhorar as experiências do usuário. No entanto, a abundância de métricas e ferramentas cria seu próprio conjunto de desafios de priorização, clareza e consistência para muitos.
Google apresentou um novo programa, Web Vitals, uma iniciativa do próprio Google para fornecer orientação unificada para sinais de qualidade que, são essenciais para proporcionar uma ótima experiência do usuário na web.
Core Web Vitals
Medir a qualidade da experiência do usuário tem muitas facetas. Embora alguns aspectos da experiência do usuário sejam específicos do site e do contexto, há um conjunto comum de sinais - "Core Web Vitals" - que é crítico para todas as experiências na web. Essas necessidades básicas de experiência do usuário incluem experiência de carregamento, interatividade e estabilidade visual do conteúdo da página, e combinadas são a base do 2020 Core Web Vitals.
O Largest Contentful Paint mede a velocidade de carregamento percebida e marca o ponto na linha do tempo de carregamento da página quando o conteúdo principal da página provavelmente foi carregado.
O First Input Delay mede a capacidade de resposta e quantifica a experiência que os usuários sentem ao tentar interagir pela primeira vez com a página.
O Cumulative Layout Shift mede a estabilidade visual e quantifica a quantidade de mudanças inesperadas de layout do conteúdo visível da página.
Todas essas métricas capturam importantes resultados centrados no usuário, são mensuráveis em campo e têm ferramentas e equivalentes métricos de diagnóstico de laboratório de apoio. Por exemplo, embora o Largest Contentful Paint seja a métrica de carregamento da linha superior, também é altamente dependente do First Contentful Paint (FCP) e do Time to First Byte (TTFB), que permanecem essenciais para monitorar e melhorar.
Medindo vitais essenciais da Web
O objetivo do Google é tornar o Core Web Vitals simples e fácil de acessar e medir para todos os proprietários e desenvolvedores de sites, tanto nas superfícies do Google quanto em seus próprios painéis e ferramentas.
O Chrome UX Report permite que os proprietários de sites avaliem rapidamente o desempenho de seus sites para cada Web Vital, conforme experimentado por usuários reais do Chrome.
Incentivamos todos os proprietários de sites a reunir suas próprias análises de medição de usuário real para cada Core Web Vital. Para permitir isso, vários navegadores, incluindo o Google Chrome, suportam as especificações atuais do Core Web Vitals: Pintura com maior conteúdo , Instabilidade do layout e Tempo de evento. Para tornar mais fácil para os desenvolvedores medirem o desempenho do Core Web Vitals em seus sites, hoje estamos lançando uma biblioteca JavaScript de código aberto da web-vitals , que pode ser usada com qualquer provedor de análise que ofereça suporte a métricas personalizadas ou como uma referência de como capture com precisão cada um dos principais pontos vitais da Web para os usuários do seu site.
// Exemplo de uso do web-vitals para medir e relatar CLS, FID e LCP.
import { getCLS , getFID , getLCP } de 'web-vitals' ;
function reportToAnalytics ( data ) {
const body = JSON . stringify ( dados );
( navegador . sendBeacon && navigator . sendBeacon ( '/ analytics' , body )) ||
fetch ( '/ analytics' , { body , method : 'POST' , keepalive : true });
}
getCLS (( metric ) => reportToAnalytics ({ cls : metric . value }));
getFID (( metric ) => reportToAnalytics ({ fid : metric . value }));
getLCP (( métrica ) => reportToAnalytics ({ LCP : métrica . valor }));
Em nosso processo de teste e desenvolvimento, achamos valioso ter fácil acesso ao estado de cada Core Web Vital, tanto no desenvolvimento quanto enquanto navegamos na web. Para ajudar os desenvolvedores a identificar oportunidades de otimização hoje, também estamos lançando uma prévia do desenvolvedor da nova extensão Core Web Vitals . Esta extensão apresenta um indicador visual no Chrome sobre o estado de cada vital enquanto você navega na web e, no futuro, também permitirá que você visualize insights agregados de usuários reais (fornecidos pelo Chrome UX Report) sobre o estado de cada vital para o URL e origem atuais.
Finalmente, nos próximos meses, estaremos atualizando o Lighthouse , o Chrome DevTools , o PageSpeed Insights , o relatório de velocidade do Search Console e outras ferramentas populares para destacar e fornecer orientação consistente e acionável para melhorar o Core Web Vitals.
Evolução do Core Web Vitals
Embora as métricas do Core Web Vitals atuais avaliem três aspectos importantes da experiência do usuário na web, há muitos aspectos da experiência do usuário que ainda não foram cobertos pelo Core Web Vitals. Para melhorar nossa compreensão da experiência do usuário no futuro, esperamos atualizar o Core Web Vitals anualmente e fornecer atualizações regulares sobre os futuros candidatos, motivação e status de implementação.
Olhando para 2021, estamos investindo na construção de uma melhor compreensão e capacidade de medir a velocidade da página e outras características críticas da experiência do usuário. Por exemplo, estender a capacidade de medir a latência de entrada em todas as interações, não apenas na primeira; novas métricas para medir e quantificar suavidade; primitivas e métricas de suporte que permitirão a entrega de experiências instantâneas e de preservação de privacidade na web; e mais.
Teste Web Vitals usando a extensão do Google Chrome clicando no link abaixo:
