Executando verificação de segurança...
11
jhonyxf
1 min de leitura ·

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:

Jhonyxf quer tabcoin
Carregando publicação patrocinada...
1
1
guitavano

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.

1
1
jhonyxf
Autor
Autor

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.

1
1
1
jbcamps

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!