Lazy loading — “carregamento preguiçoso” — é a técnica de adiar o carregamento de elementos específicos até que o usuário realmente precise deles, em vez de carregar tudo de uma vez assim que a página abre. Como imagens representam entre 50% e 60% do peso total de uma página web típica, essa é uma das otimizações com maior retorno prático para performance.
Como funciona, na prática
Em vez de baixar todas as imagens de um artigo com 20 fotos assim que o visitante abre a página, o navegador carrega inicialmente só as primeiras — as que aparecem sem precisar rolar a tela — e vai buscando as demais conforme o usuário rola para baixo. Se a pessoa lê só o primeiro parágrafo e sai, boa parte do peso da página nunca chegou a ser baixada, economizando banda e acelerando o carregamento inicial percebido.
O que pode (e costuma) ser carregado de forma preguiçosa
- Imagens — o caso de uso mais comum, já que a maioria das páginas contém várias.
- Vídeos incorporados — de plataformas como YouTube, adiados até estarem próximos da área visível.
- Iframes — mapas incorporados, widgets externos, carregados só quando necessário.
- Widgets sociais e seções de comentário — elementos secundários que raramente precisam estar disponíveis no primeiro instante de carregamento.
Implementação nativa é o padrão recomendado hoje
O atributo HTML loading="lazy" já é nativo do navegador, com suporte amplo, simples de aplicar e sem exigir JavaScript adicional — a recomendação padrão para a maioria dos casos. Soluções em JavaScript (via Intersection Observer API) só se justificam quando é necessário controle mais fino, como efeitos de fade-in personalizados ou placeholders customizados enquanto a imagem carrega.
O erro mais comum: aplicar lazy loading no elemento errado
Existe um cuidado crítico que costuma passar despercebido: nunca aplicar lazy loading ao elemento responsável pelo LCP (Largest Contentful Paint) — geralmente a imagem principal, “acima da dobra”. Aplicar loading="lazy" nesse elemento faz o navegador atrasar seu carregamento até considerar que ele está próximo da área visível, adicionando atraso real justamente à métrica que o lazy loading deveria estar ajudando a melhorar. Esse é um dos anti-padrões de performance mais comuns, e ferramentas como o Lighthouse sinalizam esse erro especificamente.
O impacto real em Core Web Vitals
Quando implementado corretamente, lazy loading reduz o LCP ao diminuir o peso inicial da página, permitindo que o conteúdo crítico carregue mais rápido — e melhora o CLS (Cumulative Layout Shift) quando as dimensões da imagem são especificadas com antecedência, evitando que o layout “pule” quando a imagem finalmente carrega. Ambas as métricas já cobrimos no post sobre o que faz um site converter, como fatores diretos de ranking e experiência.
Combine com outras otimizações de imagem
Lazy loading funciona melhor combinado com outras práticas: usar formatos modernos como WebP ou AVIF, aplicar o atributo srcset para que o navegador escolha o tamanho de imagem mais adequado ao dispositivo, e sempre definir width/height (ou aspect-ratio) para reservar o espaço da imagem antes dela carregar, evitando o salto de layout que prejudica o CLS.
O que isso significa na prática
Lazy loading é uma das otimizações de performance mais simples de implementar e com maior retorno perceptível — mas, como qualquer técnica de performance, precisa ser aplicada com critério, não em todo elemento indiscriminadamente. A regra prática é: elementos visíveis no primeiro carregamento (especialmente o LCP) carregam de forma imediata; tudo que está fora da tela inicial pode esperar.
Na Tabi Studio, lazy loading faz parte do checklist padrão de otimização de qualquer projeto — sempre validando qual elemento é o LCP antes de aplicar a técnica, para não transformar uma otimização em regressão.
Deixe um comentário