Lazy-loading utilizando recurso nativo do browser. Saiba mais sobre o novo atributo loading
ou veja um ticket do core do WordPress, onde está sendo discutida a inclusão de uma implementação semelhante no próprio core do WordPress.
Se o atributo loading
não for suportado pelo navegador, o plugin utiliza um JavaScript fallback baseado na solução IntersectionObserver
. Para o caso do JavaScript está desabilitado, mas o atributo loading
for suportado pelo browser, será adicionada uma variante noscript
do respectivo elemento que também inclui o atributo loading
sem nenhuma alteração adicional.
“Nativo” significa “Rápido”
Se você chegou até aqui, provavelmente está ciente de qual crucial é o desempenho para a experiência e o sucesso de um site. Você também deve saber que o lazy-loading é um recurso essencial para melhorar o desempenho. No entanto, as soluções de lazy-loading até agora ainda adicionavam um pouco de sobrecarga, que já contavam com o carregamento e execução JavaScript personalizado, que pode ser mais ou menos pesado no desempenho.
Este plugin em grande parte acaba com este padrão. Ele se baseia no novo atributo loading
, que torna o carregamento lazy-loading uma funcionalidade nativa do navegador. O atributo já é suportado pelo Chrome e será lançado para outros navegadores ao longo do tempo. A solução sendo “nativa” significa que ela não depende de JavaScript, portanto, tornado sua aplicação mais leve. E “mais leve” significa “mais rápido”.
Por último, mas não menos importante, uma coisa interessante a ter em mente é que esse plugin se aprimorará ao longo do tempo, a medida que mais navegadores implementarem o suporte ao atributo loading
.
Uso
Basta ativar o plugin e todas as suas images e iframes serão carregados com lazy-loading.
Crédito
Este plugin é parcialmente baseado na logica do WP Rig, além utilizar as recomendações web.dev e developers.google.com.