NEWS

Tudo sobre os Core Web Vitals e o que você precisa fazer.

É um projeto que unifica os sinais de qualidade que são essenciais para que um usuário tenha a melhor experiência na web, seja por desktop ou dispositivos móveis.

O que são Core Web Vitals?

2/12

E você sabe

quais são os critérios dos

Core Web Vitals?

3/12

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 que 2,5 segundos.

4/12

. . .

» Carregamento

» Melhore o tempo de resposta do servidor. » Elimine recursos JavaScript e CSS de bloqueio. » Diminua o tempo de carregamento de recursos. » Otimize a renderização de elementos front-end.

5/12

Como otimizar o LCP:

Mede o tempo que demora para o usuário ter uma resposta depois de executar algum evento dentro do site. O valor ideal do FID é 100 milissegundos. Rápido, não?

6/12

. . .

» Interatividade

» Reduza o impacto do código de terceiros. » Reduza o tempo de execução do JavaScript. » Minimize o trabalho do encadeamento principal. » Mantenha a contagem de pedidos (requisições) baixa e os tamanhos de transferência pequenos.

7/12

Como otimizar o FID:

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 valor ideal do CLS é 0,1.

8/12

. . .

» Estabilidade visual

» Sempre inclua atributos de dimensões exatas nas imagens. » 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.

9/12

Como otimizar o CLS:

E AGORA?

Veja na  prática o

Core Web Vitals.

10/12

11/12

» E aí, gostou?

Compartilhe

Confira o "Guia Fundamental dos Core Web Vitals"