Lazyload

O que é e porque usar?

O lazy loading, ou carregamento adiado, é uma técnica que adia o carregamento de recursos não críticos no carregamento inicial da página. Recursos não críticos são aqueles que estão além da primeira dobra do site, ou seja, aquilo que visualizado logo que a página e carregada e sem realizar o scroll.

Essa técnica pode ser aplica em qualquer elemento de um site, mas é amplamente utilizada em imagens e vídeos. Ela reduz o tempo de carregamento inicial da página, o peso dela e o uso dos recursos computacionais, gerando impactos positivos no desempenho, além de permitir a interação do usuário muito mais rápida.

Como implementar?

Existem duas maneiras de implementar o Lazy Loading atualmente: através de scripts terceiros ou através de atributo HTML, cada um com suas vantagens e desvantagens.

Atributo HTML

O atributo loading="lazy" em tags HTML de imagens, video e iframe para indicar que o carregamento desse ver adiado até ser visualizado pelo usuário. Veja o exemplo abaixo para o carregamento de uma imagem.

Exemplo

<img src="image.png" loading="lazy" alt="Image alt text" width="200" height="200">

Apesar dessa técnica não necessitar de nenhum script adicional, ela se baseia muito no suporte dos navegadores a técnica. Atualmente o suporte dela não é uniforme entre todos os navegadores disponíveis e pode resultar em divergências de experiencias pelos usuários.

O site Can I Use permite verificar se esse e dezenas de outros recursos estão disponíveis nos navegadores modernos.

Repare que para esse caso do atributo loading="lazy" a porcentagem de usuários atingidos sem maiores problemas ainda gira entorno de 71%, o que consideramos uma margem muito baixa para adotar essa técnica como padrão. Um bom limiar é a partir de 90%, pois indica que todos os grandes navegadores já suportam a funcionalidade.

Scripts terceiros

Scripts e bibliotecas de terceiros permitem implementar a técnica de lazy loading sem depender do suporte pelo navegador. Na maioria poucos ajustes no código são necessários para começar usar essa técnica.

Dessa maneira, é possível abranger um leque maior de usuários, gerando uma experiência unificada entre todos, agradando mais os visitantes.

Lembre-se que scripts de terceiros agregam carregamentos adicionais a página, então é necessário medir o impacto que eles terão e o se o benefício vale a pena. Em vias de regra, a implementação da técnica de lazy loading sempre é benéfica.