Como identificar e otimizar imagens acima da dobra que atrasam o carregamento inicial
Oi! Aqui é a Sensei da GeHost 🧘♀️ Hoje eu quero te ensinar uma coisinha simples que costuma fazer uma diferença enorme na velocidade do seu site: as imagens acima da dobra.
"Acima da dobra" (em inglês, above the fold) é tudo aquilo que o visitante vê na tela sem precisar rolar — geralmente o banner principal, a logo grande, a foto de capa do topo. Se essas imagens forem pesadas demais, o navegador trava esperando elas carregarem antes de mostrar qualquer coisa, e o visitante tem a sensação de que o site "está lento" — mesmo que o resto da página carregue rápido depois.
Pense assim: a primeira impressão de velocidade do seu site é dada pelo que aparece primeiro na tela. Uma imagem de topo mal otimizada é como abrir a porta da loja e deixar o cliente esperando no vão da entrada.
Passo 1 — Descubra QUAIS imagens estão pesando
- Abra seu site em uma aba anônima do navegador.
- Clique com o botão direito em qualquer parte da página e escolha "Inspecionar" (ou aperte F12).
- Vá até a aba "Rede" / "Network" e recarregue a página.
- Ordene os arquivos pelo tamanho (coluna "Size"/"Tamanho"). As imagens que aparecem no topo dessa lista, com tamanhos acima de 300–500 KB, são as suspeitas.
Se preferir algo mais visual e sem mexer em código, ferramentas gratuitas como o PageSpeed Insights (do próprio Google) também apontam exatamente quais imagens estão "acima da dobra" e pesando o carregamento inicial — é só colar o link do seu site lá.
Passo 2 — Confira o tamanho real dos arquivos no seu painel
Você pode dar uma olhada nas imagens hospedadas diretamente no Gerenciador de Arquivos do seu painel cPanel, dentro da pasta public_html. Lá dá pra ver o tamanho de cada arquivo de imagem sem precisar de ferramenta externa.
Se encontrar uma imagem de vários megabytes usada como banner do topo, ali já está seu principal vilão de velocidade.
Passo 3 — Otimize antes de subir (o segredo está aqui!)
- Redimensione para o tamanho real de exibição. Se a imagem aparece com 1200px de largura na tela, não faz sentido subir um arquivo de 4000px — isso é peso jogado fora.
- Comprima a imagem. Existem compressores gratuitos e confiáveis (ex.: squoosh.app, tinypng.com) que reduzem o peso do arquivo com pouquíssima perda visual de qualidade.
- Prefira formatos modernos como WebP (ou AVIF, quando disponível) em vez de JPG/PNG puro — eles entregam a mesma qualidade visual com um arquivo bem menor.
- Evite imagens desnecessariamente grandes de fundo (background) — se um banner pode ser mais simples, menos é mais quando o assunto é velocidade.
Dica de ouro da Sensei: se a imagem de topo do seu site pesa mais de 500 KB, é quase certeza que dá pra cortar pela metade sem ninguém perceber diferença visual — só a velocidade de carregamento vai melhorar.
Passo 4 — Deixe o "abaixo da dobra" esperar (lazy loading)
Imagens que só aparecem quando o visitante rola a página não precisam carregar junto com o topo. A maioria dos sites feitos em WordPress e outras plataformas modernas já aplica isso automaticamente (chamado de lazy loading), carregando essas imagens só quando estão perto de entrar na tela. Se o seu site foi feito sob medida, vale perguntar ao desenvolvedor se esse recurso está ativado — ele ajuda bastante o carregamento geral, mas o foco principal continua sendo aliviar o peso do que aparece primeiro.
Passo 5 — Sempre informe as dimensões da imagem no código
Quando a imagem já tem largura e altura definidas no HTML (atributos width e height), o navegador reserva o espaço dela na tela antes mesmo de baixar o arquivo. Isso evita aquele "pulo" incômodo de layout enquanto a página carrega — e também conta pontos na velocidade percebida pelo visitante.
Resumo rapidinho
- Identifique as imagens do topo com o "Inspecionar" do navegador ou uma ferramenta como o PageSpeed Insights.
- Redimensione para o tamanho real de exibição.
- Comprima e, se possível, converta para WebP.
- Deixe o carregamento tardio (lazy loading) cuidar do que está mais abaixo na página.
- Sempre defina largura e altura das imagens no código.
Se depois de aplicar essas dicas o site continuar lento, ou se você não tiver certeza de como mexer em alguma dessas configurações no seu site, é só chamar o suporte da GeHost pelo painel.gehost.com.br — a gente te ajuda a destravar isso. 💛
Um abraço da Sensei, e bons carregamentos rápidos! 🚀