Otimize o seu site para os Core Web Vitals

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.

Nota

Nem todos os widgets personalizados são lentos no carregamento. Isso depende de como o widget personalizado foi criado.

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.

e-commerce

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

Como corrigir

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

  • Adicione conteúdo acima do Store em vez de deixar o Store no topo da página Store . Assim, o 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 do 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 o 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.

Nota

"Imagem grande" é uma imagem que ocupa a maior parte da largura 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.

Esse artigo foi útil?
Usuários que acharam isso útil: 0 de 1
×

Faça o login como Profissional

O Suporte prioritário por telefone está disponível exclusivamente para profissionais. Acesse a sua conta Pro agora para ver nossos números de suporte internacional.

Registre-se
Não é profissional? Adquira um plano Pro!