Como configurar lazy loading de imagens pra acelerar a primeira exibição da página

Como configurar lazy loading de imagens pra acelerar a primeira exibição da página

Oi! Aqui é a Sensei da GeHost 🥋 Hoje vamos falar de um truque simples que faz uma diferença enorme na velocidade do seu site: o lazy loading (carregamento preguiçoso) de imagens.

Se o seu site demora pra abrir, uma das causas mais comuns é o navegador tentando carregar todas as imagens da página de uma vez só — inclusive aquelas lá embaixo, que o visitante só vai ver se rolar a tela. O lazy loading resolve isso: as imagens só carregam quando estão prestes a aparecer na tela do visitante, deixando a primeira exibição bem mais rápida.

💡 Dica da Sensei: imagens costumam ser o maior peso de uma página. Ativar o lazy loading é, na maioria das vezes, a mudança mais simples com o maior ganho de velocidade percebido pelo visitante.

1. Se o seu site é WordPress (o mais comum por aqui)

Boas notícias: as versões atuais do WordPress já vêm com lazy loading nativo ligado por padrão em imagens do conteúdo. Ainda assim, vale conferir e reforçar:

1. Verifique se o seu WordPress e o tema/plugins estão atualizados — o lazy loading nativo depende disso.
2. Se você usa uma loja (WooCommerce) ou um construtor de páginas (Elementor, Divi, etc.), procure nas configurações de desempenho do plugin uma opção chamada "Lazy Load" ou "Carregamento preguiçoso" e ative.
3. Evite empilhar mais de um plugin fazendo a mesma coisa (ex.: um plugin de otimização de imagens junto com um plugin de cache que também faz lazy loading) — isso pode gerar conflito em vez de ganho.

2. Se o seu site é feito à mão (HTML/CSS) ou você quer ajustar manualmente

Dá pra ativar o lazy loading direto no código, com um atributo simples que todos os navegadores modernos entendem. É só adicionar loading="lazy" na tag da imagem:

1. Localize o arquivo HTML/tema onde estão as tags <img> — normalmente dentro da pasta public_html do seu site.
2. Acesse o Gerenciador de Arquivos do cPanel (painel.gehost.com.br) pra editar o arquivo diretamente pelo navegador, se preferir não usar FTP.

3. Abra o arquivo com o editor de código do próprio Gerenciador de Arquivos e localize as imagens que ficam mais abaixo na página (fora da primeira tela visível).
4. Adicione o atributo assim: <img src="foto.jpg" loading="lazy" alt="descrição da imagem">
5. Salve o arquivo e recarregue seu site pra conferir se está tudo certo.

⚠️ Cuidado importante: NÃO aplique loading="lazy" na imagem principal que aparece logo no topo da página (o famoso "banner" ou imagem de destaque). Essa imagem precisa carregar imediatamente — se ela for "preguiçosa" também, o efeito é o contrário: a página parece mais lenta pro visitante, não mais rápida.

3. Depois de ativar, teste

• Abra o site numa aba anônima do navegador e role a página devagar — as imagens de baixo devem aparecer suavemente conforme você desce.
• Confira se nenhuma imagem "sumiu" ou ficou quebrada — às vezes um tema mais antigo pode ter conflito com o atributo.
• Se notar qualquer comportamento estranho, é só chamar o suporte — se o ajuste for logo após a entrega do seu site, ele está coberto pelos 30 dias de suporte gratuito.

Resumindo

Lazy loading é uma mudança pequena, rápida de aplicar e que costuma trazer um ganho real na velocidade da primeira tela do seu site — melhorando a experiência do visitante e, de quebra, ajudando no SEO. Se tiver qualquer dúvida na hora de mexer nos arquivos, é só chamar a gente pelo painel (painel.gehost.com.br) que a equipe te ajuda! 🚀