Como configurar carregamento adiado (lazy load) de imagens sem plugin pesado
Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! Seja bem-vindo(a) ao seu guia prático e humano da GeHost, onde aprendemos juntos a deixar o seu site mais rápido, leve e agradável para o usuário — sem precisar de plugins pesados ou mágicas complexas. 💡
No mundo digital, imagens são essenciais… mas também são as principais responsáveis por sites lentos. E aí entra o lazy load — uma técnica simples que só carrega as imagens quando elas estão prestes a aparecer na tela do visitante. Isso significa: menos tempo de espera, mais performance, mais satisfação do usuário.
Hoje, você vai aprender a ativar isso diretamente no código do seu site, sem precisar instalar plugins pesados que podem atrapalhar o desempenho. E o melhor? É rápido, seguro e funciona com qualquer tema ou sistema.
Sensei diz: "O verdadeiro poder da otimização está na simplicidade. Não é o que tem mais, mas o que faz bem o que precisa."
Passo a passo: Como ativar o lazy load com código simples
Este guia é feito para quem quer aplicar a melhoria com segurança e clareza. Vamos lá!
-
Entre no seu painel da GeHost pelo endereço painel.gehost.com.br. Use seu usuário e senha.
-
Na tela principal do cPanel, clique em Gerenciador de Arquivos (dentro do grupo "Arquivos").
-
Na nova tela, selecione a pasta public_html (ou a pasta do seu site, se estiver em subdiretório).
-
Localize o arquivo principal do seu site — geralmente é index.html ou index.php. Clique duas vezes para abri-lo no editor de texto embutido.
-
Procure pelas tags de imagem no código. Elas costumam ter esse formato:
<img src="foto.jpg" alt="Descrição da imagem" />
Substitua esse código por este novo formato:
<img src="foto.jpg" alt="Descrição da imagem" loading="lazy" />
✅ Pronto! Você acabou de ativar o lazy load para essa imagem.
-
Repita o passo anterior para todas as imagens do seu site — especialmente as que aparecem abaixo da dobra (ou seja, que o visitante só vê depois de rolar a página).
-
Após editar todas as imagens, clique em Salvar no editor.
-
Finalmente, recarregue seu site no navegador e veja a diferença: as imagens só carregam quando você rola até elas!
Dica do Sensei: O que você ganha com isso?
- ⏱️ Site mais rápido — especialmente em celulares e conexões lentas.
- 📊 Melhor experiência do usuário — ninguém mais espera 10 segundos para ver a primeira imagem.
- 🔍 Ranking melhor no Google — o Google valoriza sites rápidos.
- 💡 Não precisa de plugins — evita bloat (código pesado) e vulnerabilidades.
Sensei diz: "O site não é só para mostrar, é para conectar. Um site rápido é um site que fala com o coração do visitante."
Curiosidade: Como o browser entende "loading='lazy'"?
É simples: o navegador já entende esse comando nativamente. Ele é parte do padrão HTML moderno. Isso significa que não depende de bibliotecas externas — é suporte nativo, seguro e eficiente.
✅ Funciona em todos os navegadores modernos: Chrome, Firefox, Safari, Edge, etc.
Quer ir além? Dica extra para imagens responsivas
Se você usa imagens com diferentes tamanhos para dispositivos móveis, combine o loading="lazy" com o atributo srcset para carregar a imagem certa no momento certo. Exemplo:
<img src="foto-pequena.jpg"
srcset="foto-pequena.jpg 480w, foto-media.jpg 800w, foto-grande.jpg 1200w"
sizes="(max-width: 600px) 480px, 800px"
alt="Imagem responsiva"
loading="lazy" />
Isso garante que o visitante só baixe a imagem ideal para seu dispositivo — ainda mais otimização!
Conclusão: Você é o mestre do seu site!
Com esse simples ajuste, você está fazendo um grande favor ao seu público: um site mais leve, mais rápido, mais humano.
Se tiver dúvidas, lembre-se: o suporte da GeHost está aqui para te ajudar — e o primeiro mês é grátis depois da entrega. Aproveite!
Até a próxima dica, com carinho, do seu Sensei da GeHost 🌿