Lazy Loading no WordPress: aumente o desempenho do seu sítio

Procédure

O que é o carregamento lento?

Imagine que visita um sítio Web e tem de esperar interminavelmente que este carregue completamente, devido a uma profusão de imagens e vídeos de grandes dimensões que o seu navegador tem dificuldade em carregar. É muito provável que deixe de navegar nesse sítio em favor de outro mais bem optimizado. Para evitar que este exemplo se torne uma realidade no seu site, é essencial que dedique algum tempo a otimizar as suas imagens e a ativar o carregamento lento.

O que é o lazy loading? É uma técnica que só carrega imagens e vídeos visíveis acima da linha de água (ou seja, o que se vê no sítio sem ter de percorrer a página), o que permite ao navegador carregar primeiro o conteúdo importante da página, reduzindo assim os tempos de carregamento e melhorando o desempenho.

O efeito é particularmente notório nos sítios que apresentam muitas imagens, uma vez que estas se encontram entre os elementos mais pesados e de mais longo carregamento num sítio.

Como pode utilizar o lazy-load no seu sítio?

Há vários anos que o WordPress oferece o carregamento lento por defeito para imagens e iframes; se estiver a utilizar uma versão do WordPress superior à 5.6, já deve poder tirar partido dele.
No entanto, se quiser fazer isto manualmente, não estiver a utilizar o WordPress ou estiver a utilizar uma versão anterior à 5.6, basta adicionar o atributo lazy="load" ao elemento que pretende que seja carregado lazy, se for compatível:

Isto diz ao browser para carregar o elemento de forma preguiçosa. Os browsers escolherão automaticamente quando carregar as imagens, por isso não precisa de fazer mais nada. Se o elemento ao qual adicionou o atributo não for compatível, não acontecerá nada.

Algumas extensões também permitem melhorar ou controlar o carregamento lento do WordPress. Uma dessas extensões é a LWS Optimize, uma extensão criada pela LWS.

Ativar o carregamento lento com o LWS Optimize

Para ativar o carregamento lento a partir do LWS Optimize, basta ir às definições da extensão e depois ao separador "Media":

Aqui, marque as acções "Lazy Loading for Images" e "Lazy Loading for Iframes and videos" para as ativar. Não precisa de fazer mais nada para ativar o carregamento lento. Pode, no entanto, excluir itens do carregamento lento.
Para o fazer, clique no botão "Excluir ficheiros", que abrirá uma nova janela na qual pode gerir vários itens:

Pode excluir elementos do carregamento lento de acordo com as classes CSS que possuem ou o tipo de media a que pertencem (vídeo, iframe, etc.). Também pode simplesmente especificar o URL a excluir, o que excluirá do processo qualquer elemento que contenha este URL. Depois de ter introduzido as exclusões, clique no botão "Guardar" para guardar as alterações.

Para que as suas alterações sejam tidas em conta, terá de limpar a cache do ficheiro, caso contrário os seus visitantes verão uma versão obsoleta das suas páginas. Para tal, aceda ao separador "Caching" e clique no botão "Esvaziar cache" junto à ação "Limpeza manual":

Conclusão

Agora já sabe como: reduzir os tempos de carregamento do seu sítio Web implementando o carregamento lento, utilizar esta técnica tanto manualmente como através de extensões e gerir excepções para determinados elementos. 🚀

Graças a este artigo, a otimização das suas páginas web já não tem segredos para si. Poderá agora ativar o carregamento lento no seu site WordPress, utilizar plugins como o LWS Optimize para um maior controlo, e até saber como excluir certas imagens ou vídeos desta otimização, se necessário. 💡

Os seus utilizadores poderão usufruir de uma experiência de utilização melhorada, com páginas que carregam rapidamente e sem frustrações. 🌐✨

Obrigado por ler até ao fim! Estamos interessados na sua opinião: já implementou o carregamento preguiçoso no seu site? Está a encontrar algum desafio específico? Sinta-se à vontade para compartilhar sua experiência e fazer suas perguntas na seção de comentários abaixo. O seu feedback é valioso e pode ajudar outros leitores!

E se este artigo foi útil para si, considere partilhá-lo com outros webmasters ou programadores que possam beneficiar destas dicas! 🤓