Lazy Loading: a arte de carregar só o que o visitante está vendo
Oi! Aqui é a Sensei da GeHost 🌱 Hoje vamos falar de uma técnica simples, gratuita e que costuma dar um salto visível de velocidade no site: o lazy loading (carregamento preguiçoso) de imagens e vídeos. Calma com o nome estranho — "preguiçoso" aqui é uma virtude. Vamos passo a passo, sem pressa, do jeitinho que você merece.
O que é lazy loading?
Por padrão, quando alguém abre seu site, o navegador tenta baixar todas as imagens e vídeos da página de uma vez só — mesmo os que estão lá embaixo, que a pessoa talvez nem role até ver. Isso deixa o carregamento inicial mais pesado e lento.
Com o lazy loading, o navegador baixa primeiro só o que aparece na tela (o "acima da dobra") e vai carregando o resto conforme o visitante rola a página. Resultado: a primeira impressão do site fica muito mais rápida, sem precisar excluir nenhuma imagem ou vídeo.
Por que vale a pena configurar isso?
- Carregamento inicial mais rápido, especialmente em sites com muitas fotos, galerias ou vídeos incorporados.
- Economia de dados para quem acessa pelo celular — mídia que não é vista, não é baixada.
- Boa prática de desempenho reconhecida amplamente no mercado, que ajuda inclusive na experiência de navegação como um todo.
Passo 1: descubra como seu site foi feito
O caminho muda um pouco dependendo da plataforma:
- Se o site é em WordPress, siga o Passo 2.
- Se o site é em HTML puro/código próprio (hospedado via cPanel), siga o Passo 3.
Na dúvida, não tem problema: você pode confirmar isso direto com nosso suporte, ou dar uma olhada nos arquivos do site pelo Gerenciador de Arquivos do cPanel.
Passo 2 (WordPress): ativando o lazy loading
- Boa notícia: as versões mais recentes do WordPress já ativam lazy loading automaticamente em imagens do conteúdo. Muitas vezes você não precisa fazer nada.
- Se quiser reforçar (por exemplo, incluir vídeos incorporados e imagens de galeria/tema), procure um plugin de otimização de desempenho bem avaliado no repositório oficial do WordPress e ative a opção de lazy loading dele.
- Depois de instalar e ativar, navegue pelo site como visitante e role a página devagar, observando se as imagens mais abaixo aparecem "surgindo" conforme você rola — esse é o sinal de que está funcionando.
Dica da Sensei: evite instalar vários plugins de "otimização" ao mesmo tempo. Eles podem conflitar entre si e, em vez de acelerar, deixar o site mais lento ou até quebrar algum layout.
Passo 3 (site em HTML/código próprio): usando o atributo loading="lazy"
Se o seu site foi feito em HTML puro (ou por um desenvolvedor), a forma mais simples e nativa dos navegadores modernos é adicionar o atributo loading="lazy" nas tags de imagem e vídeo.
- Acesse o Gerenciador de Arquivos no cPanel e localize os arquivos .html do seu site dentro da pasta public_html.
- Abra o arquivo para edição (botão de editar do próprio Gerenciador de Arquivos).
- Em cada tag de imagem, adicione o atributo de carregamento preguiçoso — por exemplo, em uma tag de imagem comum, inclua a marcação loading="lazy" junto com os demais atributos já existentes (como src e alt).
- Salve o arquivo e recarregue o site no navegador para conferir se nada quebrou visualmente.
Dica da Sensei: nunca aplique lazy loading na primeira imagem grande da página (o banner principal, por exemplo). Ela precisa carregar imediatamente, senão o efeito é o contrário: o site parece mais lento pra quem acabou de chegar.
Passo 4: e os vídeos?
Vídeos incorporados (players próprios ou de terceiros) também pesam bastante. Algumas boas práticas:
- Use o atributo de pré-carregamento configurado para "nenhum", em vez de deixar o vídeo baixando dados assim que a página abre.
- Defina uma imagem de capa (poster) para o vídeo, assim o visitante vê uma prévia estática leve até decidir dar o play.
- Se o vídeo estiver incorporado de plataformas externas (como serviços de streaming de vídeo), verifique se a própria plataforma oferece uma opção de carregamento sob demanda — a maioria já entrega isso pronto.
Passo 5: teste o resultado
- Abra o site em uma aba anônima do navegador (assim você evita cache local enganando o teste).
- Role a página observando se imagens e vídeos mais abaixo carregam conforme você desce.
- Se quiser um raio-x mais técnico de tempo de carregamento, use uma ferramenta de análise de performance de sua preferência disponível gratuitamente na web.
Resumo da Sensei
Lazy loading é uma das mudanças mais simples que existem: poucas linhas de configuração, zero custo, e um ganho de velocidade que o visitante sente logo no primeiro segundo. Se em algum passo você travar — seja editando o arquivo, seja escolhendo o plugin certo — pode chamar nosso suporte que a gente te ajuda a configurar com calma. 🌸