Para ajudar você a otimizar seu site para as Core Web Vitals do Google, identificamos diversas áreas problemáticas em potencial e como atualizá-las para melhorar suas pontuações nas Core Web Vitals. Para obter mais informações sobre o que cada uma das Core Web Vitals mede, como medi-las e as pontuações ideais, consulte Introdução às Core Web Vitals.
Widgets personalizados e pesados
Widgets personalizados e pesados podem ser lentos porque carregam conteúdo de um serviço de terceiros, o que exige a chamada de uma API externa para recuperar e, em seguida, carregar o conteúdo.
Observação:
Nem todos os widgets personalizados demoram a carregar. Isso depende de como o widget personalizado foi construído.
Widgets pesados: Mapa, Feed do Twitter, Curtir no Facebook, Feed/Página do Facebook, Comentários do Facebook, Áudio (Soundcloud, Mixtape), Vídeo (Personalizado, Youtube, Vimeo), Galeria de Fotos, Apresentação de Slides de Imagens, Animações Lottie, Múltiplas Localizações, Google Agenda e Disqus.
Como consertar
Para melhorar suas pontuações nos Indicadores Vitais da Web Principais:
- Remova widgets personalizados/pesados da área superior da sua página e mova-os para baixo. Isso evita que eles impactem negativamente o CLS e o FID, carregando e empurrando o conteúdo abaixo deles para baixo na página.
- Evite adicionar vários widgets personalizados/pesados na mesma página. Cada widget tem tempos de carregamento diferentes, o que pode diminuir o LCP (Loading Content Performance).
- Se um widget personalizado estiver causando FID (Fault Information Destruction), você pode pedir ao seu desenvolvedor para melhorar a forma como o conteúdo é renderizado e buscado, usando técnicas como carregamento assíncrono, busca de dados fora da thread principal e outras.
Fontes
As fontes da web podem tornar seu site mais lento, pois o navegador precisa baixar e carregar a família de fontes completa para cada combinação de fonte e peso. As fontes são baixadas e integradas automaticamente no HTML, com tamanho de até 50 KB. Isso acelera a renderização de fontes personalizadas pelo navegador e ajuda a evitar erros de carregamento de página (CLS). No entanto, isso nem sempre é suficiente, e é por isso que recomendamos usar, no máximo, duas famílias de fontes diferentes e apenas alguns pesos de cada uma.
Como consertar
Para melhorar suas pontuações no Web Vitals:
- Se você tiver mais de duas fontes aplicadas, remova-as de elementos ou widgets específicos do seu site. Use fontes globais para aplicar apenas as fontes e pesos necessários. Depois disso, somente as fontes indispensáveis para a exibição correta do texto serão baixadas.
Gerenciador de tags do Google
O Google Tag Manager pode baixar bibliotecas e códigos extras que você não precisa, o que pode diminuir o LCP (custo de aquisição de código).
Como consertar
Para melhorar suas pontuações no Web Vitals:
- Se possível, remova o Google Tag Manager. Se você utiliza apenas uma ou duas tecnologias de rastreamento, talvez não valha a pena implementar o Google Tag Manager.
- Se você implementar o Google Tag Manager, siga nosso guia de rastreamento do Google Tag Manager. Isso ajuda a garantir que o código de rastreamento seja carregado corretamente e não deixe o site lento.
- Não coloque o Google Tag Manager no cabeçalho do site. Isso fará com que ele seja carregado primeiro, antes de outros elementos importantes do site.
Imagens e vídeos de fundo
Imagens e vídeos de fundo são geralmente os maiores recursos que os navegadores baixam em seu site. Quando há muitas imagens, uma imagem grande acima da dobra ou um vídeo, isso pode causar um atraso no LCP (Loading Content Processing) e um aumento no CLS (Current Lifetime Storage), porque o navegador precisa baixar os elementos antes que eles possam ser renderizados. Isso geralmente acontece com imagens/vídeos de fundo grandes, apresentações de slides de imagens, imagens de fundo com outra imagem sobreposta ou com várias imagens grandes em sequência no topo da página.
Observação:
Por "imagem grande" entendemos uma imagem que ocupa a maior parte da largura da página.
Como consertar
Para melhorar suas pontuações no Web Vitals:
- Utilize apenas uma única imagem acima da dobra.
- Se precisar de várias imagens acima da dobra, reduza o tamanho da imagem para um ícone ou miniatura.
- Mova vídeos de fundo e apresentações de slides para a parte inferior da página. Se precisar de uma apresentação de slides, limite-a a três imagens ou menos.