Como configurar lazy loading de imagens sem usar plugin (em 5 passos fáceis)
Olá, querido(a) cliente! 👋 Seja bem-vindo(a) ao seu guia de desempenho web com a GeHost — onde aprendemos juntos a deixar seu site mais rápido, mais leve e mais agradável para quem navega nele. Hoje vamos falar de um truque poderoso, mas super simples: lazy loading de imagens.
Imagine que seu site tem 20 fotos. Quando a pessoa entra, o navegador não precisa carregar todas de uma vez — só as que estão na tela. As demais só carregam quando a pessoa rola até elas. É como se o site dissesse: “Espere um pouco, só carrego o que você está vendo agora.”
Isso melhora muito o tempo de carregamento, economiza dados e deixa o site mais responsivo. E o melhor? Você pode fazer isso sem instalar nenhum plugin — só com um pequeno ajuste no código.
Dica Sensei: O lazy loading é tão importante que até o Google recomenda. Sites que usam isso têm melhor posição nos resultados de busca!
Passo 1: Acesse o Gerenciador de Arquivos do cPanel
Para começar, faça login no seu painel do cliente: painel.gehost.com.br.
Depois, no cPanel, clique em Gerenciador de Arquivos (File Manager).
Passo 2: Abra o arquivo de imagem principal (geralmente index.html ou index.php)
No Gerenciador de Arquivos, vá até a pasta public_html (essa é a raiz do seu site).
Procure pelo arquivo principal do seu site. Normalmente é:
- index.html
- index.php
- Ou um arquivo com nome semelhante como home.html ou inicio.php.
Clique duas vezes nele para abri-lo no editor de texto do cPanel.
Passo 3: Localize as tags <img>
Procure por todas as linhas que começam com <img. Elas geralmente têm um aspecto assim:
<img src="foto1.jpg" alt="Descrição da imagem" />
Essas são as imagens do seu site. Vamos modificar cada uma delas para que use o lazy loading.
Passo 4: Adicione os atributos `loading="lazy"` e `decoding="async"`
Na tag <img>, adicione dois atributos importantes:
- loading="lazy" — isso diz ao navegador: “Carregue só quando necessário”.
- decoding="async" — ajuda a melhorar o desempenho ao decodificar a imagem enquanto o site carrega.
Exemplo de como ficará:
<img src="foto1.jpg" alt="Descrição da imagem" loading="lazy" decoding="async" />
Repita esse passo para todas as imagens do seu site — cada uma precisa ter esses atributos.
Atenção: Não é necessário mudar o caminho da imagem (ex.: "foto1.jpg"). Apenas adicione os atributos no código.
Passo 5: Salve e teste
Depois de editar todas as imagens:
- Clique em Salvar no editor do cPanel.
- Volte para o seu site no navegador.
- Abra as Ferramentas do Desenvolvedor (F12) e vá até a aba "Rede" (Network).
- Role a página e veja como as imagens só carregam quando aparecem na tela.
Pronto! Você acabou de deixar seu site mais rápido, sem plugins, sem complicação — só com um toque de código inteligente.
Por que isso funciona tão bem?
Porque o navegador entende que não precisa gastar tempo e dados carregando fotos que ainda não estão visíveis. Isso é especialmente útil em sites com muitas imagens, como portfólios, lojas virtuais ou blogs.
Seu site agora é mais leve, mais rápido e mais amigável com o celular — e isso faz toda a diferença no Google e na experiência do usuário.
Quer saber mais?
Se tiver dúvidas, entre em contato com nosso suporte — estamos aqui para ajudar, sempre. E lembre-se: seu site é seu espaço, e com a GeHost, você tem tudo o que precisa para brilhar.
Com carinho,
Sensei da GeHost
Seu parceiro em crescimento digital 🌱
