Para você otimizar o seu site para o Core Web Vitals do Google, identificamos várias áreas potencialmente problemáticas e mostramos como atualizá-las para melhorar suas pontuações nos Core Web Vitals. Para mais informações sobre o que cada Core Web Vital mede, como medir e quais as pontuações ideais, consulte Introdução aos Core Web Vitals.

Widgets personalizados e pesados

Os widgets personalizados e pesados podem ser lentos porque carregam conteúdo de um serviço externo, o que requer a solicitação de uma API externa para recuperar e, em seguida, carregar o conteúdo.

Os Widgets pesados são: Mapa, Feed no Twitter, Curtida no Facebook, Feed/Página do Facebook, Comentários no Facebook, Áudio (Soundcloud, Mixtape), Vídeo (Personalizado, Youtube, Vimeo), Galeria de Fotos, Imagem de Slider, Animações Lottie, Multilocalização, Google Agenda e Disqus.

Como corrigir

Para melhorar suas pontuações do Core Web Vitals:

• Exclua os widgets personalizados ou pesados do topo da sua página e coloque-os mais para baixo. Isso impede que eles atrapalhem o CLS e o FID ao carreganrem e empurrarem o conteúdo mais para baixo na página.

• Evite adicionar vários widgets personalizados ou pesados na mesma página. Cada widget tem um tempo de carregamento próprio, o que pode diminuir o LCP.

• Se um widget personalizado causar FID, você pode pedir para o desenvolvedor melhorar como o conteúdo é processado e buscado, com técnicas como carregamento assíncrono, busca de dados do thread principal e outros.

eCommerce

O Store é carregado dinamicamente com JavaScript. Isso pode afetar o CLS, pois a Store leva mais tempo para carregar do que o resto do conteúdo da página. Por isso, recomendamos deslocar a Store mais para baixo na página.

Como corrigir

Para melhorar suas pontuações do Core Web Vitals:

• Adicione conteúdo acima da Store em vez de deixar a Store no topo da página Store . Assim, a Store fica abaixo da dobra.

• Para criar uma página de categoria, crie você mesmo uma página; ou use o widget Galeria de Produtos da Store. Por terem menos conteúdo e código para renderizar antes de aparecerem, imagens nativas e elementos da galeria de fotos são carregados mais rapidamente do que a Store.

Fontes

Fontes da web podem deixar o site lento, pois o navegador precisa baixar e carregar toda a família de fontes a cada combinação de fonte e peso. As fontes são automaticamente baixadas e incorporadas dentro do HTML, até 50 KB. Isso acelera como o navegador renderiza as fontes personalizadas e evita o CLS. No entanto, isso nem sempre basta; por isso, recomendamos usar, no máximo, duas famílias diferentes de fontes e alguns pesos de cada uma.

Como corrigir

Para melhorar suas pontuações do Web Vitals:

• Se você tiver mais de duas fontes, exclua-as dos elementos ou widgets específicos no site. Use fontes gerais nas fontes e pesos que você precisar. Concluído o processo, são baixadas apenas as fontes necessárias para que o texto apareça corretamente.

Gerenciador de tags do Google

O Google Tag Manager baixa bibliotecas e códigos extras que você não precisa, o que pode diminuir o LCP.

Como corrigir

Para melhorar suas pontuações do Web Vitals:

• Se possível, exclua o Google Tag Manager. Se você tiver apenas uma ou duas tecnologias de rastreamento, talvez não valha a pena usá-lo.

• Se você usar o Google Tag Manager, siga nosso guia de rastreamento do Google Tag Manager. Assim, o código de rastreamento é carregado corretamente e não desacelera o site.

• Não deixe o Google Tag Manager no cabeçalho do site. Isso faz com que ele carregue primeiro, antes de outros elementos importantes.

Imagens e vídeos de fundo

As imagens e vídeos de fundo normalmente são os maiores recursos que os navegadores baixam no site. Imagens demais, uma imagem grande acima da dobra ou um vídeo podem atrasar o LCP e aumentar o CLS, já que o navegador precisa baixar os elementos antes da renderização. Isso acontece normalmente com grandes imagens e vídeos de fundo, imagens em slide, imagens de fundo com outra imagem no topo ou várias imagens grandes enfileiradas no topo da página.

Como corrigir

Para melhorar suas pontuações do Web Vitals:

• Use apenas uma imagem acima da dobra.

• Se precisar de várias imagens acima da dobra, transforme-as em ícone ou miniatura.

• Transfira vídeos de fundo e apresentações de slides mais para baixo na página. Se precisar de uma apresentação de slides, use até três imagens.