O lazy loading (ou "carregamento preguiçoso", em tradução livre) é uma forma de otimizar o carregamento de páginas da web, ao baixar recursos (como imagens, vídeos, scripts e outros elementos) apenas quando são necessários, em vez de carregá-los todos de uma vez, que é o comportamento padrão.

Isso reduz o tempo de carregamento da página (importante para SEO) e economiza o consumo de banda, principalmente em sites com muitos elementos visuais.

Lazy loading de imagens e vídeos

Usando o loading="lazy"

Com o atributo "loading" (HTML5) na tag da imagem ou vídeo, é possível definir como os recursos devem ser carregados. Usando o valor "lazy" numa imagem garante que ela só será carregada quando estiver próxima ao à área visível na tela:

<img src="imagem-rodape.png" alt="imagem no rodapé" loading="lazy">

Outros valores possíveis são loading="eager" (carregamento assim que possível, é o comportamento padrão) e loading="auto" (deixar a decisão sobre o carregamento com o browser).

Usando JavaScript

Há várias bibliotecas JavaScript que implementam o lazy loading de imagens, como LazyLoad, Intersection Observer API, etc. Essas bibliotecas monitoram a posição das imagens na página e carregam as que estão próximas ao viewport.

Lazy loading de scripts

Você pode atrasar o carregamento de scripts menos essenciais, permitindo que os elementos principais da página sejam exibidos primeiro.

Carregamento assíncrono

Use o atributo "async" ou o atributo "defer" na tag do script para carregar o script de forma assíncrona, permitindo que a página continue sendo carregada enquanto o script é baixado:

<script src="meu_script_bacana.js" async></script>

<script src="meu_outro_script.js" defer></script>

A diferença entre async e defer é que async executa o script assim que é baixado de forma assíncrona, já o defer aguarda até que todos os recursos da página estejam carregados antes de executar o script.

IMPORTANTE: se o script depende de outros recursos ou scripts carregados anteriormente, é melhor usar o atributo "defer" para evitar conflitos e erros de dependência.

Carregamento condicional

Você pode optar por carregar scripts somente quando forem necessários, por exemplo, após uma interação do usuário ou em uma determinada seção da página:

<script>
    // Verifica se uma condição específica é verdadeira
    if (condicao) {
      const script = document.createElement("script");
      script.src = "meu_script_bacana.js";
      document.body.appendChild(script);
    }
</script>

Lazy loading de conteúdo abaixo do fold

Esse é o carregamento tardio não só de imagens, scripts e outros recursos, mas do próprio conteúdo da página à medida em que o usuário vai rolando para baixo. Um exemplo disso é uma página de produto em certas lojas virtuais: avaliações de compradores e produtos sugeridos podem ser carregados para aparecer apenas quando visíveis. Outro exemplo é o carregamento dinâmico de posts ao rolar pelo feed do Facebook ou Instagram.

Isso é possível com bibliotecas JavaScript como LazyLoad, Intersection Observer API, lozad.js, lazysizes, yall.js ou Layzr.js, entre outras, ou frameworks como React, Angular, etc. Escolha a tecnologia que melhor atenda as suas necessidades e se integra ao seu projeto.

Lembre-se de que a implementação específica do lazy loading dependerá do ambiente e das necessidades do seu site. É sempre uma boa prática verificar a compatibilidade com browsers mais antigos e fazer testes para garantir que a funcionalidade seja bem-sucedida em diferentes cenários.