Imagine uma página com dez imagens.
O visitante entra para ler o primeiro parágrafo.
As outras nove imagens estão muito abaixo da área que ele está vendo.
Mesmo assim, seria possível que o navegador tentasse carregar todas elas imediatamente.
Isso pode desperdiçar banda e aumentar o trabalho necessário para abrir a página.
É justamente nesse cenário que o lazy loading pode ajudar.
O que significa lazy loading?
O termo pode ser traduzido livremente como “carregamento preguiçoso”.
A ideia é simples:
não carregue agora aquilo que ainda não é necessário.
Em vez de baixar imediatamente todos os recursos de uma página, determinados elementos podem ser carregados apenas quando estiverem próximos de serem visualizados.
Um exemplo prático
Imagine um artigo de 3.000 palavras com quinze imagens.
Quando o usuário abre o artigo, provavelmente está vendo apenas a primeira imagem.
Não existe necessariamente motivo para baixar imediatamente as outras quatorze.
Conforme o visitante rola a página, os elementos necessários podem começar a ser carregados.
Isso reduz o peso inicial da página
Uma página com muitas imagens pode transferir uma quantidade considerável de dados.
Com carregamento sob demanda, o navegador pode evitar baixar recursos que talvez nunca sejam utilizados.
Isso é especialmente interessante em dispositivos móveis.
Mas existe um equilíbrio
Lazy loading não significa simplesmente colocar tudo para carregar depois.
Alguns elementos são importantes para a primeira visualização da página.
Se a imagem principal for carregada tarde demais, a experiência pode piorar.
Por isso, recursos críticos devem ser tratados de maneira diferente.
Imagens são o exemplo mais conhecido
O lazy loading é particularmente útil para imagens abaixo da área inicialmente visível.
Um site de notícias, por exemplo, pode ter dezenas de imagens ao longo da página.
Carregar todas imediatamente pode ser desnecessário.
Também pode existir carregamento sob demanda de outros recursos
A mesma ideia pode ser aplicada a determinados scripts, componentes, vídeos e funcionalidades.
Em aplicações modernas, isso pode contribuir para reduzir o trabalho inicial do navegador.
Lazy loading resolve todos os problemas de performance?
Não.
Se uma imagem possui 5 MB, carregá-la “um pouco depois” não transforma aquele arquivo em um arquivo leve.
O ideal é combinar técnicas.
Por exemplo:
imagem otimizada + formato adequado + dimensões corretas + lazy loading
Cada uma resolve um problema diferente.
O impacto para sites de conteúdo
Para um blog como a General Solution, essa estratégia pode ser especialmente interessante.
Um artigo pode conter:
- imagem de destaque;
- imagens ao longo do texto;
- banners;
- elementos incorporados;
- recomendações.
Carregar somente o que é necessário naquele momento ajuda a evitar desperdícios.
Conclusão
Lazy loading segue uma filosofia bastante simples:
entregue primeiro o que o usuário precisa agora e deixe o restante para depois.
Quando aplicado corretamente, pode ajudar a reduzir o carregamento inicial e tornar páginas com muito conteúdo visual mais eficientes.
