DEV Community

Cover image for O que é Lazy Loading?
Felipe Figueiredo Amorim
Felipe Figueiredo Amorim

Posted on

O que é Lazy Loading?

💡 O que é Lazy Loading?

Lazy loading é uma técnica de otimização que carrega recursos de uma página somente quando eles são realmente necessários. Ao invés de carregar todo o conteúdo de uma vez, imagens, vídeos ou scripts são carregados conforme o usuário rola a página ou interage com ela.

🔍 Por que usar Lazy Loading?

  • Melhor performance: Carrega apenas o que é visível, inicialmente reduz o tempo de carregamento da página, proporcionando uma experiência mais rápida e fluida.

  • Economiza banda de rede: Evita carregar recursos que talvez o usuário nem veja, economizando dados, o que é excelente para dispositivos móveis.

  • Melhor SEO: O Google valoriza sites rápidos e bem otimizados, melhorando o ranqueamento da sua página nos resultados de pesquisa.


✅ Prós:

  1. Carregamento inicial mais rápido.

  2. Redução de uso de banda e recursos.

  3. Melhor experiência do usuário (UX) em dispositivos com conexões mais lentas.

❌ Contras:

  1. Implementação pode ser complexa em projetos maiores.

  2. Potenciais problemas com SEO se mal configurado (ex.: indexação de imagens).

  3. Alguns navegadores mais antigos podem não suportar essa técnica adequadamente.


🔧 Como usar Lazy Loading no seu site?

HTML5 nativo: Adicione o atributo loading="lazy" em imagens e iframes diretamente no seu HTML.

<img src="image.jpg" loading="lazy" alt="Imagem com Lazy Loading">
Enter fullscreen mode Exit fullscreen mode

💻 Exemplo:


🔧 Conclusão:

O lazy loading é uma ferramenta poderosa para otimizar sites e aplicações, especialmente em tempos de maior foco na experiência do usuário e velocidade de carregamento. Ao usá-lo corretamente, você pode deixar seu Website mais rápido e otimizado.

Top comments (0)