Como configurar lazy loading de imagens para acelerar o site imprimir

Lazy loading: a mágica que faz seu site "carregar sob demanda"

Oi! Aqui é a Sensei da GeHost 🧘‍♀️ Hoje vamos falar de um truque simples, mas poderoso, para deixar seu site mais rápido: o lazy loading (ou "carregamento preguiçoso") de imagens.

A ideia é bem intuitiva: em vez de carregar todas as imagens da página assim que o visitante entra no site — mesmo aquelas lá embaixo, que ele talvez nunca role até ver — o navegador carrega só as imagens que estão visíveis na tela. As demais só são carregadas quando o visitante rola a página e chega perto delas. Menos dados baixados de cara, primeira exibição mais rápida, visitante feliz.

💡 Site rápido não é só sobre estética: ele impacta diretamente a experiência do visitante e como seu site é percebido em buscas. Vale o esforço!

Passo a passo

1. O jeito mais simples: o atributo loading="lazy"

Hoje em dia, os navegadores modernos já entendem um atributo HTML nativo que ativa o lazy loading sem precisar de nenhum plugin ou script. Basta adicionar loading="lazy" na tag da imagem:

<img src="foto-produto.jpg" alt="Descrição da imagem" loading="lazy" />

Simples assim! Isso já resolve boa parte do trabalho para sites feitos "na mão" em HTML puro.

2. Se seu site é em WordPress

1. Boas notícias: as versões mais recentes do WordPress já aplicam lazy loading automaticamente nas imagens do conteúdo. Muitas vezes você não precisa fazer nada.
2. Se quiser reforçar (ou seu tema for mais antigo), procure um plugin de otimização de imagens/performance confiável no repositório oficial do WordPress e ative a opção de lazy loading nas configurações dele.
3. Depois de ativar, sempre teste o site navegando como visitante para conferir se as imagens aparecem certinho ao rolar a página.

3. Se você edita o HTML diretamente pelo cPanel

Caso seu site seja estático (páginas HTML puras) e você edite os arquivos direto pelo Gerenciador de Arquivos do cPanel, o processo é:

1. Acesse o cPanel do seu painel e entre em Gerenciador de Arquivos.
2. Navegue até a pasta public_html (ou a pasta do domínio que você quer editar).
3. Localize o arquivo .html desejado, clique com o botão direito e escolha Editar.
4. Encontre cada tag <img> e adicione o atributo loading="lazy", como mostrado no passo 1.
5. Salve o arquivo e recarregue a página no navegador para conferir.

4. Cuidados importantes

• Não aplique lazy loading na primeira imagem grande da página (banner/topo). Ela precisa aparecer instantaneamente, então deixe-a sem o atributo — assim ela carrega junto com o resto da página logo de cara.
• Sempre preencha o atributo alt das imagens (descrição do que ela mostra). Isso ajuda tanto na acessibilidade quanto na forma como buscadores entendem sua página.
• Se possível, informe também width e height na tag da imagem. Isso evita que a página "pule" enquanto as imagens carregam, deixando a experiência mais suave.

5. Como testar se funcionou

1. Abra seu site em uma aba anônima do navegador.
2. Role a página devagar e observe: imagens mais abaixo devem aparecer só quando você se aproxima delas, não todas de uma vez.
3. Você também pode usar as ferramentas de desenvolvedor do navegador (aba "Rede"/"Network") para ver as imagens sendo carregadas aos poucos, conforme a rolagem — em vez de tudo de uma vez no início.

🙋 Ficou com dúvida em algum passo, ou seu tema/plataforma é diferente do que descrevemos aqui? Fale com o suporte pelo painel.gehost.com.br — a gente te ajuda a aplicar isso com segurança no seu site.

Prontinho! Com esse ajuste simples, seu site já fica mais leve e ágil para quem visita. Um passo pequeno, um ganho e tanto. 🌱