Como usar lazy loading nativo (loading='lazy') Print

Como usar o lazy loading nativo (loading="lazy") para deixar seu site mais rápido

Olá, querido(a) cliente! Seja bem-vindo(a) ao seu novo passo rumo a um site mais leve, mais rápido e mais agradável para quem navega nele. Hoje, vamos aprender uma técnica simples, poderosa e super eficaz: o lazy loading nativo — ou seja, carregar imagens só quando elas aparecerem na tela.

Imagine um site com 20 imagens. Se todas carregarem ao mesmo tempo, o site fica lento. Com o lazy loading, apenas as imagens que o visitante está vendo agora são carregadas — as demais esperam. É como se o site dissesse: “Tudo em ordem, mas só trago o que você precisa agora!”

Dica Sensei: Sites com lazy loading carregam até 3x mais rápido no celular. Isso aumenta o tempo de permanência e reduz o número de visitantes que saem antes de ver o conteúdo.

Passo a passo: Como ativar o loading="lazy" no seu site

Este recurso é suportado por todos os navegadores modernos (Chrome, Firefox, Safari, Edge). Você não precisa instalar nada — só precisa usar um pequeno código no seu HTML. Vamos lá:

1. Abra o Gerenciador de Arquivos do cPanel

   Entre no seu painel de controle (cPanel) e clique em Gerenciador de Arquivos no grupo Arquivos.

   

2. Navegue até a pasta do seu site

   Na árvore de pastas, clique em public_html (ou o nome da sua pasta principal, se diferente). É aqui que estão seus arquivos HTML e imagens.

   

3. Encontre o arquivo HTML que você quer melhorar

   Procure por arquivos como index.html, home.html ou qualquer outro que seja a página principal do seu site. Clique duas vezes nele para abri-lo no editor de texto.

4. Localize as imagens

   Procure por tags como <img src="..." alt="...">. Elas são as imagens do seu site.

   Exemplo de imagem sem lazy loading:

   <img src="foto1.jpg" alt="Um belo jardim" />

5. Adicione o atributo loading="lazy"

   Acrescente o atributo loading="lazy" dentro da tag <img>. Ficará assim:

   <img src="foto1.jpg" alt="Um belo jardim" loading="lazy" />

   Pronto! Agora essa imagem só será carregada quando o visitante rolar até ela.

6. Salve as alterações

   Após editar, clique em Salvar no editor de texto. Seu site já está mais rápido!

Quais imagens devem usar o lazy loading?

Use loading="lazy" em:

• Imagens de fundo (backgrounds)
• Imagens em galerias
• Imagens abaixo da dobra (ou seja, que aparecem depois de rolar)
• Imagens em páginas com muitos conteúdos visuais

Dica Sensei: Evite usar lazy loading em imagens acima da dobra (como o cabeçalho do site). Elas devem carregar logo no início para não deixar o visitante esperando.

Pronto! Você está no caminho certo

Com esse pequeno ajuste, você já está contribuindo para um web mais rápido, mais eficiente e mais amigável. E o melhor: não precisa de plugins, scripts ou conhecimento avançado de programação.

Se você quiser, posso te ajudar a revisar seu código ou mostrar como fazer isso em sites com WordPress, Shopify ou outros sistemas. É só chamar!

Com carinho, sua Sensei da GeHost 🌿