Como usar lazy loading de imagens
E aí! 👋 Você já parou pra pensar em quantas imagens seu site carrega quando alguém abre uma página? Pois é — se você tem um site bonito com muitas fotos, o carregamento pode ficar bem lento. Hoje vou te mostrar um truque simples e poderoso que a gente usa pra deixar sites MUITO mais rápidos: o lazy loading.
Bora aprender isso?
O que é lazy loading (carregamento preguiçoso)?
Lazy loading é só um nome chique pra um conceito bem simples: em vez de carregar TODAS as imagens do seu site quando alguém abre a página, a gente carrega só as que aparecem na tela. As outras? Só carregam quando o visitante rola pra baixo e chega perto delas.
Pense assim: é como se você fosse carregar os pratos da cozinha conforme precisa, em vez de trazer todos de uma vez e depois não usar. Economiza energia, tempo e deixa tudo mais rápido. 🚀
Por que usar lazy loading?
- Seu site carrega MUITO mais rápido — a página fica pronta pra usar rapidinho.
- Economia de dados — visitantes que não rolam até o final não baixam imagens desnecessárias.
- Melhor experiência no mobile — em celular, a diferença é GIGANTE.
- Google gosta — sites rápidos (velocidade é um fator que o Google leva em conta) ficam melhor nos resultados de busca.
- Economia de banda — seu servidor agradece (e isso reflete na sua conta no fim do mês 💰).
Como ativar lazy loading no seu site
Ótimo! Agora vem o melhor: é SUPER fácil de fazer. Vou mostrar as formas mais simples:
Opção 1: WordPress (a forma mais preguiçosa)
Se seu site é em WordPress (hospedado aqui na GeHost), a maioria dos temas modernos e dos plugins de otimização (como Rank Math, Yoast, WP Rocket) já vem com lazy loading ATIVADO. Você pode até nem saber que está usando!
Pra checar:
- Entre no painel WordPress → Extensões → Plugins instalados.
- Procure por plugins de otimização (WP Rocket, Rank Math, etc.).
- Vá nas configurações do plugin e procure por "lazy loading" ou "carregamento preguiçoso".
- Se houver a opção, marque a caixinha e salve. Pronto! ✅
Se você NÃO usa plugins de otimização, pode instalar um (a gente recomenda Rank Math ou Yoast SEO — os dois têm versão gratuita e ambos vêm com lazy loading de imagens incluído).
Opção 2: HTML puro (pro quem mexe com código)
Se você é corajoso e meche diretamente no código HTML, é ainda mais fácil! Basta adicionar um atributo às suas imagens:
Antes (sem lazy loading):
<img src="foto.jpg" alt="Descrição">
Depois (com lazy loading):
<img src="foto.jpg" alt="Descrição" loading="lazy">
Só isso! O atributo loading="lazy" já funciona em todos os navegadores modernos (Chrome, Firefox, Safari, Edge). Simples assim.
Opção 3: Usar um plugin de imagem otimizada
Plugins como Smush ou ShortPixel comprimem suas imagens E já ativam o lazy loading automaticamente. Pra você, é só instalar e esquecer — eles cuidam do resto.
Boas práticas e dicas de ouro 💡
1. Sempre use imagens otimizadas
De nada adianta ativar lazy loading se suas imagens têm 5MB cada uma! Use ferramentas como TinyPNG ou ShortPixel pra comprimir as imagens antes de colocar no site. Imagem comprimida + lazy loading = combinação imbatível.
2. Coloque uma descrição (alt text)
Quando você coloca o atributo alt na imagem, ajuda tanto acessibilidade (pra quem usa leitor de tela) quanto SEO (Google entende do que é a imagem). Sempre faça isso:
<img src="produto.jpg" alt="Camiseta azul tamanho M" loading="lazy">
3. Use imagens responsivas
Em vez de uma única imagem grande pra todos os tamanhos de tela, use versões diferentes pro desktop e pro mobile. Isso economiza MUITO banda em celular. Combina perfeitamente com lazy loading.
4. Imagens "above the fold" podem não usar lazy loading
As imagens que aparecem assim que alguém abre sua página (antes de rolar) já estão visíveis — essas NÃO precisam de lazy loading. Só as imagens mais pra baixo da página ganham com isso. Dica: se tiver 3 imagens no topo e 20 embaixo, ativa lazy loading só nas 20. 👍
Solução de problemas
As imagens não estão carregando
Se as imagens sumiram depois que você ativou lazy loading, provavelmente:
- O caminho da imagem (URL) está errado. Confira no código.
- Você tem JavaScript desativado (lazy loading precisa de JavaScript). Ativa ele no navegador.
- O plugin que você instalou tem conflito com outro. Tenta desativar um de cada vez pra achar o culpado.
O site fica lento mesmo com lazy loading
Lazy loading não é uma bala de prata — se seu site fica lento, pode ser por outros motivos:
- Imagens MUITO grandes (em MB). Comprime elas.
- Muitos plugins pesados rodando. Remove os que você não usa.
- Servidor sobrecarregado. Se isso é frequente, considera um plano maior aqui da GeHost (a gente tem várias opções 😉).
Resumindo (o essencial)
Lazy loading é seu melhor amigo pra deixar o site rápido. Se você usa WordPress, ativa num plugin de otimização (2 cliques). Se mexe com código HTML, só bota loading="lazy" nas imagens. E não esqueça: imagens comprimidas + lazy loading = combinação vencedora.
Mais alguma dúvida? A gente adora ajudar! Manda uma mensagem pro suporte da GeHost que a galera te resolve rapidinho. 🙌
