Lazy loading nativo de imagens e iframes

Lazy loading nativo de imagens e iframes, um sonho antigo de webdevs, finalmente vai se tornar realidade! Saiba mais como usar e como testar hoje mesmo.

Ir para o artigo

Lazy loading nativo de imagens e iframes¬†√© um sonho antigo de desenvolvedores web! Depois de d√©cadas esperando por algo assim, informamos com muita felicidade que a feature est√° pr√≥xima de ser algo nativo nos navegadores!¬†ūüė≠

Para os mais afoitos, aqui está uma prévia em ação:

A expectativa é que o suporte para esse lazy loading nativo em imagens entre no Chrome 75. Até lá, continue lendo e veja como o lazy-loading vai funcionar.

O que é lazy loading?

P√°ginas web geralmente cont√™m um grande n√ļmero de imagens, o que contribui para o uso de dados (data-usage), o aumento de p√°ginas (page-bloat) e determinar o qu√£o r√°pido uma p√°gina pode ser carregada. Muitas dessas imagens est√£o fora da tela, exigindo que um usu√°rio role para visualiz√°-las.

Historicamente, para limitar o impacto das imagens fora da tela em tempos de carregamento da página (page load times), precisávamos usar alguma biblioteca JavaScript (como o Lozad) para adiar o carregamento dessas imagens até que o visitante rolasse a tela perto delas.

Lazy loading nativo de imagens: comparação de peso total de carregamento de uma página quando lazy loading é usado
Exemplo de uma página carregando 211 imagens. A versão sem lazy loading carrega 10MB de dados de imagem. A versão com lazy loading carrega apenas 250KB no início e as outras imagens são carregadas conforme o visitante avança na página. Veja o WPT.

E se o navegador pudesse evitar o carregamento dessas imagens fora da tela para voc√™, ou seja, fazer lazy loading nativo? Isso ajudaria a carregar conte√ļdos mais rapidamente, reduziria o uso geral de dados de rede e, em dispositivos de menor capacidade, reduziria o uso de mem√≥ria.

Felizmente, depois de uma espera de décadas, em breve isso será possível com o novo atributo para lazy loading de imagens e iframes!

O atributo loading

O atributo loading permite que um navegador adie (defer) o carregamento de imagens e iframes fora da tela (offscreen) até que o visitante role perto deles.

O novo atributo loading admite 3 valores:

  • lazy: o recurso √© um bom candidato para lazy loading
  • eager: n√£o √© um bom candidato para lazy loading (deve ser carregado imediatamente)
  • auto: o navegador determinar√° se deve ou n√£o carregar usando lazy loading.

Não especificar o novo atributo terá o mesmo impacto que se loading="auto" fosse usado. Em outras palavras, o que se está falando aqui é que lazy loading será algo nativo!

Lazy loading de imagens nativo: exemplo esquem√°tico de uso do novo atributo "loading"

Exemplos de lazy loading nativo com o novo atributo

O atributo loading funciona em <img> (incluindo com srcset e dentro de <picture>), bem como em <iframe>:

A heur√≠stica exata para “quando o scroll est√° pr√≥ximo” √© deixada para o navegador, quer dizer, como isso vai funcionar ser√° diferente no Chrome, Firefox, Safari etc.

Em geral, a esperança é que os navegadores comecem a carregar imagens e iframes um pouco antes de chegarem à viewport. Isso aumentará a chance da imagem ou iframe ser carregado no momento em que o usuário tiver rolado até eles.

Feature detection (detecção de recurso) para lazy loading nativo

N√£o h√° d√ļvidas quanto √† import√Ęncia de se poder carregar e aplicar uma biblioteca JavaScript para lazy loading (para suporte cross-browser). O suporte para o novo atributo loading pode ser detectado da seguinte maneira:

Lazy loading cross browser de imagens

Se o suporte cross-browser para lazy loading de imagens é importante, não basta apenas detectar e carregar tardiamente uma biblioteca se você estiver usando <img src="unicorn.jpg" loading="lazy" /> na marcação.

A marcação precisa usar algo como <img data-src="unicorn.jpg" /> (em vez de src, srcset ou <source>) para evitar o acionamento eager em navegadores que não suportam o novo atributo.

JavaScript pode ser usado para alterar esses atributos para os corretos se lazy loading de imagem e iframe for suportado e, caso n√£o, carregar uma biblioteca no lugar.

Seria algo mais ou menos como:

  • Imagens na viewport ou acima da dobra s√£o tags <img> regulares. Um data-src iria ter prioridade sobre o “preload scanner”, o que deve ser evitado para tudo que provavelmente estiver na viewport.
  • Usa-se data-src em imagens para evitar um carregamento “eager” em navegadores n√£o suportados. Se o carregamento for suportado, troca-se data-src por src.
  • Se o novo atributo¬†loading n√£o for suportado, carrega-se um fallback (que √© iniciado imediatamente).

Para usar lazy loading de imagens agora (se voc√™ usa Chrome), acesse chrome://flags e habilite ambos, “Enable lazy frame loading” e “Enable lazy image loading”, ent√£o reinicie o Chrome.

Conclus√£o sobre lazy loading nativo de imagens e iframes

Um dos sonhos de ouro de desenvolvedores web, principalmente os mais ligados à performance, era passar por essa vida podendo usar lazy loading nativo de imagens. Felizmente, o sonho agora vai se tornar realidade muito em breve!

Carregar via lazy-loading imagens e iframes ser√° o novo padr√£o da Web, o que trar√° imensas vantagens para todos, desenvolvedores e seres humanos normais.

Agora vai!