Melhore Seu SEO com Lazy Loading: Guia Prático para Otimizar Imagens Fora da Tela com Lazysizes

Dicas e Truques para Desenvolvedores

Na Neocodex Design, nossa missão é colocar nosso site no topo dos resultados de busca do Google. No entanto, enfrentamos um desafio comum: uma pontuação baixa no Google PageSpeed Insights, que prejudicava nosso ranqueamento. Um dos principais problemas? O carregamento lento de imagens.

Após horas de pesquisa, encontramos uma solução poderosa inspirada nas dicas de Addy Osmani: lazy loading de imagens fora da tela com a biblioteca lazysizes. Essa mudança simples transformou o desempenho do nosso site e melhorou nosso SEO. Hoje, compartilhamos esse truque porque conhecimento deve ser passado adiante — e ele pode ser útil para você também!

Neste artigo, vamos explicar como implementar lazy loading de imagens, por que isso é crucial para o SEO e como usar o lazysizes para tornar seu site mais rápido e amigável. Vamos lá?

Por que o Lazy Loading é Importante para o SEO?

O lazy loading (ou carregamento preguiçoso) atrasa o carregamento de recursos não essenciais — como imagens fora da tela inicial — até que o usuário role até eles. Isso reduz o tempo de carregamento inicial da página, um fator-chave para experiência do usuário e SEO. Veja por que isso faz diferença:

• Melhor Pontuação no PageSpeed Insights: O Google valoriza sites rápidos. O lazy loading diminui a quantidade de dados carregados inicialmente, aumentando sua pontuação de desempenho.
  
  
• Experiência do Usuário Aprimorada: Páginas mais rápidas deixam os usuários mais satisfeitos, reduzem a taxa de rejeição e aumentam o engajamento — todos sinais que o Google considera para ranqueamento.
  
  
• Benefícios de SEO: Um site mais rápido tem mais chances de aparecer nas primeiras posições, já que a velocidade da página é um fator de ranqueamento direto para buscas em desktop e mobile.

Na Neocodex Design, vimos como o lazy loading revolucionou o desempenho do nosso site. Agora, vamos mostrar como você pode fazer o mesmo.

O Problema: Carregamento Pesado de Imagens

Imagens costumam ser os elementos mais pesados de uma página web. Por padrão, os navegadores carregam todas as imagens assim que a página é solicitada, incluindo aquelas que estão muito abaixo da tela e que o usuário talvez nunca veja. Isso aumenta o tempo de carregamento inicial, prejudica sua pontuação no PageSpeed Insights e pode afetar negativamente o SEO.

O PageSpeed Insights do Google apontou que nosso site precisava "adiar imagens fora da tela", destacando que imagens estavam sendo carregadas desnecessariamente. Após pesquisas, encontramos uma solução leve e confiável: lazy loading com lazysizes.

A Solução: Lazy Loading com Lazysizes

A biblioteca lazysizes é uma ferramenta poderosa e sem dependências que facilita o lazy loading de imagens (e outros elementos). Combinada com o lazy loading nativo dos navegadores modernos, ela garante compatibilidade e desempenho. Veja como implementá-la passo a passo.

• Passo 1: Atualize Suas Tags de Imagem

  
  Para ativar o lazy loading, modifique suas tags <img>. Em vez de usar o atributo src, use data-src para armazenar a URL da imagem. Adicione o atributo loading="lazy" para o lazy loading nativo e a classe lazyload para que o lazysizes reconheça a imagem.
  
  Exemplo de como seu HTML deve ficar:
  

  <img data-src="images/logo/logo03.svg" loading="lazy" class="lazyload" alt="E-Commerce"/>

  
  

  data-src: Contém a URL da imagem, que o lazysizes carrega quando a imagem entra na área visível.
  loading="lazy": Ativa o lazy loading nativo em navegadores que o suportam (como Chrome, Edge e Firefox).

  class="lazyload": Indica ao lazysizes que deve gerenciar essa imagem se o lazy loading nativo não estiver disponível.

  alt: Sempre inclua um texto alternativo descritivo para acessibilidade e SEO.

  Repita isso para todas as imagens que deseja carregar de forma preguiçosa, especialmente aquelas fora da tela inicial.
  
  

•  

  Passo 2: Adicione o Script do Lazysizes

  Coloque o seguinte script no final do seu arquivo HTML, logo antes da tag de fechamento </body>. Esse script verifica se o navegador suporta lazy loading nativo. Se sim, ele ativa as imagens; se não, carrega a biblioteca lazysizes como fallback.
  

  <script>
    if ('loading' in HTMLImageElement.prototype) {
        // Navegador suporta lazy loading nativo
        const images = document.querySelectorAll("img.lazyload");
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Fallback: Carrega a biblioteca lazysizes
        let script = document.createElement("script");
        script.async = true;
        script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js";
        document.body.appendChild(script);
    }
  </script>

  
  Nota: Atualizamos a versão do lazysizes para 5.3.2 (a mais recente em abril de 2025) para melhor desempenho e compatibilidade. Sempre verifique a versão mais atual no CDNJS.

• Passo 3: Teste Sua Implementação 

• • Após adicionar o código:
    • Execute o PageSpeed Insights: Verifique se o aviso de "adiar imagens fora da tela" foi resolvido e se sua pontuação melhorou.
    • Teste nas Ferramentas do Desenvolvedor: Abra as ferramentas do desenvolvedor do navegador (F12), vá para a aba Rede e role pela página. As imagens devem carregar apenas quando entrarem na área visível.
    • Confira a Acessibilidade: Certifique-se de que o texto alternativo é descritivo e que as imagens com lazy loading não atrapalham leitores de tela.

Por que Isso Funciona?

Essa abordagem é uma solução ganha-ganha:

• Lazy Loading Nativo: Navegadores modernos lidam com loading="lazy" de forma eficiente, sem necessidade de scripts externos.
• Fallback com Lazysizes: Para navegadores mais antigos, o lazysizes garante compatibilidade sem sobrecarregar seu site.
• Impulso no SEO: Tempos de carregamento mais rápidos melhoram sua pontuação no PageSpeed Insights, mostrando ao Google que seu site é otimizado.
• Código Leve: A solução é simples e não exige configurações complexas.

Na Neocodex Design, essa técnica reduziu significativamente o tempo de carregamento das páginas e aumentou nossas pontuações mobile e desktop. É uma mudança pequena com grande impacto.

Dicas Extras para Sucesso com Lazy Loading

• Otimize Suas Imagens Antes:

• • Comprima imagens com ferramentas como TinyPNG ou ImageOptim.
    
    
  • Use formatos modernos como WebP para arquivos menores sem perda de qualidade.
    
    
  • Especifique os atributos width e height para evitar mudanças de layout (Cumulative Layout Shift, outro fator de SEO).
    

    <img data-src="images/logo/logo03.webp" loading="lazy" class="lazyload" alt="E-Commerce" width="200" height="100"/>
    
    

• Evite Lazy Loading em Imagens Acima da Tela:

• • Imagens visíveis imediatamente (como banners principais) devem carregar normalmente com src para evitar atrasos na renderização de conteúdo crítico.
    
    
  • Aplique lazy loading apenas em imagens abaixo da tela inicial.

• Teste em Diferentes Navegadores:

• • Verifique se o lazy loading funciona no Chrome, Firefox, Safari e Edge. Use ferramentas como BrowserStack para testes multiplataforma.

• Monitore o Desempenho:

• • Utilize Google Analytics ou Lighthouse para acompanhar melhorias no tempo de carregamento e engajamento após implementar o lazy loading.

• Considere Lazy Loading para Outros Elementos:

• • O lazysizes também pode carregar iframes, vídeos ou imagens de fundo de forma preguiçosa. Consulte a documentação oficial para casos avançados.

Os Resultados na Neocodex Design

Após implementar o lazy loading com lazysizes, nossa pontuação no PageSpeed Insights subiu 20 pontos nas versões mobile e desktop. Nosso site carregou mais rápido, os usuários passaram mais tempo navegando e começamos a subir nos resultados de busca do Google. Essa pequena mudança fez uma diferença enorme, provando que otimizar desempenho nem sempre exige grandes reformulações.

Experimente Você Mesmo!

Pronto para acelerar seu site e melhorar seu SEO? Siga os passos acima para implementar o lazy loading com lazysizes. É uma solução rápida com resultados impressionantes. Para mais dicas e truques, visite nosso site oficial em Neocodex Design, onde compartilhamos conselhos práticos para desenvolvedores e empresas.

Tem dúvidas ou quer compartilhar sua experiência? Deixe um comentário abaixo — adoraríamos ouvir você! Obrigado por ler, e boa sorte com suas otimizações!

Por hoje é só!