O que são as Core Web Vitals

Como já falamos, as Core Web Vitals focam em 3 aspectos: velocidade de carregamento, interatividade e estabilidade visual.

 

Como testar seu site para as Core Web Vitals

As principais ferramentas de SEO do mercado já estão se adaptando às Core Web Vitals. O Google Search Console, como já foi apresentado, possui relatórios dedicados para acompanhar as métricas. A Semrush, uma das ferramentas de SEM mais populares do mundo, também já está preparada.

Além disso, você também pode usar o Google PageSpeed Insights para testar qualquer página; Ele também utiliza Field Data para seus resultados, trazendo métricas de acordo com o que o Google está levando em consideração.

 

Também é possível utilizar o Lighthouse para os testes, mas vale destacar que este utiliza Lab Test Data, e por isso não apresenta o First Input Delay (FID).

Vamos entender melhor cada uma das “principais métricas da web” e como podemos otimizar o site?

 

LCP – Largest Contentful Paint

Podemos definir Cumulative Layout Shift como a métrica que nos ajuda a mensurar mudanças inesperadas nas páginas, ou seja, sua estabilidade visual. Essas mudanças ocorrem sempre que um elemento visível muda de um quadro renderizado para outro.

Já ouviu a frase “uma casa não é um lar sem um cachorro”? Aqui podemos trocar os termos “casa e lar” por página web e “cachorro” pelo seu maior elemento, pois é só com seu carregamento que o Google considera que a página realmente “carregou”.

 

LCP é a métrica que representa a percepção de carregamento das páginas, sendo considerada a forma mais correta de se mensurar a velocidade do site, pois calcula o tempo do início do carregamento da página até a renderização do seu maior elemento.

Os elementos que são considerados no cálculo são:

  • <img>
  • <image> dentro de um elemento <svg>
  • <video>
  • Elemento com imagem de background, carregado via função URL()
  • Elementos block-level contendo textos

A métrica foi criada com base em discussões no W3C Web Performance Working Group e estudos desenvolvidos pelo time do Google. No fim das contas, o melhor caminho apontado para medir quando o conteúdo de uma página realmente é carregado é quando seu maior elemento foi renderizado.

 

De acordo com o Google, podemos considerar 2,5 segundos ou menos como um bom tempo de LCP, entre 2,5 e 4 segundos é um tempo razoável, que ainda exige melhorias, e acima de 4 segundos é considerado um LCP ruim, que precisa de melhorias urgentes.

Como melhorar o LCP

O LCP é afetado principalmente por servidor com tempo de resposta lento, Javascript e CSS de bloqueio de renderização, recursos com tempo de carregamento lento e a pela renderização “client-side”.

Algumas ações podem otimizar o tempo de resposta do servidor:

  • Otimizar seu servidor;
  • Utilizar CDN;
  • Ativar o cache;
  • Usar Service Worker para páginas HTML “cache-first”;
  • Antecipar conexões de terceiros;
  • Minificar e adiar JavaScript e CSS que não são críticos para a página.

Para se aprofundar em cada uma das ações, confira o guia de otimização de LCP, criado pelo time de desenvolvedores do Google (em inglês).

 

FID – First Input Delay

Se com o LCP conseguimos entender o tempo de carregamento do site, com o FID medimos a “primeira impressão” do usuário. E você não quer deixar uma primeira impressão ruim, certo?

O FID calcula o tempo entre a primeira interação do usuário com a página (como um clique ou o uso de algum Javascript) até o momento em que o navegador começa a processar os eventos de resposta. É importante destacar que não mede o carregamento em si: o FID mede apenas o atraso causado entre a interação do usuário e o início do carregamento, considerando cada acesso ao site.

Exemplo de FID

Ao acessar um site e já ter acesso ao conteúdo da página, o usuário já clica em um link para ir para outra página, sem saber que ainda existem tarefas sendo executadas. Vamos supor que o clique foi feito logo após uma longa tarefa iniciar o carregamento: esse clique só vai iniciar o carregamento da ação após a finalização da tarefa. Esse tempo de espera é o FID para este usuário.

Por isso o FID só pode ser mensurado com Field Data, utilizando métricas reais de usuários como base, e não Lab Test Data. Caso utilize uma ferramenta com base em dados de laboratório, como o Lighthouse, você pode considerar o Total Blocking Time (TBT), que também é uma métrica de interatividade.

De acordo com o Google, um FID abaixo de 100 milissegundos é considerado bom, entre 100 e 300 milissegundos é um tempo razoável, que ainda exige melhorias, e acima de 300 milissegundos é considerado um FID ruim, que precisa de melhorias urgentes.

Como otimizar o FID

Geralmente temos um FID lento por execuções pesadas de JavaScript. Assim, ao otimizar como o JavaScript analisa, compila e executa na página terá impacto positivo direto no FID.

Algumas ações que podem reduzir o FID das páginas:

  • Dividir Javascript pesados em tarefas menores e assíncronas;
  • Otimizar as página para interaction readiness;
  • Usar um web worker;
  • Reduzir o tempo de execução do JavaScript.

Para se aprofundar em cada uma das ações, confira o guia de otimização de FID, criado pelo time de desenvolvedores do Google (em inglês).

CLS – Cumulative Layout Shift

É importante ressaltar que apenas são consideradas as mudanças que ocorrem quando os elementos existentes mudam sua posição inicial. Assim, mudança de tamanho de elementos ou um novo elemento é adicionado ao DOM não contam – desde que a mudança tenha impacto na posição de outros elementos visíveis.

Para calcular sua pontuação, o navegador usa como base o tamanho da janela de visualização e o movimento dos elementos. Um CLS abaixo de 0,1 é considerado bom, entre 0,1 e 0,25 é razoável, que ainda exige melhorias, e acima de 0,25 é considerado um CLS ruim, que precisa de melhorias urgentes.

Como otimizar o CLS

Em geral, o aumento no CLS é causado por recursos como imagens, iframes e anúncios sem dimensões pré-definidas, conteúdo incluído de forma dinâmica e problemas no carregamento das fontes.

Algumas ações que podem reduzir o CLS das páginas:

  • Incluir atributos de width e height para imagens e vídeos;
  • Reservar espaços para anúncios e conteúdo dinâmico;
  • Usar uma API de carregamento de fontes pode reduzir seu tempo de carregamento.

Para se aprofundar em cada uma das ações, confira o guia de otimização de CLS, criado pelo time de desenvolvedores do Google (em inglês).

Lembrando que, ao realizar testes das páginas em ferramentas como o PageSpeed Insights (já mencionada), a própria ferramenta indica melhorias para melhorar a avaliação do site.