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.
