O lazy loading (carregamento diferido) é uma técnica que consiste em carregar as imagens e recursos de uma página web apenas quando estão prestes a ser exibidos no ecrã, em vez de carregar tudo de uma só vez no primeiro renderizado. Para lojas de comércio eletrónico com dezenas ou centenas de imagens de produtos, esta otimização reduz drasticamente o peso inicial da página e melhora o desempenho percebido pelos visitantes.
Como funciona o lazy loading?
Sem lazy loading, o browser faz o download de todas as imagens presentes no HTML no carregamento inicial — incluindo as que estão no fundo da página e que o visitante talvez nunca chegue a ver. Com o lazy loading, apenas as imagens visíveis no viewport ou na sua proximidade imediata são carregadas. As restantes ficam em espera até o utilizador fazer scroll até elas.
O resultado é imediato: a página é exibida mais rapidamente, consomem-se menos dados e o servidor recebe menos pedidos simultâneos. Numa página de listagem de produtos PrestaShop com 40 artigos, isto pode reduzir o número de imagens carregadas na entrada de 40 para apenas 6 a 8 — uma poupança de peso considerável.
Lazy loading nativo HTML: o atributo loading="lazy"
Desde 2019–2020, todos os browsers modernos suportam nativamente o lazy loading através de um simples atributo HTML na tag img: `loading="lazy"`. Basta adicionar este atributo para que o browser gira automaticamente o carregamento diferido, sem necessidade de JavaScript ou bibliotecas de terceiros.
Exemplo: `
`. Especificar os atributos width e height é importante: permite ao browser reservar o espaço no layout antes de a imagem ser carregada, evitando deslocamentos visuais (CLS — Cumulative Layout Shift).
A abordagem JavaScript: a API Intersection Observer
Antes do suporte nativo — e ainda hoje para casos de uso avançados — o lazy loading era implementado através da API JavaScript Intersection Observer. Esta API deteta com precisão quando um elemento do DOM entra no viewport e desencadeia nesse momento o carregamento da imagem. Oferece mais controlo: é possível definir uma margem de ativação (por exemplo, começar a carregar 300px antes de a imagem entrar no ecrã) para eliminar qualquer efeito de flash visual.
Nunca aplique lazy loading a imagens above-the-fold!
Impacto nos Core Web Vitals
O lazy loading aplicado corretamente melhora várias métricas dos Core Web Vitals. Reduz o peso total carregado inicialmente, o que melhora o LCP (Largest Contentful Paint) para imagens above-the-fold — o browser dedica a sua largura de banda aos recursos prioritários em vez de a distribuir por todas as imagens da página. Reduz também o TBT (Total Blocking Time) ao diminuir o processamento de rede inicial.
Pelo contrário, aplicado incorretamente — especialmente ao aplicar lazy loading à imagem hero — pode fazer disparar o LCP. Este é um dos erros mais frequentes detetados em lojas PrestaShop auditadas: um tema que aplica loading="lazy" a todas as imagens indiscriminadamente, prejudicando precisamente a métrica que se pretendia melhorar.
O Google indexa imagens com lazy loading?
Sim. O Googlebot consegue ver e indexar imagens carregadas com lazy loading. O Google confirmou que o seu crawler executa JavaScript e aguarda o acionamento dos carregamentos diferidos. Recomenda-se, no entanto, usar o lazy loading nativo HTML (atributo loading) em vez de uma implementação JavaScript personalizada para garantir uma indexação otimizada.
Lazy loading e CDN: uma combinação vencedora
Lazy loading no PrestaShop
O PrestaShop não oferece lazy loading nativo ativável com um clique no back office. A implementação depende do tema utilizado. Os temas recentes (Classic 1.7+, Hummingbird) incluem geralmente o atributo loading="lazy" nas imagens de listagem. Se o seu tema não o prevê, é necessário modificar os templates Smarty relevantes ou instalar um módulo dedicado.
- Imagens de listagem (categorias, pesquisa, novidades): ideais para lazy loading — situam-se frequentemente fora do viewport inicial
- Imagem principal da ficha de produto: NÃO aplicar lazy loading — é frequentemente o elemento LCP da página
- Miniaturas no carrinho ou em blocos de 'produtos relacionados': lazy loading recomendado
- Banners hero na página inicial: NÃO aplicar lazy loading, usar fetchpriority="high"
- Imagens em avaliações de clientes ou conteúdos em acordeão: lazy loading recomendado