Como configurar lazy loading de imagens sem plugin
Oi, tudo bem? Aqui é a Sensei da GeHost 🥋 Hoje vou te mostrar um truque simples (e gratuito!) pra deixar seu site mais rápido: o lazy loading de imagens — sem precisar instalar mais um plugin no seu WordPress.
Lazy loading (ou "carregamento tardio") é quando o navegador só carrega uma imagem na hora em que ela vai aparecer na tela do visitante, em vez de carregar todas as fotos da página de uma vez só. Isso deixa o site mais leve e rápido, principalmente em páginas com muita imagem.
💡 Dica da Sensei: quanto mais plugins seu site tem, mais lento ele pode ficar e maior a chance de conflito entre eles. Sempre que der pra resolver algo "no braço", com um recurso nativo, vale a pena — é menos peso pro seu site carregar.
Passo 1 — Confira se o seu site já não faz isso sozinho
Se o seu site é WordPress, boas notícias: desde a versão 5.5, o próprio WordPress já aplica lazy loading automaticamente nas imagens do conteúdo, sem você precisar fazer nada! Antes de sair editando código, confirme se isso já está ativo:
- Abra seu site num navegador (Chrome, por exemplo).
- Clique com o botão direito em qualquer área da página e escolha "Exibir código-fonte da página" (ou "Ver código-fonte").
- Use Ctrl+F (ou Cmd+F no Mac) e procure por loading="lazy".
- Se aparecer nas tags de imagem (<img>), ótimo — seu site já está com lazy loading ativo nativamente! 🎉
Se não encontrou nada, ou se seu site é feito em HTML puro (sem WordPress), vamos pro passo seguinte.
Passo 2 — Adicionando o atributo manualmente nas imagens
A boa notícia é que todo navegador moderno já entende um atributo simples de HTML chamado loading="lazy". Você não precisa de nenhum plugin, script externo ou ferramenta complicada — só adicionar esse atributinho na tag de imagem.
Uma imagem "normal" fica assim:
<img src="foto-do-produto.jpg" alt="Descrição da foto">
Com lazy loading, fica assim:
<img src="foto-do-produto.jpg" alt="Descrição da foto" loading="lazy">
É só isso! Você adiciona loading="lazy" dentro da tag <img>, junto dos outros atributos.
Passo 3 — Onde editar isso no seu site
Se você usa o Editor de Blocos do WordPress (Gutenberg): como vimos no Passo 1, o lazy loading já costuma vir automático — normalmente você não precisa editar nada na mão.
Se você tem blocos de HTML personalizado, um template de tema, ou um site estático (HTML puro): você vai precisar abrir o arquivo e adicionar o atributo em cada <img> importante. Pra isso, use o Gerenciador de Arquivos do seu painel de hospedagem:
- Acesse seu cPanel e abra o Gerenciador de Arquivos.
- Navegue até a pasta do seu site (geralmente dentro de public_html).
- Localize o arquivo que contém as imagens (pode ser um .html, ou, no caso de temas WordPress, um arquivo .php do tema).
- Clique com o botão direito no arquivo e escolha "Editar".
- Adicione loading="lazy" dentro das tags <img> que quiser otimizar.
- Salve as alterações.
⚠️ Atenção, aluno(a): antes de editar qualquer arquivo do tema, faça um backup pelo cPanel (procure a ferramenta "Backup"). Assim, se algo sair diferente do esperado, você consegue voltar tudo como estava rapidinho.
Passo 4 — Confirme que funcionou
- Abra seu site novamente no navegador.
- Repita o teste do Passo 1: veja o código-fonte e procure por loading="lazy" nas imagens que você editou.
- Encontrou? Prontinho, seu site agora carrega as imagens de forma mais inteligente! ✅
Uma última dica de mestre 🥋
Não aplique lazy loading na primeira imagem que aparece na tela (aquela que o visitante vê sem precisar rolar a página, tipo o banner principal). Essa imagem é importante pra primeira impressão de velocidade do site e o ideal é que ela carregue imediatamente — deixe o lazy loading só para as imagens que ficam "mais pra baixo" na página.
Ficou com alguma dúvida na hora de editar os arquivos do seu site? Sem problema — é só chamar a gente pelo painel.gehost.com.br que a equipe te ajuda. E lembra: todo serviço entregue pela GeHost já vem com 30 dias de suporte grátis após a entrega. 😉
Até a próxima lição!
— Sensei GeHost