Aumente o desempenho da sua aplicação Angular utilizando Lazy Load para imagens

A parcela de recursos de imagens no payload normal de um site pode ser significativo. Para não ser necessário diminuir esses recursos do projeto, podemos optar pelo lazy loading.

Essa solução diminui o payload da página inicial e o tempo de carregamento, mas sem limitar o conteúdo.

O que é carregamento preguiçoso para imagens?

A técnica consiste em carregar as imagens da aplicação somente quando entrarem no campo visível do usuário de maneira non-blocking.

Essa técnica adia recursos não críticos no tempo de carregamento da página. Então, esses recursos são carregados apenas no momento em que são necessários.

Cenário sem Lazy Load

Veja, neste exemplo, sem fazer o lazy loading. Observamos que as 10 imagens são carregadas de uma vez, sem a menor necessidade. O usuário não vê as 10 imagens inicialmente, portanto, elas não precisam ser carregadas de uma vez.

Melhorando o cenário com Lazy Load

Agora vamos melhorar este cenário. Para isso, vamos utilizar a lib ng-lazyload-image.

Precisamos instalar – basta usar esse comando:

npm install ng-lazyload-image --save

Depois incluímos no app.module:

import { LazyLoadImageModule } from 'ng-lazyload-image';

Adicione LazyLoadImageModule no seu import do app.module:

LazyLoadImageModule

Ficando assim:

Neste momento, já podemos configurar nosso template.

Primeiro, no elemento img passamos três configurações:

• Default Image: imagem padrão
• Error Image: imagem que vai retornar caso tenha erro
• Lazy Load: responsável por fazer o lazy loading das suas imagens

[defaultImage]="defaultImage"
[errorImage]="errorImage"
[lazyLoad]="image"

Em nosso componente passo o valor defaultImage, errorImage e minha lista de imagens em image.

errorImage = 'https://i.imgur.com/XkU4Ajf.png';
defaultImage = 'https://www.placecage.com/1000/1000';
images = [
'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80',
'https://images.unsplash.com/photo-1468103933896-2c34a78104c2?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80',
'https://images.unsplash.com/photo-1471201187657-6406da15e43b?dpr=2&auto=compress,format&fit=crop&w=1199&h=1199&q=80',
'https://images.unsplash.com/photo-1483488792196-78bedff29c21?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
'https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1493406300581-484b937cdc41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
'https://assets.imgix.net/unsplash/bridge.jpg?auto=compress&w=900&h=600&fit=crop&crop=focalpoint&fp-debug=1&fp-x=.41&fp-y=.43',
'https://assets.imgix.net/unsplash/pineneedles.jpg?fp-y=.43&fp-x=.41&fp-debug=1&crop=focalpoint&fit=crop&h=600&w=900&auto=compress',
'https://assets.imgix.net/unsplash/turntable.jpg?fp-y=.43&fp-x=.41&fp-debug=1&crop=focalpoint&fit=crop&h=600&w=900&auto=compress',
'https://assets.imgix.net/unsplash/transport.jpg?fp-y=.43&fp-x=.41&fp-debug=1&crop=focalpoint&fit=crop&h=600&w=900&auto=compress'
];

Ficando assim:

Agora temos o cenário com Lazy Load para Imagens

Considerações importantes:

Essa lib pode ser usada em Apps Ionic. Para mais informações, veja aqui.

Verifique se o suporte dessa lib atende suas necessidades:

Para mais informações a respeito da lib, veja aqui.

Conclusão

Portanto, vimos que lazy load é um mecanismo inteligente – carrega apenas as imagens que estão visíveis na tela, deixando todo resto para depois.

Quando utilizamos em imagens, significa que irá carregar apenas quando estiver no viewport (área visível do navegador), aumentando a velocidade do carregamento da página.

O exemplo está disponível no meu Git.

Se esse artigo foi útil, compartilhe e me ajude a chegar em mais pessoas.