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.
