Melhorando o desempenho da sua página com o atributo loading=lazy

Os atributo loading introduziu nos navegadores mais modernos a capacidade de adiar um carregamento de uma imagem ou um iframe, o que impacta diretamente na performance, tornando o carregamento de uma página web mais otimizada.

Vejamos alguns detalhes sobre esse atributo.

Como funciona o atributo loading?

O novo atributo loading define como o navegador deve se comportar quanto ao carregamento de um conteúdo, especificamente das tags <img> e <iframe>. As opções possíveis para esse atributo são lazy ou eager.

• eager define que o conteúdo deve ser carregado imediatamente.
• lazy adia o carregamento da imagem até que atinja uma distância calculada da janela de visualização, conforme definido pelo navegador.

Nesse tutorial, vamos falar especificamente da opção lazy.

Como funciona a opção "lazy" no atributo loading?

O atributo loading com o valor lazy faz com que a imagem (carregada pela tag <img>) ou um iframe só seja carregado caso mesma esteja na viewport do usuário.

Em outras palavras, ele especifica para o navegador que o carregamento das tags <img> ou <iframe> serão adiados até que o usuário faça a rolagem para onde esses elementos se tornam visíveis.

A intenção é evitar que a imagem seja carregada até que haja uma certeza razoável de que ela será necessária. Isso geralmente melhora o desempenho do conteúdo na maioria dos casos.

Como utilizar loading=lazy?

Não tem muito segredo. Basta adicionar loading="lazy" na sua tag <img> ou <iframe>.

<img src="minha-imagem.jpg" loading="lazy">

ou:

<iframe src="minha-imagem.jpg" loading="lazy" frameborder="0">

Imagens precisam ter atributos de altura e largura

Mesmo que o navegador carregue uma imagem, ele ainda não sabe imediatamente a altura e largura da mesma, a não ser que você as defina. Para permitir que o navegador reserve espaço suficiente em uma página que possua imagens, é recomendável que todas as tags <img> possuam os atributos width e height. Pois, ao usar loading="lazy", o navegador não as terá carregado ainda, e, se você não especificar as mesmas, poderá ocorrer mudanças no layout do seu site.

Exemplo:

<img src="minha-imagem.png" loading="lazy" width="200" height="200">

É claro que não há problemas ao utilizar o atributo loading="lazy" sem os atributos de dimensão height ou width, porém é recomendado para que não ocorra comportamentos inesperados no seu layout pelo fato do navegador não saber o tamanho das imagens até que estejam no viewport.

Quais são os navegadores compatíveis?

Os navegadores mais modernos, como Egde, Chrome, Firefox e Opera, já possuem suporte total ou parcial ao atributo loading="lazy", conforme podemos ver detalhadamente em caniuse.

Como loading lazy pode afetar navegadores sem suporte?

Se a versão do navegador do usuário não possuir suporte ao atributo loading, não haverá problemas com compatibilidade, já que esse atributo será simplesmente ignorado e não afetará o comportamento padrão já existemente para as tags <img> e <iframe>

Como saber se o navegador tem suporte ao atributo loading?

Você pode utilizar o Javascript para chegar se há suporte ou não ao atributo loading. Basta verificar se HTMLImageElement ou HTMLIframeElement possuem o atributo loading.

Veja:

if (HTMLImageElement.prototype.hasOwnProperty('loading')) 
{
    console.log('O navegador suporta o atributo "loading" em <img>');
}
if (! HTMLIFrameElement.prototype.hasOwnProperty('loading'))
{
console.log('Não há suporte para "loading" em iframes neste navegador');
}