O carregamento das imagens está demorando na sua aplicação? Utilize Lazy loading nas suas imagens
Quem nunca passou raiva esperando um site carregar? Ou gastou todos seus dados móveis abrindo um site com imagens pesadas? Na maioria das vezes as imagens não estavam primeira dobra da página(parte que fica visível logo uma página), mesmo assim você foi obrigado esperar todas as imagens carregar.
Para evitar esse problema você pode usar o atributo loading="lazy"
nas tags <img>
. Com esse atributo as imagens só vão começar a carregar no momento que forem exibidas na tela, sem sem a necessidade de escrever código personalizado ou de uma biblioteca javascript.
Aqui estão os valores suportados para o atributo loading:
- auto: comportamento lazy-loading default, que é o mesmo que não incluir o atributo.
- lazy: adia o carregamento do recurso até que ele alcance uma distância calculada da viewport.
- eager : carrega o recurso imediatamente, independentemente de onde ele esteja localizado na página.
Veja no exemplo que o carregamento acontece apenas após fazer o scroll da tela: