Como aumentar a velocidade da página usando Lazy Loading em imagens

O Lazy Loading é uma forma de adiar o processo ou carregamento de algo e pode ser utilizado em várias áreas. Utilizando em imagens, significa carregá-las apenas quando estiver no viewport (área visível do navegador), aumentando a velocidade do carregamento da página.

Essa técnica é usada atrás do JavaScript, adicionando um atributo na tag img com endereço completo da imagem, e enquanto vai sendo acessado na área visível, ela irá carregando.

Essa técnica não é nova, mas muitas vezes não era performática com as técnicas utilizadas. O surgimento da API Intersection Observer , fez melhorar a performance para utilizar essa técnica de Lazy Loading nas imagens.

Basicamente com API Intersection Observer, é possível detectar quando o elemento entrar ou sair do viewport, sendo possível assim, otimizar mais a utilização da técnica do Lazy Loading.

BIBLIOTECA LOZAD.JS PARA LAZY LOADING

O Lozad.js é uma biblioteca que utiliza o recurso da API Intersection Observe para realizar o carregamento Lazy Loading. Ele tem 731 bytes minificado e com gzip, não possui dependência de framework ou biblioteca, permite carregamento de elementos dinamicamente e suporta imagens responsivas e background em elementos, como em div’s.

Como Utilizar

Adicione a tag head do seu html o script do lozad.js, você utilizar via CDN:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Agora nas suas imagens que você deseja ter o recurso do lazy loading, basta adicionar a classe lozad, e o atributo data-src com o endereço da imagem.

<img class="lozad" data-src="nome-pasta/imagem.jpg" alt="Imagem" />

Agora após definir as imagens, você adiciona o script:

<script type="text/javascript">
 lozad().observe();
</script>

Se quiser adicionar dentro do head, após o script do lozad, você pode usar DOMContentLoaded

<script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function(){
        lozad().observe();
});
</script>

Caso queira utilizar em background a imagem para carregar Lazy Loading, o HTML ficaria assim:

<div class="lozad" data-background-image="nome-pasta/imagem.png">


</div>

Você pode criar um efeito simples de fade usando CSS, passando configurações para lozad.js, para adicionar essa classe na imagem. Segue o código CSS:

 .fadein {
         animation-name: fadein;
         animation-duration: 2s;
            }

        @keyframes fadein {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

Vamos alterar o código do lozad:

<script>
           lozad('.lozad', {
                            load: function(target) {
                                    target.src = target.dataset.src;
                                    target.onload = function() {
                                        target.classList.add('fadein');
                                    }
                            }
            }).observe();
        
</script>

Veja o resultado:

https://www.mxcursos.com/blog/exemplos/lazyloading

Para dar suporte a navegadores mais antigos, basta utilizar o Polyfill, antes de chamar o script lozad.js

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Dessa forma, você consegue utilizar em navegadores que não dão suporte API Intersection Observer.

Essa é uma ótima alternativa se você deseja aumentar a velocidade do carregamento da página, principalmente se ela possui muitas imagens.

Você tem alguma experiência com lazy loading? Caso tenha, divida conosco essa experiência!

Espero que esse artigo tenha lhe ajudado e até a próxima.