Publicado em 4 de maio de 2020, atualizado pela última vez em 31 de outubro de 2024
Otimizar a qualidade da experiência do usuário é fundamental para ter sucesso em longo prazo em qualquer site. Não importa se você é proprietário de uma empresa, profissional de marketing ou desenvolvedor, as Métricas da Web podem ajudar a quantificar a experiência no seu site e identificar oportunidades de melhoria.
Visão geral
O Web Vitals é uma iniciativa do Google para unificar as orientações relacionadas a indicadores de qualidade essenciais para proporcionar uma boa experiência do usuário na Web.
O Google oferece várias ferramentas há anos para medir e gerar relatórios de performance. Alguns desenvolvedores são especialistas no uso dessas ferramentas, enquanto outros acham que a abundância de ferramentas e métricas dificulta o acompanhamento.
Os proprietários de sites não precisam ser especialistas em performance para entender a qualidade da experiência que oferecem aos usuários. A iniciativa Métricas da Web visa simplificar o cenário e ajudar os sites a se concentrarem nas métricas mais importantes, as Core Web Vitals.
Core Web Vitals
As Core Web Vitals são um subconjunto das Métricas da Web que se aplicam a todas as páginas da Web, devem ser medidas por todos os proprietários de sites e serão mostradas em todas as ferramentas do Google. Cada uma das Core Web Vitals representa uma faceta distinta da experiência do usuário, é mensurável em campo e reflete a experiência real de um resultado crítico centrado no usuário.
As métricas que compõem os Core Web Vitals vão evoluir ao longo do tempo. O conjunto atual foca em três aspectos da experiência do usuário: carregamento, interatividade e estabilidade visual e inclui estas métricas (e seus respectivos limites):
- Largest Contentful Paint (LCP): avalia o desempenho do carregamento. Para proporcionar uma boa experiência do usuário, o LCP deve ocorrer dentro de 2,5 segundos após o início do carregamento da página.
- Interaction to Next Paint (INP): mede a interatividade. Para proporcionar uma boa experiência do usuário, as páginas devem ter um tempo de INP de 200 milissegundos ou menos.
- Cumulative Layout Shift (CLS): avalia a estabilidade visual. Para proporcionar uma boa experiência do usuário, as páginas devem manter um CLS de 0,1 ou menos.
Para garantir que você esteja atingindo a meta recomendada para essas métricas para a maioria dos seus usuários, um bom limite a ser medido é o 75º percentil de carregamentos de página, segmentado entre dispositivos móveis e desktops.
As ferramentas que avaliam a conformidade com as Core Web Vitals devem considerar uma página aprovada se ela atender às metas recomendadas no 75º percentil para todas as três métricas das Core Web Vitals.
Ciclo de vida
As métricas das Core Web Vitals passam por um ciclo de vida que consiste em três fases: experimental, pendente e estável.
Cada fase foi projetada para indicar aos desenvolvedores como eles devem pensar em cada métrica:
- As métricas experimentais são Core Web Vitals em potencial que ainda podem passar por mudanças significativas, dependendo dos testes e do feedback da comunidade.
- As métricas pendentes são futuras Core Web Vitals que passaram pela fase de testes 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 ótimas experiências do usuário.
As Core Web Vitals estão nas seguintes fases do ciclo de vida:
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 explorando o problema a ser resolvido e, possivelmente, iterando sobre o que as métricas anteriores não conseguiram resolver. Por exemplo, a Interaction to Next Paint (INP) foi inicialmente desenvolvida como uma métrica experimental para resolver os problemas de performance de execução presentes na Web de forma mais abrangente do que a First Input Delay (FID).
A fase experimental do ciclo de vida das Core Web Vitals também tem como objetivo oferecer flexibilidade no desenvolvimento de uma métrica, identificando bugs e até mesmo explorando mudanças na definição inicial. Essa 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 comprovou sua eficácia, ela se torna uma métrica pendente. Por exemplo, a INP foi promovida em 2023 do status experimental para pendente com a intenção de desativar a FID.
As métricas pendentes são mantidas nessa fase por um mínimo de seis meses para dar tempo ao ecossistema de se adaptar. O feedback da comunidade continua sendo um aspecto importante dessa fase, à medida que mais desenvolvedores começam a usar a métrica.
Estável
Quando uma métrica candidata das Core Web Vitals é finalizada, ela se torna uma métrica estável. É quando a métrica pode se tornar uma Core Web Vital.
As métricas estáveis têm suporte ativo e podem estar sujeitas a correções de bugs e mudanças de definição. As métricas estáveis das Core Web Vitals não mudam mais de uma vez por ano. Qualquer mudança em uma Core Web Vital será comunicada claramente na documentação oficial da métrica, bem como no registro de mudanças dela. As Core Web Vitals também são incluídas em todas as avaliações.
Ferramentas para medir e gerar relatórios das Core Web Vitals
O Google acredita que as Core Web Vitals são essenciais para todas as experiências da Web. Como resultado, ele está comprometido em mostrar essas métricas em todas as ferramentas mais usadas. As seções a seguir detalham quais ferramentas têm suporte para as Core Web Vitals.
Ferramentas de campo para medir as Core Web Vitals
O Chrome User Experience Report coleta dados de medição anônimos e reais do usuário para cada Core Web Vital. Esses dados permitem que os proprietários de sites avaliem rapidamente a performance sem precisar instrumentar manualmente a análise nas páginas e alimentam ferramentas como o Chrome DevTools, o PageSpeed Insights e o relatório Core Web Vitals do Search Console.
| LCP | INP | CLS | |
| Chrome User Experience Report | |||
| Chrome DevTools | |||
| PageSpeed Insights | |||
| Search Console (relatório Core Web Vitals) |
Os dados fornecidos pelo Chrome User Experience Report oferecem uma maneira rápida de avaliar a performance dos sites, mas não fornecem a telemetria detalhada por visualização de página, que geralmente é necessária para diagnosticar, monitorar e reagir rapidamente a regressões. Como resultado, recomendamos que os sites configurem o próprio monitoramento de usuários reais.
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 medir 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 subjacentes que mede cada métrica de uma maneira que corresponde com precisão a como elas são informadas por todas as ferramentas do Google listadas anteriormente.
Com a biblioteca web-vitals, a medição de cada métrica pode ser feita chamando uma única função. Consulte a documentação para detalhes completos de uso e API.
import {onCLS, onINP, 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);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Depois de configurar seu site para usar a biblioteca web-vitals para medir e enviar os dados das Core Web Vitals para um endpoint de análise, a próxima etapa é agregar e gerar relatórios sobre esses dados para saber se as páginas estão atendendo aos limites recomendados para pelo menos 75% das visitas à página.
Embora alguns provedores de análise tenham suporte integrado para métricas das Core Web Vitals, mesmo aqueles que não têm devem incluir recursos básicos de métricas personalizadas que permitem medir as Core Web Vitals na ferramenta.
Os desenvolvedores que preferem medir essas métricas diretamente usando as APIs da Web subjacentes podem usar estes guias de métricas para detalhes de implementação:
Para mais orientações sobre como medir essas métricas usando serviços de análise conhecidos ou suas próprias ferramentas de análise internas, consulte Práticas recomendadas para medir os Web Vitals em campo.
Ferramentas de 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 podem ser medidas no laboratório.
A medição de laboratório é a melhor maneira de testar a performance dos recursos durante o desenvolvimento, antes que eles sejam lançados para os usuários. Também é a melhor maneira de detectar regressões de performance antes que elas aconteçam.
As ferramentas a seguir podem ser usadas para medir as Core Web Vitals em um ambiente de laboratório:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | |||
| Farol | (usar TBT) |
Embora a medição de laboratório seja uma parte essencial da entrega de ótimas experiências, ela não substitui a medição de campo.
A performance de um site pode variar substancialmente com base nos recursos do dispositivo de um usuário, nas condições de rede, em quais outros processos podem estar em execução no dispositivo e como eles estão interagindo com a página. Na verdade, a pontuação de cada uma das métricas das Core Web Vitals 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
Os guias a seguir oferecem recomendações específicas sobre como otimizar suas páginas para cada uma das Core Web Vitals:
Há muitas maneiras de melhorar as Core Web Vitals, e cada abordagem tem níveis variados de impacto, relevância e facilidade de uso para cada situação. Consulte As maneiras mais eficazes de melhorar as Core Web Vitals para uma lista curta das principais recomendações da equipe do Chrome.
Outras Web Vitals
Embora as Core Web Vitals sejam as métricas essenciais para entender e oferecer uma ótima experiência do usuário, há outras métricas de suporte.
Essas outras métricas podem servir como proxy ou como métricas complementares para as três Core Web Vitals, para ajudar a capturar uma parte maior da experiência ou para ajudar a diagnosticar um problema específico.
Por exemplo, as métricas Time to First Byte (TTFB) e First Contentful Paint (FCP) são aspectos vitais da experiência de carregamento e são úteis para diagnosticar problemas com a LCP (tempos de resposta lentos do servidor ou recursos de renderização de bloqueio, respectivamente).
Da mesma forma, uma métrica como Total Blocking Time (TBT) é uma métrica de laboratório essencial para detectar e diagnosticar possíveis problemas de interatividade que podem afetar a INP. No entanto, ela não faz parte do conjunto de Core Web Vitals porque não é mensurável em campo nem reflete um resultado centrado no usuário.
Mudanças nos Web Vitals
As Métricas da Web e as Core Web Vitals representam os melhores indicadores disponíveis para os desenvolvedores medirem a qualidade da experiência na Web, mas esses indicadores não são perfeitos e melhorias ou adições futuras são 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 impacto abrangente. Portanto, os desenvolvedores devem esperar que as definições e os limites das Core Web Vitals sejam estáveis e que as atualizações tenham aviso prévio e uma cadê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. Portanto, as definições e os limites delas podem mudar com maior frequência.
Para todos os Web Vitals, as mudanças serão claramente documentadas neste registro de mudanças público CHANGELOG.