Métricas da Web

A otimização da qualidade da experiência do usuário é fundamental para o sucesso a longo prazo de qualquer site na Web. 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 no 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.

Ao longo dos anos, o Google forneceu várias ferramentas para medir e gerar relatórios sobre a performance. Alguns desenvolvedores são especialistas no uso dessas ferramentas, enquanto outros consideraram a abundância de ferramentas e métricas difíceis de acompanhar.

Os proprietários de sites não precisam ser especialistas em desempenho para entender a qualidade da experiência que estão oferecendo aos usuários. O objetivo dessa iniciativa é simplificar o cenário e ajudar os sites a se concentrar nas métricas mais importantes, as Core Web Vitals.

Core Web Vitals

As Core Web Vitals são o subconjunto delas que se aplicam a todas as páginas da Web, devem ser medidas por todos os proprietários de sites e serão exibidas em todas as ferramentas do Google. Cada uma das Core Web Vitals representa um aspecto distinto da experiência do usuário, é mensurável no campo e reflete a experiência real de um resultado crítico centrado no usuário.

As Core Web Vitals evoluem com o 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, na sigla em inglês): 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.
• First Input Delay (FID): mede a interatividade. Para oferecer 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 do usuário, as páginas precisam manter um CLS de 0.1. ou menos.

Para cada uma das métricas acima, para garantir que você atinja a meta recomendada para a maioria dos usuários, um bom limite é o 75o percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.

As ferramentas que avaliam a conformidade com as Core Web Vitals devem 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 na faixa das Core Web Vitals passam por um ciclo de vida com três fases: experimental, pendente e estável.

A tabela abaixo reflete o ciclo de vida de todas as Core Web Vitals:

Cada fase é projetada para sinalizar aos desenvolvedores como eles devem pensar sobre cada métrica:

• As métricas experimentais são possíveis Core Web Vitals que ainda podem estar passando por mudanças significativas dependendo dos testes e do feedback da comunidade.
• As métricas pendentes são as Core Web Vitals futuras 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 Core Web Vitals 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 a adequação de uma métrica. Primeiro, exploramos o problema a ser resolvido e, possivelmente, itera as métricas anteriores que não foram abordadas. Por exemplo, a Interação com a próxima exibição (INP, na sigla em inglês) 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 Core Web Vitals também tem como objetivo oferecer flexibilidade no desenvolvimento de métricas, identificando bugs e até 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 pelo menos seis meses para dar tempo para o ecossistema se adaptar. O único obstáculo 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 nessa fase, à medida que mais desenvolvedores começam a usar a métrica.

Estável

Depois disso, ela se torna uma métrica estável (link em inglês). Para métricas que estão no acompanhamento das Core Web Vitals, elas se tornam Core Web Vitals.

As métricas estáveis têm suporte ativo e podem estar sujeitas a correções de bugs e mudanças nas definições. As métricas estáveis das Core Web Vitals não mudam mais de uma vez por ano. Qualquer mudança nas Core Web Vitals é comunicada claramente na documentação oficial da métrica e no CHANGELOG da métrica. As Core Web Vitals também estão incluídas em todas as avaliações.

Ferramentas para medir e gerar relatórios sobre as Core Web Vitals

O Google acredita que as Core Web Vitals 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 a seguir detalham quais ferramentas oferecem suporte às Core Web Vitals.

Ferramentas de campo para medir as Core Web Vitals

O Chrome User Experience Report coleta dados anônimos e reais de medição de usuários para cada Core Web Vitals. Esses dados permitem que os proprietários de sites avaliem rapidamente o desempenho sem a necessidade de instrumentar manualmente a análise nas páginas, além de usar ferramentas como o PageSpeed Insights e o relatório de Core Web Vitals do Search Console.

Os dados fornecidos pelo Chrome User Experience Report oferecem uma maneira rápida de avaliar o desempenho dos sites. No entanto, eles não têm a telemetria detalhada por visualização de página, que muitas vezes é necessária para diagnosticar, monitorar e reagir rapidamente a regressões. Por isso, é altamente recomendável que os sites configurem o próprio monitoramento de usuário real.

Medir as Core Web Vitals em JavaScript

Cada uma das Core Web Vitals pode ser medida em JavaScript usando APIs da Web padrão.

A maneira mais fácil de avaliar todas as Core Web Vitals é usar a biblioteca JavaScript web-vitals, um wrapper pequeno e 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 do uso e da 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 Core Web Vitals a um endpoint de análise, a próxima etapa é agregar e gerar relatórios sobre esses dados para ver se suas páginas atendem aos limites recomendados em pelo menos 75% das visitas.

Embora alguns provedores de análise tenham suporte integrado para as Core Web Vitals, mesmo os que não incluem precisam incluir recursos básicos de métricas personalizadas que permitem medir essas métricas na ferramenta.

Um exemplo é o Relatório de Métricas da Web, que permite que os proprietários de sites avaliem as Core Web Vitals usando o Google Analytics. Para orientações sobre como avaliar as Core Web Vitals usando outras ferramentas de análise, consulte Práticas recomendadas para avaliar as Core Web Vitals em campo.

Também é possível gerar relatórios sobre cada uma das Core Web Vitals sem gravar nenhum código usando a extensão "Métricas da Web" do Chrome. Essa extensão usa a biblioteca web-vitals para medir cada uma dessas métricas e mostrá-las aos usuários enquanto eles navegam na Web.

Essa extensão é útil para entender o desempenho dos sites da empresa, dos concorrentes e da Web em geral.

Como alternativa, os desenvolvedores que preferem avaliar essas métricas diretamente pelas APIs da Web subjacentes podem consultar estes guias de métricas para ver detalhes de implementação:

• Medir a LCP em JavaScript
• Medir a FID em JavaScript
• Medir a CLS no JavaScript

Ferramentas do laboratório para medir as Core Web Vitals

Embora todas as Core Web Vitals sejam, antes de tudo, 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 de serem lançados para os usuários. Também é a melhor maneira de capturar as regressões de desempenho antes que elas aconteçam.

As ferramentas abaixo podem ser usadas para medir as Core Web Vitals em um ambiente de laboratório:

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.

A performance de um site pode variar drasticamente com base nos recursos do dispositivo do usuário, nas condições de rede, nos outros processos que podem estar em execução no dispositivo e em como ele está interagindo com a página. Na verdade, a pontuação de cada uma das Core Web Vitals pode ser afetada pela interação do usuário. Somente a medição de campo pode capturar um quadro completo com precisão.

Recomendações para melhorar sua pontuação

Depois de avaliar as Core Web Vitals 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 Core Web Vitals:

• Otimize a LCP
• Otimize a FID
• Otimize a CLS

Outras Métricas da Web

As Core Web Vitals são métricas essenciais para entender e oferecer uma ótima experiência do usuário, mas há outras métricas vitais também.

Essas outras Métricas da Web geralmente funcionam como proxy ou como métricas complementares para as Core Web Vitals, para ajudar a capturar uma parte maior da experiência ou ajudar a diagnosticar um problema específico.

Por exemplo, as métricas Tempo para 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 do servidor lentos 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 problemas de interatividade que podem afetar a FID. No entanto, elas não fazem parte do conjunto de Core Web Vitals porque não são mensuráveis por campo nem refletem um resultado centrado no usuário.

Métricas da Web em evolução

As Métricas da Web e as Core Web Vitals 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 melhorias ou adições futuras sejam esperadas.

As Core Web Vitals são relevantes para todas as páginas da Web e aparecem nas ferramentas relevantes do Google. As mudanças nessas métricas terão um amplo impacto. Por isso, os desenvolvedores esperam que as definições e os limites das Core Web Vitals sejam estáveis, e as atualizações tenham aviso prévio e uma frequência anual previsível.

As outras Métricas da Web geralmente são específicas do contexto ou da ferramenta e podem ser mais experimentais do que as Core Web Vitals. Assim, as definições e os limites deles podem mudar com maior frequência.

Para todas as Métricas da Web, as mudanças vão ser documentadas de maneira clara neste CHANGELOG público.