Se você tem um projeto com muitas imagens, tal como uma galeria, uma página de portfólio, sabe que quanto mais imagens mais demora para a página carregar por completo, quando o acesso é móvel você ainda esbarra no problema do consumo de dados que isso vai gerar ao seu visitante caso esteja visitando pela rede móvel (sem Wi-Fi), a demora no carregamento pode até mesmo reduzir o tempo de navegação dos visitantes em suas paginas já que esperar muito tempo hoje vem se tornando algo do passado. Sabemos que tanto o Google quanto os visitantes querem acessar as informações cada vez mais rápido e solucionar esse problema vai te ajudar de várias formas.
Com alguns ajustes rápidos você pode melhorar suas páginas e tornar a navegação mais agradável através do LazyLoad, que em poucas palavras faz com que suas imagens carreguem apenas quando são necessárias, ou seja, se ela ainda não está aparecendo no campo de visão do visitante o carregamento é adiado, assim apenas quando for a hora ela será carregada, dando mais dinâmica a página e afetando menos o cliente, ainda que o consumo seja o mesmo, a qualidade da navegação aumenta consideravelmente.
Preparando suas imagens
O LazyLoad usa as imagens jpegs progressivas para criar o efeito de carregamento, esse modo de imagem pode ser obtido no momento da edição, lembre-se de usar a resoluções adequadas e melhorar o tamanho dos arquivos, não adianta incluir o efeito se as imagens não contribuem para a otimização. O plugin lazyload suporta imagens responsivas, o ideal é preparar as marcações de tamanhos para cada resolução, imagem@2x.webp, imagem@4x.webp, imagem-mobile@2x.webp, e assim por diante, com elas você terá um maior controle durante a implementação do código.
Download e implementação
O plugin lazyload é código aberto e mantido em um repositório online no GitHub, após baixar o código você pode implementar em sua página o arquivo lazyload.transpiled.min.js, que pode ser encontrado na pasta dist do repositório.
Todo o código é escrito em javascript puro (vanilla), os benefícios apresentados na página do projeto incluem maior performance se comparado ao jQuery.LazyLoad, menor consumo de recursos durante o processamento, suporte a imagens responsivas, compatibilidade com os mais populares frameworks do mercado, maior desempenho com imagens JPEG Progressivas e o melhor de todos os benefícios, é SEO friendly, não atrapalha em nada a otimização das imagens nos motores de busca.
Começar a usar as marcações de tag do plugin é bem simples, não sendo muito diferente das tags padrões, um exemplo simples é o uso do atributo data-original, onde precisamos informar o caminho da imagem, exemplo: 
, bastando apenas incluir em suas chamadas javascript ao fim da página o gatilho .
Testando as alterações
Antes de dar o serviço como concluído a parte mais importante é a verificação de todas essas mudanças, se você tinha problemas de performance pode testar a navegação em diversos navegadores, dispositivos móveis, verificar se o carregamento está de acordo com a área de visualização durante a navegação. Você pode usar nosso artigo como aumentar a velocidade de carregamento de seu site para melhorar ainda mais coisa no carregamento do seu site.
A propósito, se você usa a plataforma Wordpress em seus projetos pode também conhecer 5 plugins para acelerar suas páginas, integrando o uso do LazyLoad as suas páginas vai ficar ainda mais fácil fazer as melhorias.
Conclusão
Vimos como você pode melhorar a interação dos clientes com seu site oferecendo mais desempenho e carregamento otimizado de imagens, com essas dicas você pode melhorar a performance de qualquer projeto que esteja otimizado mas com problema na entrega de imagens, pode inclusive melhorar seu blog feito em Wordpress com nossas outras dicas.
Se você tem um portfólio online com certeza precisa interagir com seus futuros clientes, porque não fazer isso com nossa ferramenta de E-mail Marketing? Conheça nossos planos e faça um teste grátis por 30 dias.
Gostou de nosso post? Compartilhe:
