O que são Core Web Vitals (Principais métricas da web)?

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Com certeza você já entrou em um site e não teve uma boa experiência, certo? Ele pode ter demorado pra carregar, ficado sem interatividade, movendo elementos na tela repentinamente, entre outras coisas.

Se você tem um site, um dos principais pontos que deve otimizar é a Experiência do Usuário (UX) em todas as páginas. Isso é essencial para manter o engajamento do seu público, reduzir taxa de rejeição e aumentar o tempo de permanência no site.

As Principais Métricas da Web (Core Web Vitals) fazem parte de uma iniciativa do Google para ajudar donos de sites a quantificar a experiência de seus usuários e a identificar oportunidades de melhoria em três aspectos. Atualmente são eles: carregamento, interatividade e estabilidade visual.

▶ Se preferir, acesse "Conheça as principais métricas da web (Core Web Vitals)" no YouTube.

Importante destacar também que o Google já anunciou que essas métricas podem impactar a classificação dos sites nos resultados de pesquisa, então é importante entender como elas funcionam e fazer a otimização, se necessário.

Maior pintura com conteúdo (LCP)

A LCP (Largest Contentful Paint) é uma métrica principal da web com foco no usuário e serve para medir a velocidade de carregamento percebida, ou seja, o tempo que demora para o principal elemento aparecer.

O valor ideal do LCP é menor do que 2,5 segundos.

A imagem a seguir ilustra o processo de carregamento de um site. A métrica Primeira Pintura com Conteúdo (FCP) mede o tempo que demora para algo aparecer na tela, já a métrica LCP detecta a imagem como elemento principal e mede o tempo que essa imagem demora para ser carregada.

O Google PageSpeed é uma ótima ferramenta para testar as métricas da web e ela também informa o elemento da página identificado como principal.

O LCP pode ser melhorado com as seguintes tarefas de otimização:

• Identificar o principal elemento com PageSpeed e otimizar o carregamento
• Melhorar o tempo de resposta do servidor
• Eliminar recursos JavaScript e CSS de bloqueio
• Diminuir tempo de carregamento de recursos
• Otimizar a renderização de elementos front-end

Atraso na primeira entrada (FID)

A FID (First Input Delay) é uma métrica principal da web com foco no usuário e serve para medir o tempo de resposta sobre interatividade, ou seja, o tempo que demora para o usuário ter uma resposta depois que executa algum evento.

O valor ideal do FID é menor do que 100 milissegundos.

O FID pode ser melhorado com as seguintes tarefas de otimização:

• Reduzir o impacto do código de terceiros
• Reduzir o tempo de execução do JavaScript
• Minimizar o trabalho do encadeamento principal
• Manter a contagem de pedidos baixa e os tamanhos de transferência pequenos

Deslocamento de layout cumulativo (CLS)

A CLS (Cumulative Layout Shift) é uma métrica principal da web com foco no usuário e serve para medir a estabilidade visual da página, pois ajuda a quantificar com que frequência os usuários experimentam mudanças inesperadas no layout.

O valor ideal do CLS é menor do que 0,1.

A imagem a seguir ilustra uma página já carregada com um botão onde o usuário "clica" e o bloco de texto verde se move no layout, contribuindo para o CLS que é cumulativo.

As mudanças de posições dos elementos podem ser geradas por imagens sem dimensões definidas, fontes renderizadas que são maiores ou menores que as substitutas ou ainda por anúncios que são carregados dinamicamente.

O Google PageSpeed é uma ótima ferramenta para testar as métricas da web e ela também informa os elementos da página que contribuem para o CLS.

O CLS pode ser melhorado com as seguintes tarefas de otimização:

• Sempre inclua atributos de dimensões exatas nas imagens
• Se seu site utiliza lazy load para imagens, garanta que a troca não mude a posição dos elementos
• Se seu site utiliza fonte personalizada, considere trocar font-display:swap por block
• Se seu site utiliza anúncios, garanta uma área de tamanho fixo para eles, até que sejam carregados

Como medir as métricas da web LCP, FID e CLS

Você pode medir as principais métricas da web com ferramentas de laboratório ou campo.

Testando no laboratório

A medição de laboratório é a melhor maneira de testar as métricas da web durante o desenvolvimento em ambiente simulado, antes de serem liberados para os usuários.

As seguintes ferramentas podem ser usadas para medir as métricas da web em laboratório, considerando as configurações de conexão e dispositivo usados no seu ambiente de trabalho:

• Chrome Dev Tools
• Lighthouse
• JavaScript
• Extensão de navegador

As duas imagens a seguir ilustram testes feitos em laboratório com Lighthouse e extensão Web Vitals para Chrome, respectivamente.

Algumas ferramentas de laboratório não podem medir o FID, pois não há interação do usuário. No entanto, a métrica Tempo Total de Bloqueio (TBT) é mensurável em laboratório e é um excelente parâmetro.

Testando em campo

Os testes em laboratório são importantes, mas não refletem necessariamente como todos os usuários experimentam seu site em ambientes variáveis de conexão com a internet e dispositivos.

A única maneira de realmente saber o desempenho do seu site para seus usuários reais é medir o desempenho conforme esses usuários interagem com ele. Esse tipo de medição é chamado de RUM (Monitoramento Real do Usuário).

Como muitos não possuem ferramentas RUM para testes de campo, o Google fornece algo com objetivo bem parecido, baseado em números reais de usuários.

O Relatório de Experiência do Usuário do Chrome coleta dados reais e anônimos de usuários do seu site para cada Métrica da Web e disponibliza os números em suas principais ferramentas.

Importante destacar que o Google não fornece esses dados reais para todos os sites.

As seguintes ferramentas podem ser usadas para medir as métricas da web em campo, considerando as configurações de conexão e dispositivo de diversos usuários:

• Relatório de experiência do usuário do Chrome
• PageSpeed ​​Insights
• Google Search Console (relatório Core Web Vitals)
• JavaScript

As duas imagens a seguir ilustram dados de testes feitos em campo com PageSpeed e Google Search Console, respectivamente.

Se você não conseguir números de campo para o seu site no PageSpeed ou Google Search Console, você pode utilizar JavaScript para coletar os dados e enviar como métricas personalizadas para o Google Analytics. Não é o foco deste post ensinar como fazer isso, mas é possível encontrar no site web.dev diversos tutoriais relacionados com o assunto.

Outras métricas da web

As principais métricas da Web, apresentadas anteriormente, são críticas para entender e oferecer uma ótima experiência ao usuário, mas também existem outras métricas vitais:

Primeira pintura com conteúdo (FCP)

Mede o tempo desde o início do carregamento da página até quando qualquer parte do conteúdo da página é renderizada na tela. (O tempo ideal é menor que 1 segundo)

Índice de velocidade (SI)

Mede a rapidez com que o conteúdo é exibido visualmente durante o carregamento da página. O Lighthouse captura primeiro um vídeo do carregamento da página no navegador e calcula a progressão visual entre os quadros. (O tempo ideal é menor que 1 segundo)

Tempo para interatividade (TTI)

Mede o tempo desde o início do carregamento da página até quando é renderizada visualmente e seus scripts iniciais (se houver) carregados e prontos para responder de forma confiável aos comandos do usuário rapidamente. (O tempo ideal é menor que 5 segundos)

Tempo total de bloqueio (TBT)

Mede a quantidade total de tempo entre FCP e TTI em que o encadeamento principal foi bloqueado por tempo suficiente para impedir a capacidade de resposta da página aos comandos do usuário. (O tempo ideal é menor que 300 ms)

Reduzir tempos de resposta do servidor (TTFB)

Mede o tempo até o primeiro byte, ou seja, o tempo que leva para o navegador do usuário receber o primeiro byte do conteúdo da página. (O tempo ideal é menor que 200 ms e aceitável em até 600ms)