Desempenho & CDN 35 visualizações

Como identificar imagens que estão deixando o site pesado usando o PageSpeed Insights

Ver no WHMCS

Como identificar imagens que estão deixando o seu site pesado (com o PageSpeed Insights)

Oi, tudo bem? Aqui é a Sensei da GeHost 🥋 e hoje eu vou te ensinar um truque simples (e gratuito!) pra descobrir por que o seu site pode estar demorando pra carregar: quase sempre, o vilão são as imagens grandes demais. Vamos usar uma ferramenta do próprio Google, o PageSpeed Insights, pra encontrar exatamente quais fotos estão pesando no seu site. Bora lá?

Por que isso importa?

Imagens em alta resolução, tiradas direto do celular ou da câmera, costumam ter vários megabytes de tamanho. Quando você sobe uma foto assim "crua" pro seu site, o navegador do visitante precisa baixar esse arquivo gigante antes de mostrar a página — e isso deixa tudo mais lento, principalmente pra quem está no 4G/5G do celular. A boa notícia é que dá pra resolver isso sem complicação.

Passo a passo: usando o PageSpeed Insights

  1. Acesse a ferramenta. Abra o navegador e vá até pagespeed.web.dev (é um site oficial do Google, totalmente gratuito).
  2. Cole o endereço do seu site. Digite a URL completa (ex.: https://seusite.com.br) no campo de busca e clique em "Analisar".
  3. Aguarde a análise. Em alguns segundos, a ferramenta te dá uma nota de 0 a 100 pra versão mobile e pra versão desktop do seu site, junto com uma lista de sugestões de melhoria.
  4. Vá direto na seção de "Oportunidades" (Opportunities). É ali que o Google aponta, um por um, os pontos que mais estão pesando no carregamento — e é onde a gente vai caçar os problemas de imagem.
Dica da Sensei: não se assuste com a nota baixa na primeira análise! É super comum, principalmente em sites com muitas fotos (lojas, portfólios, blogs). O importante é usar o relatório como um mapa pra saber por onde começar a arrumar.

Quais avisos indicam que uma imagem está pesada?

Na lista de oportunidades, fique de olho nestes nomes — eles são os "sinais vermelhos" das imagens:

  • "Dimensionar corretamente as imagens" (Properly size images) — significa que você está enviando uma foto enorme (ex.: 4000px de largura) pra um espaço pequeno na tela (ex.: 400px). O navegador baixa o arquivo inteiro à toa.
  • "Veicular imagens em formatos de última geração" (Serve images in next-gen formats) — indica que suas fotos estão em JPG ou PNG "tradicionais", quando formatos mais modernos (como WebP) deixariam o mesmo visual com um arquivo bem mais leve.
  • "Codificar imagens com eficiência" (Efficiently encode images) — a imagem não passou por nenhuma compressão antes de ser publicada.
  • "Adiar imagens fora da tela" (Defer offscreen images) — imagens lá no rodapé da página estão carregando junto com o topo, mesmo sem o visitante ter rolado até lá ainda.

Como descobrir QUAIS imagens são as culpadas

Clique em cada um desses avisos pra expandir a lista — a ferramenta mostra, com nome de arquivo e miniatura, exatamente quais fotos do seu site estão causando o problema, e ainda estima quanto tempo você economizaria ao corrigir cada uma. É a sua lista de tarefas pronta!

O que fazer depois de identificar as imagens pesadas

  1. Redimensione antes de subir. Ajuste a imagem pro tamanho real que ela vai ocupar na página (evite subir fotos de câmera/celular sem editar).
  2. Comprima o arquivo. Existem ferramentas gratuitas de compressão de imagem que reduzem bastante o tamanho do arquivo sem perder qualidade visível.
  3. Prefira formatos modernos como WebP quando possível — o mesmo visual, com um arquivo bem menor.
  4. Ative o "lazy load" (carregamento preguiçoso), se o seu site permitir — assim as imagens só carregam conforme o visitante rola a página.
Dica da Sensei: se o seu site é feito em WordPress, muitos temas e plugins de otimização já ajudam a fazer isso automaticamente. Se não se sentir confortável mexendo nisso sozinho(a), pode contar com a equipe de desenvolvimento da GeHost — é só abrir um chamado pelo painel.gehost.com.br que a gente te orienta.

Resumindo

O PageSpeed Insights é como um raio-x gratuito do seu site: ele não só te dá uma nota, mas aponta o dedo exatamente pra qual imagem está pesando e o quanto isso está custando de velocidade. Rodando esse teste de tempos em tempos — principalmente depois de subir fotos novas — você mantém seu site rápido, e site rápido é visitante feliz (e cliente que não desiste no meio do carregamento) 💛

Qualquer dúvida, é só chamar a gente. Um abraço da Sensei! 🥋

Precisa de Ajuda?

Nossa equipe está pronta para resolver suas dúvidas.