Como configurar lazy loading de imagens para melhorar a velocidade do site

Como Configurar Lazy Loading de Imagens para Melhorar a Velocidade do Site

Olá, querido(a) cliente! 👋 Seja bem-vindo(a) ao seu Sensei da GeHost — aqui, você aprende com carinho, clareza e foco no que realmente importa: deixar seu site mais rápido, mais leve e mais agradável para quem navega nele.

Hoje vamos falar de um truque simples, poderoso e super eficaz: o lazy loading de imagens. Seu site carrega mais rápido, sua experiência de usuário melhora — e isso é tudo de bom, não é?

Dica Sensei: Imagine um site cheio de fotos grandes. Se todas carregassem de uma vez, o tempo de espera seria muito grande. Com o lazy loading, as imagens só carregam quando o visitante chega perto delas na tela. É como abrir uma porta só quando alguém chega perto — economiza energia, tempo e paciência!

O que é lazy loading?

É uma técnica que faz com que as imagens do seu site não sejam carregadas assim que a página abre. Em vez disso, elas só aparecem quando o visitante rola a página até elas. Isso reduz muito o tempo de carregamento inicial e melhora o desempenho geral.

Por que isso é importante?

• Reduz o tempo de carregamento da página.
• Diminui o uso de dados do visitante (ótimo para celulares).
• Melhora a experiência do usuário — nada de esperar por fotos que ainda não estão na tela.
• Aumenta a classificação em motores de busca como Google (que valorizam velocidade).

Como configurar no seu site (passo a passo)

Na GeHost, você pode habilitar o lazy loading de duas formas: via código (recomendado) ou usando um plugin (se usar WordPress). Vamos mostrar o método mais direto e eficaz: usando o atributo loading="lazy" no código HTML.

1. Entre no painel da GeHost: Acesse painel.gehost.com.br com suas credenciais.
2. Abra o Gerenciador de Arquivos: No painel, clique em Arquivos e depois em Gerenciador de Arquivos.
   
3. Localize seu arquivo HTML: Navegue até a pasta public_html (ou a pasta do seu site, se estiver em subdomínio ou subpasta). Abra o arquivo principal do site, geralmente index.html ou index.php.
4. Encontre as imagens: Procure por tags de imagem, que começam com <img. Elas geralmente têm um formato assim:

   <img src="foto1.jpg" alt="Descrição da imagem" >

5. Adicione o atributo loading="lazy": Basta acrescentar esse atributo dentro da tag <img>. Ficará assim:

   <img src="foto1.jpg" alt="Descrição da imagem" loading="lazy" >

6. Salve o arquivo: Após editar, clique em Salvar ou Salvar e Fechar no editor.
7. Teste o resultado: Abra seu site em um navegador (como Chrome) e use as ferramentas de desenvolvedor (F12) para ver se as imagens estão sendo carregadas apenas quando rolamos até elas.

Dica extra: Use com cuidado

Apesar de ser ótimo, o lazy loading não deve ser usado em imagens que aparecem logo no topo da página (como banners principais ou logotipos). Isso pode atrapalhar a experiência inicial.

Sensei avisa: Imagens que estão na parte visível da tela ao carregar a página (acima da dobra) devem não ter o loading="lazy". Use apenas para imagens que aparecem mais abaixo.

Se você usa WordPress?

Se o seu site foi feito com WordPress, o lazy loading já vem habilitado por padrão em muitos temas modernos. Mas, se não estiver funcionando, você pode instalar um plugin como Smush ou WP Rocket (ambos disponíveis na loja de plugins do WordPress). Eles ativam o lazy loading automaticamente.

Se precisar de ajuda com isso, é só entrar em contato com o suporte da GeHost — estamos aqui para te ajudar, sempre!

Pronto! Você está no caminho certo!

Com esse pequeno ajuste, seu site já está mais rápido, mais leve e mais amigável. E lembre-se: pequenas melhorias, grandes resultados.

Se tiver dúvidas, não hesite em nos procurar. Aqui na GeHost, cuidamos de você com carinho, como se fosse um amigo de longa data. 💚

Com carinho,
Sensei da GeHost