Carregamento demorado, carregamento atrasado.  Ao contrário do que o nome sugere, trabalhar com lazyload é uma das mais importantes estratégias de tratamento de imagens com vistas á performance.

Mas antes de falarmos um pouco mais sobre o lazyload precisamos explicar o que é carregamento antes e depois da dobra. Você sabe o que é a dobra de um site?

Vamos lá.

Chamamos de carregamento antes da dobra  tudo que deve aparecer na tela antes de o usuário dar um scrool no mouse. Vamos imaginar um texto grande como este. Quando o usuário chegar nesta página ele não conseguirá ver todos os parágrafos.  Apenas os primeiros. Para ler todo o texto será necessário usar o scrool do mouse. E isto é o que chamamos de dobra, o primeiro scrool.

Conteúdo antes da dobra, portanto é tudo que aprece no topo da página, antes do primeiro scrool. Conteúdo depois da dobra é o que vai aparecendo conforme o usuário vai “scroolando” pela página.

Isto posto voltemos ao termo lazyload. Carregamento demorado, atrasado se trata de atrasarmos o carregamento das imagens que aparecem depois da dobra. É como se dissemos para o navegador carregar primeiro tudo o que aparece antes da dobra, e deixasse o carregamento das imagens depois da dobra para o final. O ganho de performance está em deixar aquilo é mais demorado para o final.

Existem inúmeras maneiras de se trabalhar o lazyload das imagens. Aqui na Pipeline nós o fazemos de duas formas:

A primeira é setar o atributo loading da tag img, conforme imagem a abaixo:

Destacamos o atributo loading para você identificar.

Mas como nem todas as versões dos navegadores suportam este atributo, para as versões mais antigas nós trabalhamos com biblioteca javascrip ScroolReveal, que além de nos ajudar com o lazyload nos perite fazer algumas animações.