O recurso Lazy Loading tem ajudado muitos sites que possuem muitos arquivos de imagem ou vídeo, a melhorar seu desempenho e velocidade de carregamento.
Neste post, iremos te mostrar tudo sobre o lazy loading. Além disso, mostraremos algumas maneiras de implementá-lo em seu site.
O que é a funcionalidade Lazy Loading?
O Lazy Loading é uma função que permite que um site só carregue as imagens e vídeos que estão sendo visualizados pelo usuário, ou seja, o site não fará o carregamento de todo o conteúdo visual presente no site.
Essa funcionalidade contribui muito para um melhor desempenho e velocidade de carregamento nos sites em Wordpress que contam com esse recurso.
Como realmente funciona o Lazy Loading?
Quando um visitante acessa um site, o navegador dele solicita uma requisição ao servidor que responde, entregando todos os dados e arquivos de uma vez só. Este acontecimento, gera algumas consequências, entre elas a demora do carregamento da página. Por isso, sempre é bom testar a velocidade do site!
Quando você implementa o esse recurso, a entrega desses arquivos acontece gradualmente, ou seja, só irá carregar os arquivos que estão sendo visualizados pelo usuário, sem realizar o pré-download deles.
Por exemplo, se entrarmos em um site de roupas e ficarmos só na parte inicial do site, apenas os arquivos dessa página serão carregados. Ao decorrer, quando formos acessando as demais páginas, os arquivos serão carregadas conforme formos rolando a página.
O resultado da implementação do Lazy é não realizar o carregamento desses arquivos, até que seja necessário.
Plugins para ativar o Lazy Loading
Em alguns plugins existe a opção de implantação de lazy loading. Agora, iremos abordar alguns deles.
a3 Lazy load
Este plugin do WordPress é gratuito e compatível com a cerda 5. 9 do WordPress. O plugin A3 Lazy Load oferece recursos para lazy loading de imagem, suporte WebP de imagens e outros recursos.
Smush
Este plugin é popularmente conhecido como otimizador de imagens, ele é pago, porém, oferece muitos recursos úteis de detecção de imagem incorreta, compactação de arquivos, entre outros recursos.
Para ativar o recurso em seu navegador Chrome, Firefox ou Opera, é muito simples, o único requisito é incluir o atributo de carregamento às imagens ou vídeos que desejar.
Vale lembrar, que esse atributo de lazy loading nativo só suporta três valores, sendo eles:
- Auto: Carrega padrão lazy loading;
- Lazy: Carrega o recurso quando distância da janela de visualização está próxima;
- Eager: Carrega todos os arquivos de uma vez só.
Veja como incluir o atributo:
<img src=”sua-imagem.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>
Ativação através de versões atualizadas do WordPress
Outra maneira de ativar essa funcionalidade é atualizando o seu WordPress para uma versão mais recente. Na versão 5.4 ou superior, a implementação dessa função ocorre automaticamente.
Conclusão
Agora que você entende como funciona esse recurso, tenho certeza que fará bom proveito do Lazy Loading. Sempre busque fazer o uso correto dessa funcionalidade, não ative-a em páginas pequenas, apenas em páginas longas.
O lazy loading fará com seu site tenha mais velocidade na hora que carregar os arquivos, além de gerar uma boa experiência de navegação aos seus usuários.
Espero ter contribuído com o seu entendimento sobre o assunto!
Caso esteja procurando um novo provedor para hospedar o seu site, aqui na i7 Host contamos com os melhores planos de hospedagem do mercado de web hosting. Ajudamos você a escolher o ideal para a sua empresa. Contamos com suporte 24 horas e servidores dedicados com tecnologia de ponta! Somos especialistas em hospedagem WordPress e contamos com uma taxa de uptime de 100%. Venha ser nosso cliente, converse com um de nossos especialistas!