Como usar lazy loading de imagens para acelerar o carregamento inicial do site

Como usar lazy loading de imagens para acelerar o carregamento inicial do site

Olá, querido(a) cliente da GeHost! 👋

Se você já se perguntou por que alguns sites carregam quase que instantaneamente, enquanto outros demoram para aparecer — especialmente no celular —, a resposta pode estar escondida nas imagens do seu site.

Imagine um site com 20 fotos grandes. Se todas forem carregadas ao mesmo tempo, o navegador precisa baixar cada uma antes de mostrar a página. Isso pesa, atrasa e cansa o visitante. Aqui entra o lazy loading — um truque inteligente que diz: "Ah, não precisa carregar essa imagem agora. Espere até o usuário rolar até ela!"

É como colocar um cinema em modo de espera até que alguém se sente na cadeira. O resultado? Página mais leve, mais rápida e uma experiência muito mais agradável.

Como funciona o lazy loading?

Quando você ativa o lazy loading, o navegador só carrega as imagens que estão visíveis na tela (ou próximas a ela). As que estão abaixo da rolagem só são baixadas quando o visitante rola até elas.

Isso reduz o tráfego inicial, economiza dados e acelera o tempo de carregamento — especialmente em celulares com conexão lenta.

💡 Dica do Sensei: Sites com lazy loading têm até 30% mais chances de manter o visitante no site. É como dar um "bom dia" mais rápido!

Passo a passo: Ative o lazy loading no seu site (sem precisar de código)

Na GeHost, você pode usar o lazy loading de forma simples e segura. Veja como:

1. Entre no painel do cliente: Acesse painel.gehost.com.br com seu login e senha.
2. Localize o gerenciador de arquivos: No painel, clique em Arquivos e depois em Gerenciador de Arquivos.

3. Encontre seu site: Na árvore de pastas, abra a pasta public_html (ou a que contém o site principal).
4. Abra o arquivo de configuração do site: Procure por index.html ou index.php (ou o arquivo principal do seu site).
5. Edite o código: Clique em Editar (ícone de lápis) no arquivo principal.
6. Localize as tags <img>: Procure por linhas que comecem com <img. Exemplo:

   <img src="foto1.jpg" alt="Minha foto" />

7. Adicione o atributo loading="lazy": Altere a linha para:

   <img src="foto1.jpg" alt="Minha foto" loading="lazy" />

8. Salve as alterações: Clique em Salvar no editor.

Pronto! Você acaba de ativar o lazy loading para essa imagem.

Repetir para todas as imagens

Repita o passo 6 e 7 para todas as imagens do seu site — especialmente as que estão abaixo da dobra (ou seja, que o visitante só vê depois de rolar).

Se você tem muitas imagens, pode usar uma ferramenta automática (como um plugin ou script), mas no básico, o loading="lazy" já faz maravilhas.

💡 Dica do Sensei: Imagens de fundo (como no CSS) não usam esse atributo. Para elas, use técnicas de otimização de imagem ou background lazy (com JavaScript avançado). Mas para imagens com <img>, o loading="lazy" é o caminho mais simples.

Como saber se está funcionando?

Abra o site no navegador e use as ferramentas de desenvolvedor (F12). Procure pela aba Rede (Network). Ao rolar a página, você verá que as imagens só carregam quando aparecem.

Se quiser, pode pedir ao suporte da GeHost para verificar o desempenho do seu site com ferramentas como Google PageSpeed Insights ou GTmetrix.

Conclusão: Um pequeno ajuste, grande impacto

Ativar o lazy loading é um dos melhores investimentos de tempo para melhorar o desempenho do seu site. Não precisa de código complexo, não altera o design — só acelera o carregamento.

Seu visitante vai agradecer. Seu Google também vai notar. E você, como dono do site, vai sentir orgulho de ter um site rápido, leve e bem feito.

Se precisar de ajuda com o código ou quiser testar o resultado, é só chamar o nosso suporte — estamos aqui para te ajudar, com carinho e atenção.

Com carinho,
Sensei da GeHost
Você não está sozinho nessa jornada digital. 💚