Desempenho & CDN 10 visualizações

Como configurar lazy loading de imagens e vídeos para acelerar o carregamento

Ver no WHMCS

Como Configurar Lazy Loading de Imagens e Vídeos para Acelerar o Carregamento

Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! 🌟 Seja bem-vindo(a) ao nosso Sensei da GeHost — seu guia de confiança para deixar seu site mais rápido, leve e incrível. Hoje vamos falar de um segredinho poderoso que faz toda a diferença: o lazy loading (carregamento preguiçoso).

Imagine que seu site tem 50 imagens. Se todas carregarem ao mesmo tempo, o seu visitante vai esperar muito. Com o lazy loading, apenas as imagens que estão na tela principal carregam de imediato. As demais só aparecem quando o visitante rolar a página — como mágica! 🎩✨

Dica do Sensei: Sites com lazy loading carregam até 3x mais rápido em dispositivos móveis. Isso aumenta o tempo do visitante no site e melhora o SEO. É como dar um "pulo" no desempenho!

Passo a Passo: Ativando Lazy Loading no Seu Site

Na GeHost, você pode ativar o lazy loading de forma simples, sem precisar de código complexo. Vamos lá:

  1. Acesse o Gerenciador de Arquivos do cPanel
    Faça login no cPanel (não se preocupe, é só usar seu usuário e senha). Tela de LOGIN do cPanel (campos Usuário e Senha + botão Log in)
  2. Abra a pasta do seu site
    No painel principal do cPanel, clique em Gerenciador de Arquivos (File Manager). Painel inicial (home) do cPanel com os grupos de ferramentas (E-mail, Arquivos etc.)
  3. Navegue até o diretório público
    No Gerenciador de Arquivos, clique em public_html — essa é a pasta raiz do seu site. Gerenciador de Arquivos — árvore de pastas (public_html etc.) e barra de ações
  4. Edite o arquivo de configuração do seu tema
    Procure pelo arquivo index.html ou index.php (ou o arquivo principal do seu site). Clique nele com o botão direito e selecione Editar.

    Importante: Antes de editar, faça um backup do arquivo. Você pode usar o botão Backup no cPanel para salvar uma cópia.
  5. Adicione o atributo loading="lazy" nas imagens e vídeos
    Procure pelas tags de imagem (<img>) e vídeo (<video>) no código.

    Exemplo de imagem antes:
    <img src="foto1.jpg" alt="Minha foto" />

    Exemplo de imagem depois (com lazy loading):
    <img src="foto1.jpg" alt="Minha foto" loading="lazy" />

    Para vídeos, faça o mesmo:
    <video src="video.mp4" controls loading="lazy"></video>
  6. Salve as alterações
    Após editar, clique em Salvar no editor. Seu site já está mais rápido! 🚀

Pronto! Sua página agora carrega mais rápido

Com esse pequeno ajuste, você está ajudando seu site a:

  • Carregar mais rápido, especialmente em celulares.
  • Consumir menos dados do visitante.
  • Ter melhor desempenho no Google (o que ajuda no ranqueamento).
Sensei diz: "Não é só técnica — é cuidado com o usuário. Quando o site é rápido, o visitante sente que foi bem-vindo. E isso é ouro!"

Se precisar de ajuda com o código ou quiser que a GeHost faça essa configuração por você, é só entrar em contato com nosso suporte. Estamos aqui para te ajudar, sempre com um sorriso. 😊

Até a próxima dica, e que seu site cresça com leveza e velocidade! 🌱⚡

Precisa de Ajuda?

Nossa equipe está pronta para resolver suas dúvidas.