Otimizar a qualidade da experiência do usuário é fundamental para o sucesso a longo prazo de qualquer site. Não importa se você é proprietário de uma empresa, profissional de marketing ou desenvolvedor, o Web Vitals pode ajudar a quantificar a experiência do seu site e identificar oportunidades de melhoria.
Informações gerais
As Métricas da Web são uma iniciativa do Google para fornecer orientações unificadas sobre indicadores de qualidade essenciais para oferecer uma ótima experiência do usuário na Web.
O Google forneceu várias ferramentas ao longo dos anos para medir e gerar relatórios sobre o desempenho. Alguns desenvolvedores são especialistas no uso dessas ferramentas, enquanto outros acharam difícil acompanhar a abundância de ferramentas e métricas.
Os proprietários de sites não precisam ser especialistas em performance para entender a qualidade da experiência que estão oferecendo aos usuários. O objetivo da iniciativa Métricas da Web é simplificar o cenário e ajudar os sites a se concentrarem nas métricas mais importantes, as Principais métricas da Web.
Core Web Vitals
As Principais métricas da Web são o subconjunto delas que se aplica a todas as páginas da Web, precisam ser medidas por todos os proprietários do site e aparecem em todas as ferramentas do Google. Cada uma das Principais métricas da Web representa uma faceta distinta da experiência do usuário, é mensurável em campo e reflete a experiência real de um resultado centrado no usuário essencial.
As principais métricas da Web evoluem ao longo do tempo. O conjunto atual para 2020 se concentra em três aspectos da experiência do usuário (carregamento, interatividade e estabilidade visual) e inclui as seguintes métricas (e os respectivos limites):
- Maior exibição de conteúdo (LCP): mede o desempenho do carregamento. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer até 2,5 segundos após o início do carregamento da página.
- Latência na primeira entrada (FID, na sigla em inglês): mede a interatividade. Para proporcionar uma boa experiência ao usuário, as páginas precisam ter um FID de 100 milissegundos ou menos.
- Mudança de layout cumulativa (CLS): mede a estabilidade visual. Para oferecer uma boa experiência ao usuário, as páginas precisam manter um CLS de 0.1. ou menos.
Em cada uma das métricas acima, para garantir que você alcance a meta recomendada para a maioria dos usuários, um bom limite a ser medido é o 75o percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.
As ferramentas que avaliam a conformidade com as Principais métricas da Web precisam considerar a aprovação de uma página se ela atender às metas recomendadas no 75o percentil para todas as três métricas acima.
Ciclo de vida
As métricas nessa faixa passam por um ciclo de vida que consiste em três fases: experimental, pendente e estável.
A tabela abaixo mostra em que ponto do ciclo de vida todas as Principais métricas da Web estão:
Cada fase é projetada para sinalizar aos desenvolvedores como eles devem pensar sobre cada métrica:
- As métricas experimentais são as principais métricas da Web em potencial que ainda podem passar por mudanças significativas dependendo dos testes e do feedback da comunidade.
- Métricas pendentes são as principais métricas da Web que passaram no estágio de teste e feedback e têm um cronograma bem definido para se tornarem estáveis.
- As métricas estáveis são o conjunto atual de Principais métricas da Web que o Chrome considera essenciais para oferecer ótimas experiências ao usuário.
Experimental
Quando uma métrica é desenvolvida inicialmente e entra no ecossistema, ela é considerada uma métrica experimental.
O objetivo da fase experimental é avaliar o condicionamento físico de uma métrica, primeiro explorando o problema a ser resolvido e possivelmente iterando o que as métricas anteriores não abordaram. Por exemplo, a Interaction to Next Paint (INP) foi desenvolvida inicialmente como uma métrica experimental para resolver os problemas de desempenho no tempo de execução presentes na Web de maneira mais abrangente do que a Latência na primeira entrada (FID, na sigla em inglês).
A fase experimental do ciclo de vida das Principais métricas da Web também tem como objetivo dar flexibilidade ao desenvolvimento de uma métrica, identificando bugs e até mesmo explorando mudanças na definição inicial. É também a fase em que o feedback da comunidade é mais importante.
Pendente
Quando a equipe do Chrome determina que uma métrica experimental recebeu feedback suficiente e tem eficácia comprovada, ela se torna uma métrica pendente. As métricas pendentes são mantidas nessa fase por no mínimo seis meses para que o ecossistema tenha tempo de se adaptar. O único obstáculo restante para uma métrica avançar além da fase pendente é aguardar o período de transição. O feedback da comunidade continua sendo um aspecto importante dessa fase, à medida que mais desenvolvedores começam a usar a métrica.
Estável
Depois que uma métrica candidata a uma das Principais métricas da Web é finalizada, ela se torna uma métrica estável.
As métricas estáveis têm suporte ativo e podem estar sujeitas a correções de bugs e mudanças na definição. As Principais métricas da Web estáveis não serão alteradas mais de uma vez por ano. Qualquer alteração em uma das Principais métricas da Web será claramente comunicada na documentação oficial da métrica e no CHANGELOG da métrica. As Principais métricas da Web também estão incluídas em todas as avaliações.
Ferramentas para medir e gerar relatórios sobre as Principais métricas da Web
O Google acredita que as Principais métricas da Web são essenciais para todas as experiências na Web. Por isso, está comprometido em exibir essas métricas em todas as ferramentas conhecidas. As seções abaixo detalham quais ferramentas oferecem suporte às Principais métricas da Web.
Ferramentas de campo para medir as Principais métricas da Web
O Relatório de experiência do usuário do Chrome coleta dados anonimizados e reais de medição de usuários para cada Core Web Vitals. Com esses dados, os proprietários de sites podem avaliar rapidamente o desempenho sem precisar instrumentar manualmente a análise nas páginas, além de potencializar ferramentas como o PageSpeed Insights e o relatório de Principais métricas da Web do Search Console.
| LCP | FID | CLS | |
| Relatório de experiência do usuário do Chrome | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (relatório de Principais métricas da Web) | ✔ | ✔ | ✔ |
Os dados fornecidos pelo relatório de experiência do usuário do Chrome oferecem uma maneira rápida de avaliar o desempenho dos sites, mas não fornecem a telemetria detalhada por visualização de página, que muitas vezes é necessária para diagnosticar, monitorar e reagir rapidamente às regressões. Como resultado, recomendamos que os sites configurem o próprio monitoramento de usuários reais.
Medir as Principais métricas da Web em JavaScript
Cada uma das Principais métricas da Web pode ser medida em JavaScript usando APIs padrão da Web.
A maneira mais fácil de avaliar todas as Principais métricas da Web é usar a biblioteca JavaScript web-vitals, um pequeno wrapper pronto para produção em torno das APIs da Web que medem cada métrica de uma maneira que corresponda com precisão a como elas são informadas por todas as ferramentas do Google listadas acima.
Com a biblioteca web-vitals, medir cada métrica é tão simples quanto chamar uma única função. Consulte a documentação para detalhes completos de uso e API:
import {onCLS, onFID, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
Depois de configurar seu site para usar a biblioteca web-vitals a fim de medir e enviar os dados das Principais métricas da Web a um endpoint de análise, a próxima etapa é agregar e gerar relatórios sobre esses dados para ver se as páginas atendem aos limites recomendados para pelo menos 75% das visitas.
Embora alguns provedores de análise tenham suporte integrado às Principais métricas da Web, mesmo aqueles que não o incluem precisam incluir recursos básicos de métricas personalizadas para medir as Principais métricas da Web na ferramenta.
Um exemplo é o Relatório de Métricas da Web, que permite aos proprietários de sites fazer medições usando o Google Analytics. Para orientações sobre como medir as Principais métricas da Web usando outras ferramentas de análise, consulte Práticas recomendadas para avaliar as Principais métricas da Web no campo.
Também é possível gerar relatórios sobre cada uma das Principais métricas da Web sem escrever nenhum código usando a extensão das Métricas da Web do Chrome. Essa extensão usa a biblioteca web-vitals para medir cada uma dessas métricas e exibi-las aos usuários enquanto navegam na Web.
Essa extensão pode ser útil para entender o desempenho dos seus sites, dos sites dos concorrentes e da Web em geral.
| LCP | FID | CLS | |
|---|---|---|---|
| Web-vitals (em inglês) | ✔ | ✔ | ✔ |
| Extensão Métricas da Web | ✔ | ✔ | ✔ |
Como alternativa, os desenvolvedores que preferem medir essas métricas diretamente usando as APIs da Web subjacentes podem consultar estes guias de métricas para ver detalhes de implementação:
Ferramentas do laboratório para medir as Principais métricas da Web
Embora todas as Principais métricas da Web sejam, em primeiro lugar, métricas de campo, muitas delas também são mensuráveis no laboratório.
A medição em laboratório é a melhor maneira de testar o desempenho de recursos durante o desenvolvimento, antes que eles sejam lançados para os usuários. Essa também é a melhor maneira de detectar as regressões de desempenho antes que elas aconteçam.
As ferramentas abaixo podem ser usadas para medir as Principais métricas da Web em um ambiente de laboratório:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome DevTools | ✔ | ✘ (use TBT em vez disso) | ✔ |
| Lighthouse | ✔ | ✘ (use TBT em vez disso) | ✔ |
Embora a medição em laboratório seja uma parte essencial para proporcionar ótimas experiências, ela não substitui a medição de campo.
O desempenho de um site pode variar drasticamente com base na capacidade do dispositivo do usuário, nas condições de rede, nos outros processos em execução no dispositivo e na interação com a página. Na verdade, a pontuação de cada uma das Principais Métricas da Web pode ser afetada pela interação do usuário. Somente a medição de campo pode capturar com precisão o quadro completo.
Recomendações para melhorar suas pontuações
Depois de medir as Principais métricas da Web e identificar áreas de melhoria, a próxima etapa é a otimização. Os guias a seguir oferecem recomendações específicas sobre como otimizar suas páginas para cada uma das Principais métricas da Web:
Outras Métricas da Web
Embora as Principais métricas da Web sejam as principais para entender e oferecer uma ótima experiência do usuário, existem também outras métricas vitais.
Elas geralmente funcionam como indicadores ou métricas complementares para as Principais Métricas da Web, ajudando a capturar uma parte maior da experiência ou diagnosticar um problema específico.
Por exemplo, as métricas Tempo até o primeiro byte (TTFB, na sigla em inglês) e Primeira exibição de conteúdo (FCP, na sigla em inglês) são aspectos vitais da experiência de carregamento e são úteis para diagnosticar problemas com LCP (tempos de resposta lentos do servidor ou recursos de bloqueio de renderização, respectivamente).
Da mesma forma, métricas como Tempo total de bloqueio (TBT, na sigla em inglês) e Tempo para interação (TTI) são métricas de laboratório vitais para detectar e diagnosticar possíveis problemas de interatividade que podem afetar a FID. No entanto, elas não fazem parte do conjunto de Principais métricas da Web porque não são mensuráveis pelo campo nem refletem um resultado centrado no usuário.
Evolução das Métricas da Web
As Métricas da Web e as Principais métricas da Web representam os melhores indicadores disponíveis que os desenvolvedores têm hoje para medir a qualidade da experiência na Web, mas esses indicadores não são perfeitos, e é possível que haja melhorias ou adições futuras.
As Principais métricas da Web são relevantes para todas as páginas da Web e exibidas nas ferramentas relevantes do Google. As mudanças nessas métricas vão ter um amplo impacto. Portanto, os desenvolvedores podem esperar que as definições e os limites das Principais métricas da Web sejam estáveis e que as atualizações recebam um aviso prévio e uma frequência anual previsível.
As outras Métricas da Web geralmente são específicas de contexto ou ferramenta e podem ser mais experimentais do que as Principais métricas da Web. Assim, as definições e os limites podem mudar com maior frequência.
Para todas as Métricas da Web, as mudanças vão ser claramente documentadas neste CHANGELOG público.