Desempenho & CDN 5 visualizações

Como usar lazy loading para carregar imagens só quando o visitante rola a página

Ver no WHMCS

Como usar lazy loading para carregar imagens só quando o visitante rola a página

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

Você já percebeu como algumas páginas da internet demoram muito para carregar? Muitas vezes, isso acontece porque elas tentam carregar todas as imagens ao mesmo tempo — mesmo as que estão longe da visão inicial do visitante. É como tentar carregar um ônibus inteiro antes de abrir a porta… não faz sentido, né?

Aqui na GeHost, queremos que seu site seja rápido, leve e agradável — como um bom café da manhã! 😊 Por isso, hoje vamos aprender um truque simples, poderoso e super útil: o lazy loading (ou "carregamento preguiçoso"). ---

O que é lazy loading?

Imagine que você está lendo um livro com muitas imagens. Você só vê a primeira página. O que acontece se o livro carregar todas as imagens de uma vez? O livro pesa demais, e você demora para ler.

O lazy loading é como se o livro só carregasse as imagens quando você chegar na página delas. Ou seja: só carrega as imagens que estão na tela ou próximas a ela — e deixa as outras para depois.

✅ Resultado? - Site mais rápido - Menos consumo de dados - Melhor experiência para o visitante - Melhor desempenho no Google (sim, isso ajuda no SEO!) ---

Como ativar o lazy loading no seu site (passo a passo)

Na GeHost, você pode habilitar o lazy loading de forma simples, sem precisar de programação complexa. Vamos lá?

  1. Entre no painel do cliente no painel.gehost.com.br.
  2. Na área de hospedagem, selecione o domínio do seu site.
  3. Clique em Gerenciador de Arquivos (dentro do grupo "Arquivos").
  4. Tela do Gerenciador de Arquivos no cPanel
  5. Abra a pasta public_html (é onde estão os arquivos do seu site).
  6. Localize o arquivo principal do seu site, geralmente chamado index.html ou index.php.
  7. Abra esse arquivo para edição (clique no ícone de "Editar" ou "Code Editor").
  8. Procure pelas tags de imagem: <img src="..." alt="...">.
  9. Adicione o atributo loading="lazy" em cada imagem. Veja o exemplo:
  10. <img src="foto1.jpg" alt="Uma bela paisagem" loading="lazy" />
  11. Salve as alterações.

Pronto! Agora, cada imagem só será carregada quando o visitante rolar a página até ela. 🎉

---

Dica do Sensei (você é especialista agora!)

Se o seu site tem muitas imagens — como um portfólio, loja virtual ou blog — o lazy loading é essencial. Ele faz uma diferença enorme no tempo de carregamento, especialmente em celulares.

💡 Dica extra: Você pode combinar isso com a otimização de imagens (redimensionar, usar WebP, compressão). Combinando essas duas técnicas, seu site vai voar!

---

Quer saber mais sobre desempenho?

Na GeHost, acreditamos que um bom site é rápido, seguro e bonito. Se quiser aprender mais sobre como melhorar o desempenho do seu site, confira nosso guia sobre CDN e cache — ele é um verdadeiro superpoder para quem quer que o mundo veja seu site com velocidade de raio! ⚡

Se precisar de ajuda com qualquer configuração, nosso suporte está aqui para você — e está incluso em todos os planos. 💬

Até a próxima, com um sorriso e um site mais leve! 🌿

Precisa de Ajuda?

Nossa equipe está pronta para resolver suas dúvidas.