Lazy loading e SEO

Este artigo resume os principais temas e fatos sobre o carregamento lento (lazy loading), com foco em suas implicações para o SEO, com base no último vídeo publicado do canal Google Search Central “Lazy loading demystified” do Google.

O que é lazy loading?

O Lazy Loading é uma técnica que visa carregar recursos (como imagens, vídeos, iframes e até mesmo conteúdo de API) apenas quando são necessários, ou seja, quando o usuário está prestes a visualizá-los.

Análises técnicas de SEO precisam estar atentas a estes pontos.

A ideia com o lazy loading é carregar recursos apenas quando você precisa deles, em vez de carregar tudo ao mesmo tempo e depois tornar tudo um pouco mais lento para tudo que você está carregando e também usar todos os tipos de recursos como bateria, energia, tráfego de rede, essas coisas.

Por que usar lazy loading?

Os principais motivadores para a implementação do lazy loading são:

• Performance: Melhora a velocidade de carregamento da página, pois o navegador não precisa processar todos os recursos de uma vez.
• Economia de recursos: Reduz o consumo de bateria, dados de rede e outros recursos do dispositivo do usuário.
• Experiência do usuário (UX): Proporciona uma experiência mais fluida, especialmente em páginas longas ou com muito conteúdo visual.

Evolução e implementação do lazy loading

Historicamente, o lazy loading exigia a implementação manual com JavaScript ou bibliotecas específicas. No entanto, houve um avanço significativo:

• Atributo loading nativo: Os navegadores modernos (há alguns anos) introduziram um atributo loading=”lazy” para imagens e iframes;
• WordPress: O WordPress agora usa o lazy loading de imagens por padrão, o que contribui para sua disseminação e para a diminuição da discussão em torno de implementações complexas.

Lazy loading e SEO: considerações principais

Performance e Core Web Vitals

• O lazy loading impacta diretamente a performance do site, que é um fator de ranqueamento.
• Largest Contentful Paint (LCP): A principal métrica do Core Web Vitals afetada.Se você não estiver usando lazy loading onde deveria, isso provavelmente afetará algum aspecto dos Core Web Vitals, muito provavelmente o Largest Contentful Paint.
• Cuidado: Usar lazy loading para imagens acima da dobra (hero images) pode atrasar o LCP e prejudicar a experiência do usuário.
  

Uma auditoria de SEO deve sempre estar atenta a estes indicadores.

Indexação

• Native Lazy Loading (loading=”lazy”): Geralmente não tem um impacto negativo na indexação do Google. O Googlebot consegue ver o atributo src da imagem e a carrega normalmente, apenas um pouco mais tarde;
• Lazy Loading Customizado (JavaScript/Bibliotecas): Pode ter implicações na indexação se não for implementado corretamente;
• Problema comum: Usar atributos personalizados (ex: data.source em vez de src) para o URL da imagem. Se o Googlebot não conseguir encontrar o URL no atributo src, a imagem não será indexada.

Por que usar bibliotecas customizadas?

Apesar do lazy loading nativo, as bibliotecas customizadas ainda são usadas por algumas razões:

• Sistemas legados: Sites antigos que já possuem uma implementação funcionando e não foram atualizados;
  Funcionalidades avançadas:Carregar previews de baixa resolução e depois trocar pela versão de alta resolução;
• Lazy loading de elementos que não sejam imagens ou iframes (vídeos, conteúdo de API, widgets, comentários, etc.);
• Experiências de usuário personalizadas: Transições e comportamentos específicos que o comportamento nativo não oferece.

Como verificar a implementação do Lazy Loading (para SEOs)

• Google Search Console – Ferramenta de Inspeção de URL: Use a ferramenta para inspecionar a URL da página.
• Examine o “HTML Renderizado”: Verifique se todas as URLs de imagem estão presentes no atributo src da tag <img> e se o conteúdo lazy loaded (widgets, comentários) está visível.
• Verificar a indexação de imagens: Se as imagens não estiverem sendo indexadas em escala, pode ser um sinal de problema com a implementação do lazy loading.

Diferença entre lazy loading e infinite scroll

Embora relacionados, há uma diferença filosófica:

Lazy Loading: Carrega recursos não críticos da mesma página.

Lazy loading é carregar recursos não críticos de uma página, então digamos imagens ou conteúdo adicional como comentários e essas coisas, então é o mesmo conteúdo da página, são apenas partes do mesmo conteúdo da página.

Infinite Scroll: Carrega conteúdo adicional que efetivamente estende a página, tornando-a “infinita”.

Enquanto o infinite scroll carrega conteúdo adicional e meio que torna a página infinita em termos de conteúdo, todo o conteúdo vive nesta página agora.

Desafio do Infinite Scroll: A navegação pode ser frustrante se o usuário perder o ponto na rolagem. Requer uma maneira de expressar o ponto atual na URL.

Lazy loading de vídeos

• Vídeos são intensivos em recursos e se beneficiam do lazy loading;
• Pode-se carregar uma imagem de pôster e só iniciar o carregamento do vídeo quando ele entrar na viewport;
• Também usado por motivos de privacidade: Carregar conteúdo de vídeo externo apenas após o consentimento do usuário.

Imagens decorativas e CSS

Imagens decorativas (ícones, bullet points customizados) geralmente não devem ser carregadas via tag <img> no HTML se não tiverem significado semântico.

É preferível carregá-las via CSS. Imagens CSS não são consideradas lazy loading e não são indexadas para pesquisa de imagens, o que é apropriado para seu propósito decorativo.

Conclusão

Para a maioria dos sites, o lazy loading é mais simples de implementar hoje em dia graças às soluções nativas nos navegadores. Para implementações customizadas, é fundamental que os SEOs verifiquem o HTML renderizado no Search Console para garantir que o conteúdo e as imagens sejam corretamente visíveis para o Googlebot e não haja impacto negativo na indexação ou nas métricas de performance.