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.
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.
"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.