Como configurar lazy loading de imagens para acelerar páginas com muito conteúdo
Oi! Aqui é a Sensei da GeHost 🧘♀️ e hoje vamos falar de um truque simples que faz uma diferença enorme na velocidade do seu site: o lazy loading (ou "carregamento preguiçoso", numa tradução bem literal).
Se a sua página tem muitas fotos — um catálogo de produtos, uma galeria, um blog cheio de imagens — o navegador do visitante, por padrão, tenta baixar todas as imagens de uma vez, mesmo as que estão lá embaixo, fora da tela. Isso deixa o carregamento inicial mais lento e pode até fazer visitante desistir de esperar. O lazy loading resolve isso carregando só as imagens que estão visíveis na tela — o resto só baixa conforme a pessoa vai rolando a página. Resultado: página abre mais rápido, sem gastar dado à toa.
💡 Dica da Sensei: lazy loading não é mágica de deixar o site "leve" sozinho — ele ajuda muito no carregamento inicial, mas imagens grandes e pesadas continuam sendo imagens grandes e pesadas. O ideal é combinar lazy loading com imagens bem otimizadas (comprimidas, no tamanho certo).
Passo 1 — Descubra qual é o seu tipo de site
O jeito de ativar o lazy loading muda um pouco dependendo de como o seu site foi feito. Os casos mais comuns:
- WordPress (o mais comum entre nossos clientes)
- Site em HTML puro / desenvolvido sob medida
Não sabe qual é o seu caso? Sem problema — dá uma olhada no seu painel.gehost.com.br ou fala com a nossa equipe de suporte que a gente te ajuda a identificar. 😊
Passo 2 — Se o seu site é WordPress
Boa notícia: as versões atuais do WordPress já vêm com lazy loading ativado por padrão nas imagens do conteúdo! Mesmo assim, vale a pena conferir e reforçar:
- Acesse o painel de administração do seu WordPress (o famoso
/wp-admin). - Ao editar uma página ou post pelo editor de blocos, clique na imagem inserida e confira, no painel lateral direito, as configurações do bloco de imagem — o carregamento preguiçoso já é aplicado automaticamente pelo próprio WordPress na maioria dos temas modernos.
- Se você usa um plugin de cache ou de otimização de performance (tipo os plugins de "Speed" ou "Performance" mais populares), procure por uma opção chamada "Lazy Load" ou "Carregamento Preguiçoso" nas configurações dele e ative.
- Se o seu site usa uma galeria ou slider de terceiros (plugin específico de portfólio, loja etc.), verifique nas configurações daquele plugin se existe a opção de lazy loading — cada um tem o seu próprio interruptor.
💡 Dica da Sensei: evite ativar dois plugins diferentes fazendo lazy loading ao mesmo tempo (ex.: o nativo do WordPress + um plugin de cache com a mesma função). Às vezes um "briga" com o outro e pode até atrapalhar a exibição das imagens. Escolha um método e mantenha só ele ativo.
Passo 3 — Se o seu site é em HTML puro ou sob medida
Se o seu site foi feito em HTML/CSS direto (sem WordPress), o lazy loading é configurado adicionando um pequeno atributo em cada tag de imagem do código. É simples assim:
- Localize no seu código a tag da imagem, algo como:
<img src="foto.jpg" alt="descrição"> - Adicione o atributo
loading="lazy"dentro da tag, ficando assim:<img src="foto.jpg" alt="descrição" loading="lazy"> - Repita isso nas imagens que ficam mais abaixo na página (dispensável na primeira imagem visível ao abrir a página, o chamado "topo" — essa pode continuar carregando normal).
Você pode editar os arquivos do seu site diretamente pelo Gerenciador de Arquivos do cPanel, que já vem disponível no seu painel de hospedagem:
Dentro do Gerenciador de Arquivos, entre na pasta public_html, localize o arquivo HTML da página que quer editar, clique com o botão direito e escolha a opção de editar — aí é só adicionar o atributo loading="lazy" nas tags de imagem, como mostrado acima, e salvar.
⚠️ Cuidado da Sensei: antes de editar arquivos do site diretamente, é sempre bom ter um backup recente — assim, se algo sair diferente do esperado, dá pra voltar rapidinho. Se preferir não mexer direto no código, nossa equipe de suporte pode te orientar.
Passo 4 — Confira o resultado
Depois de aplicar o lazy loading, é hora de comparar o antes e o depois:
- Use uma ferramenta gratuita de análise de performance de sites (existem várias disponíveis buscando por "teste de velocidade de site" no seu navegador de confiança).
- Rode o teste na sua página e veja se o tempo de carregamento inicial e o "peso" da primeira exibição melhoraram.
- Navegue pelo próprio site rolando a página devagar — se estiver funcionando, você vai perceber as imagens mais abaixo "aparecendo" sutilmente conforme rola a tela, em vez de já estarem todas prontas de cara.
Quando pedir ajuda
Se você não se sente confortável mexendo em código ou não tem certeza de qual plugin está usando, não esquenta a cabeça — nossa equipe está aqui pra isso. Você tem 30 dias de suporte gratuito após a entrega do seu site, e depois disso também é só chamar a gente pelo painel.gehost.com.br que vemos o melhor caminho juntos.
🌱 Resumo da Sensei: lazy loading = imagens carregando só quando precisam aparecer na tela. Em WordPress, geralmente já vem ativo ou é um clique num plugin de performance; em HTML puro, é adicionar loading="lazy" nas tags de imagem. Pequeno ajuste, grande ganho de velocidade! 🚀