Publicado em 4 de maio de 2020
Otimizar a 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, as Core Web Vitals podem ajudar a quantificar a experiência no seu site e identificar oportunidades de melhoria.
Visão geral
As Métricas da Web são uma iniciativa do Google para unificar as orientações relacionadas a indicadores de qualidade essenciais para proporcionar uma ótima experiência do usuário na Web.
Ao longo dos anos, o Google disponibilizou várias ferramentas para medir e informar sobre a performance. Alguns desenvolvedores são especialistas no uso dessas ferramentas, enquanto outros acham 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 das Core Web Vitals é 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 de indicadores que se aplicam a todas as páginas da Web, precisam ser medidas por todos os proprietários de sites e são exibidas em todas as ferramentas do Google. Cada uma das Core Web Vitals representa um aspecto diferente da experiência do usuário, é mensurável no campo e reflete a experiência real de um resultado centrado no usuário.
As métricas que compõem as Core Web Vitals vão evoluir com o tempo. O conjunto atual se concentra em três aspectos da experiência do usuário (carregamento, interatividade e estabilidade visual) e inclui estas métricas (e os respectivos limites):
- Maior exibição de conteúdo (LCP): mede o desempenho de carregamento. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer em 2,5 segundos após o início do carregamento da página.
- Interaction to Next Paint (INP): mede a interatividade. Para oferecer uma boa experiência ao usuário, as páginas precisam ter uma INP de 200 milissegundos ou menos.
- Cumulative Layout Shift (CLS, na sigla em inglês): avalia a estabilidade visual. Para oferecer uma boa experiência ao usuário, as páginas precisam manter uma CLS de 0,1 ou menos.
Para garantir que você atinja a meta recomendada para essas métricas para a maioria dos usuários, um bom limite é o 75º percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.
As ferramentas que avaliam a conformidade com as Core Web Vitals precisam considerar que uma página foi aprovada se ela atende aos objetivos recomendados no 75º percentil para as três métricas das Core Web Vitals.
Ciclo de vida
As métricas na faixa das Core Web Vitals passam por um ciclo de vida que consiste em três fases: experimental, pendente e estável.
Cada fase é projetada para sinalizar aos desenvolvedores como eles devem pensar em cada métrica:
- As métricas experimentais são as 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 as futuras Core Web Vitals que passaram pela fase 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 essencial para uma ótima experiência do usuário.
As Core Web Vitals estão nos estágios do ciclo de vida a seguir:
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 analisando o problema a ser resolvido e, possivelmente, iterando o que as métricas anteriores não conseguiram resolver. Por exemplo, Interaction to Next Paint (INP) foi desenvolvido inicialmente como uma métrica experimental para resolver os problemas de desempenho no momento da execução presentes na Web de maneira mais abrangente do que o First Input Delay (FID).
A fase experimental do ciclo de vida das Core Web Vitals 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 provou sua eficácia, ela se torna uma métrica pendente. Por exemplo, o INP foi promovido em 2023 de experimental para pendente com a intenção de desativar o FID.
As métricas pendentes são mantidas nessa fase por pelo menos seis meses para dar tempo ao ecossistema 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 do Core Web Vital é finalizada, ela se torna uma métrica estável. Nesse momento, a métrica pode se tornar uma das Core Web Vitals.
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 um Core Web Vital será comunicada claramente na documentação oficial da métrica e no registro de alterações dela. As Core Web Vitals também sã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 da Web. Por isso, ela se comprometeu a mostrar 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 relatório de experiência do usuário do Chrome coleta dados de medição de usuários reais e anônimos para cada Core Web Vital. Esses dados permitem que os proprietários de sites avaliem rapidamente a performance sem precisar instrumentar manualmente as análises nas páginas. Além disso, eles 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 | |||
| Página "PageSpeed Insights" | |||
| Search Console (relatório de 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. Por isso, recomendamos que os sites configurem o monitoramento de usuários reais.
Medir as Core Web Vitals em JavaScript
Todas as Core Web Vitals podem ser medidas 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 pequeno wrapper pronto para produção em torno das APIs da Web que mede cada métrica de uma maneira que corresponda com precisão à forma como elas são informadas por todas as ferramentas do Google listadas anteriormente.
Com a biblioteca web-vitals, é possível medir cada métrica chamando uma única função. Consulte a documentação para conferir detalhes completos sobre o uso e a 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 o site para usar a biblioteca web-vitals para 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 saber se as páginas estão atendendo aos limites recomendados para pelo menos 75% das visitas.
Embora alguns provedores de análise tenham suporte integrado às Core Web Vitals, mesmo aqueles que não precisam incluir recursos básicos de métricas personalizadas que permitem medir as Core Web Vitals na ferramenta deles.
Os desenvolvedores que preferem medir essas métricas diretamente usando as APIs da Web 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 as Métricas da Web no 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 do laboratório é a melhor maneira de testar o desempenho dos recursos durante o desenvolvimento, antes de serem lançados para os usuários. Essa também é a melhor maneira de detectar regressões de desempenho 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 | |||
| Lighthouse | (use o TBT) |
Embora a medição de laboratório seja uma parte essencial para oferecer ótimas experiências, ela não substitui a medição de campo.
O desempenho de um site pode variar significativamente com base nas capacidades do dispositivo de um usuário, nas condições de rede, em outros processos que podem estar em execução no dispositivo e na forma como ele interage 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 com precisão o panorama 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 um dos Core Web Vitals:
Existem 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 conferir uma lista das principais recomendações da equipe do Chrome.
Outras Métricas da Web
Embora as Core Web Vitals sejam essenciais para entender e oferecer uma ótima experiência do usuário, há outras métricas de apoio.
Essas outras métricas podem servir como proxy ou como métricas complementares para as três Core Web Vitals para capturar uma parte maior da experiência ou ajudar a diagnosticar um problema específico.
Por exemplo, as métricas Tempo até o primeiro byte (TTFB) e Primeira exibição significativa (FCP) 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, uma métrica como o Tempo total de bloqueio (TBT) é vital para detectar e diagnosticar possíveis problemas de interatividade que podem afetar a INP. No entanto, ele não faz parte do conjunto das principais métricas da Web porque não é possível medir em campo nem reflete um resultado centrado no usuário.
Mudanças nas Métricas da Web
As Core Web Vitals e as 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 podem ser melhorados ou adicionados no futuro.
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 de grande alcance. Por isso, os desenvolvedores precisam esperar que as definições e os limites das Core Web Vitals sejam estáveis, e as atualizações sejam avisadas com antecedência e tenham um ritmo 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 principais. Por isso, as definições e os limites podem mudar com mais frequência.
Em todas as Métricas da Web, as mudanças serão documentadas claramente neste CHANGELOG público.