Ads

Como as imagens estão entre o tipo de conteúdo mais popular na web, o tempo de carregamento da página em sites pode facilmente se tornar um problema.

Mesmo quando devidamente otimizadas , as imagens podem pesar um pouco. Isso pode ter um impacto negativo no tempo que os visitantes têm de esperar antes de acessar o conteúdo do seu site. Provavelmente, eles ficam impacientes e navegam para outro lugar, a menos que você encontre uma solução para o carregamento de imagens que não interfira na percepção de velocidade.

O que é o carregamento lento (lazy load)?

Imagens de carregamento lento significa carregar imagens em sites de forma assíncrona – ou seja, depois que o conteúdo acima da borda for totalmente carregado (acima da borda = conteúdo exibido antes da primeira rolagem feita pelo visitante do site) , ou mesmo condicionalmente, apenas quando elas aparecerem na janela de visualização do navegador. 

Isso significa que, se os usuários não rolarem até o fim, as imagens colocadas na parte inferior da página nem mesmo serão carregadas.

Significa também um ganho de desempenho em seu site e alívio do uso dos recursos (processamento e memória) do seu servidor, sem dúvidas, os provedores de hospedagem agradecem aos bons desenvolvedores por fazerem bom uso de seus recursos.

Técnica 1 – Carregamento lento nativo, sem JavaScript.

O carregamento lento nativo de imagens e iframes é muito eficiente e usa o suporte nativo dos próprios navegadores em fazer o carregamento lento, a técnica consiste em instruir o navegador sobre qual ou quais imagens devem ser carregadas lentamente ou não.

Basta aplicar o atributo loading nas tags IMG e IFRAME, ficando assim;

<img src="imagem.jpg" loading="lazy" alt="..." />
<iframe src="pagina.html" loading="lazy"></iframe>

O atributo loading atrasar imagens e iframes fora da tela antes da primeira rolagem do visitante do site até que eles rolem a página para o local aonde a imagem ou iframe devem ser carregados. 

O atributo loading pode assumir qualquer um destes três valores:

  • lazy: funciona muito bem para carregamento lento.
  • eager: instrui o navegador a carregar o conteúdo especificado imediatamente.
  • auto: seria o mesmo que não usar o atributo loading, o navegador passa a decidir se o carregamento lento será aplicado ou não.

Técnica 2 – Carregamento lento usando a biblioteca Lozad.js

Outra alternativa rápida e fácil para implementar o carregamento lento de imagens é deixar uma biblioteca Lozad.JS fazer a maior parte do trabalho para você.

Lozad é um carregador lento de alto desempenho, leve e configurável em JavaScript puro, sem dependências. Você pode usá-lo para carregar lentamente imagens, vídeos, iframes e muito mais, e ele usa a API Intersection Observer.

O que você precisa é apenas importar a biblioteca;

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Em seguida, para uma implementação básica, adicione a classe lozad nas suas imagens e iframes ficando assim;

<img class="lozad" data-src="img.jpg">

Por fim, é recomendado também que instancie Lozad em um documento .JS a parte ou no final da sua página antes da tag </body>

<script>
const observer = lozad();
observer.observe();
</script>

Bônus – otimize suas imagens, use WebP e carregue-as a partir de um CDN.

Antes de adicionar qualquer imagem em seu site é importante otimizá-las, embora você possa fazer isso com softwares como o Photoshop eu insisto em indicar o serviço gratuito da ShortPixel que é a dona de um dos melhores algoritmos de compreensão e otimização para imagens, vale a pena dar uma conferida.

Além da otimização das imagens pelo ShortPixel eu também recomendo a leitura do artigo Otimize as imagens do seu site com WebP e Statically CDN para otimizar ainda mais a performance do seu site utilizando serviço de CDN para carregar suas imagens.

Além do Statically CDN, testei recentemente o Shift8 CDN que atende muito bem sites pequenos e de baixo tráfego, logo escreverei um bom artigo sobre ele, mas fica a dica para você ir pesquisando a respeito.

Conclusão

É importante entender que as técnicas apresentadas aqui são as minhas favoritas pois as considero simples de serem implementadas e não exigem conhecimentos muitos avançados por parte do desenvolvedor, no entanto, vale a pena explorar outras alternativas

Vanilla-lazload, jQuery LazyLoad, também são boas opções, até mesmo o uso direto da Intersection Observer API pode ser uma boa ideia dependendo do tamanho do seu site.

Bem, é isso aí! Obrigado por ler até o final e bons estudos.

Ads

Anderson Oliveira

Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.