Como usar Intersection Observer para lazy loading avançado (para deixar seu site mais rápido!)
Olá, querido(a) cliente da GeHost! 👋
Se você já percebeu que seu site demora a carregar imagens, especialmente quando tem muitas, ou se quer deixar o seu site mais leve e rápido — hoje vamos aprender uma técnica poderosa chamada Intersection Observer, usada para fazer o lazy loading avançado.
Imagine: você entra no seu site e só carrega as imagens que estão visíveis na tela — as que estão abaixo da rolagem, só carregam quando você chega perto delas. Isso economiza tempo, dados e melhora muito a experiência do usuário.
É como se seu site dissesse: “Espere, eu só carrego o que você está vendo agora!” 🎯
O que é Intersection Observer?
É uma ferramenta do JavaScript que "observa" quando um elemento (como uma imagem) entra ou sai da área visível do navegador. Quando ele aparece na tela, só então o site carrega a imagem.
Não é magia — é tecnologia inteligente que ajuda seu site a ser mais rápido!
Passo a passo: Como usar isso no seu site (com exemplos simples)
- Abra o Gerenciador de Arquivos do cPanel
- Na tela do cPanel, clique em Gerenciador de Arquivos (File Manager).
- Selecione a pasta public_html (ou a pasta raiz do seu site).
- Encontre seu arquivo HTML principal (geralmente chamado
index.html). - Adicione o código JavaScript
- Altere o código das imagens no HTML
- Teste seu site!
Para fazer isso, faça login no cPanel da sua conta GeHost:
Essa é a área onde você gerencia todos os arquivos do seu site, como HTML, CSS e JavaScript.
É aqui que estão os arquivos principais do seu site. Se você tem um site com nome de domínio, ele geralmente está dentro dessa pasta.
Abra esse arquivo com o editor do Gerenciador de Arquivos (clique duas vezes nele).
Na parte do <head> ou logo antes do fechamento do </body>, adicione este código:
<script>
// Observador de interseção
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img);
}
});
});
// Observa todas as imagens com data-src
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
</script>
No seu arquivo HTML, troque as imagens normais assim:
<img src="foto.jpg" alt="Uma bela imagem" />
Por este formato:
<img data-src="foto.jpg" alt="Uma bela imagem" class="lazy" />
Essa mudança é essencial: o data-src é onde a imagem real está guardada, mas só será carregada quando o usuário chegar perto.
Salve o arquivo, atualize sua página no navegador e role para baixo. Você vai ver que as imagens só carregam quando aparecem na tela!
Dica do Sensei GeHost 🌿
Se você usar imagens grandes (como 2000x1500px), o lazy loading é essencial. Ele evita que o site fique lento só por carregar tudo de uma vez. Com isso, seu site carrega mais rápido, seu cliente fica feliz e o Google também gosta — isso melhora o SEO!
Pronto! Você agora domina o lazy loading avançado.
Seu site está mais leve, mais rápido e mais moderno. E o melhor? Tudo com código simples, que você mesmo pode controlar.
Se precisar de ajuda com o código ou quiser que a GeHost ajude a implementar, é só chamar! Estamos aqui para te ajudar, sempre. 💚
Até a próxima dica, com carinho,
Sensei da GeHost 🍃