Firefox já oferece suporte ao recurso Image Lazy Loading

Sabia que o Firefox já oferece suporte ao recurso Image Lazy Loading nativamente?

A Mozilla está adicionando suporte ao recurso de carregamento lento de imagem ao seu navegador, ou seja, o Firefox já oferece suporte ao recurso Image Lazy Loading nativamente.

O Image Lazy Loading, ou carregamento lento de imagens, é uma técnica de otimização de desempenho de sites que faz com que o navegador carregue apenas imagens atualmente visíveis ou prestes a ficar visíveis na tela. Isso aumenta o desempenho, pois o navegador apenas baixa e exibe imagens conforme necessário, em vez de baixá-las todas de uma vez.

Firefox já oferece suporte ao recurso Image Lazy Loading
Firefox já oferece suporte ao recurso Image Lazy Loading

Tradicionalmente, os desenvolvedores adicionavam carregamento lento a um site por meio de bibliotecas JavaScript de terceiros, mas com o lançamento do Chrome 76, o Google o adicionou como um recurso nativo ao navegador.

Para usar esse recurso, os desenvolvedores simplesmente precisam adicionar o atributo loading="lazy" às suas tags IMG HTML, como mostrado abaixo.

Agora, a Mozilla está adicionando suporte ao recurso de carregamento lento de imagem nativa igual ao do Google Chrome e agora está disponível para teste nas versões do Firefox Nightly.

Firefox oferece suporte ao recurso Image Lazy Loading do Chrome

Na atual versão do Firefox 75 Nightly, o Mozilla adicionou uma nova preferência about:config denominada ‘dom.image-lazy-loading.enabled’ que permite ativar o carregamento lento nativo no navegador.

Para testar esse recurso, basta abrir as ferramentas de desenvolvimento do Firefox, clicar na guia ‘Rede’ e depois visitar o site de demonstração de carregamento lento.

Quando você carrega a página pela primeira vez, verá que o Firefox baixa apenas os recursos e imagens necessários para exibir as imagens visíveis no navegador.

À medida que você rola para baixo, o console do desenvolvedor mostra que o Firefox baixa mais imagens, pois são quase visíveis no navegador.

Com os dois maiores desenvolvedores de navegadores que suportam carregamento lento nativo, ele elimina mais uma biblioteca JavaScript que precisa ser mantida e baixada de sites.

Experimente o recurso Image Lazy Loading

Para experimentar o recurso Image Lazy Loading no Firefox, use o Firefox 75 Nightly. Se ainda não tiver ele instalado, use esse tutorial:
Como instalar o Firefox Nightly no Linux manualmente
Como instalar o Firefox Nightly no Ubuntu e derivados

O que está sendo falado no blog

Veja mais artigos publicados neste dia…