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:

Veja no exemplo que o carregamento acontece apenas após fazer o scroll da tela:

PatrickChagashá 2 anos

Existe algum problema usar essa funcionalidade em paginas que são indexadas no google (SEO)?.

guitavanohá 2 anos
Depende. Essa implementação é boa para SEO, só tem que ficar atento. No exemplo que o Jhony passou não tem problema, pois ele está usando o lazyloading padrão do HTML, nesse caso o rastreador do Google terá acesso ao código todo da página (mesmo que a imagem não tenha sido carregada). Na verdade, os efeitos em SEO são positivos, pois melhora os Core Web Vitals. Existem exceções de implementações lazyloading que carregam via script o restante dos conteúdos da página. Exemplo: Um e-commerce carrega 10 produtos na vitrine e depois que o usuário faz a rolagem para baixo ele faz uma requisição e carrega mais 10. Nesse caso, o rastreador do Google não vai ver esses outros 10. Possivelmente afetando o SEO.
PatrickChagashá 2 anos
interessante esse ponto.
jhonyxfhá 2 anos
Não tem problema, pelo o contrário, pode melhorar a indexação, uma das práticas recomendadas pelo o google é a velocidade que o site é renderizado.
PatrickChagashá 2 anos
show, interessante.
Centaurushá 2 anos

É muito bom ver artigos curtos e esclarecedores como esse.

jbcampshá 2 anos

Interessante saber da existência e começar a usar recursos nativos do HTML, sem depender de um Jquery ou outra biblioteca do Javascript, que muitas vezes ficamos presos sem necessidade. Muito boa a dica!