Referências de lazy loading para imagens e iframes de forma nativa | Performance Web II: Critical Path, HTTP/2 e Resource Hints

2
respostas

Referente ao curso Performance Web II: Critical Path, HTTP/2 e Resource Hints

por Emanuel Gonçalves Santana de Souza

| 45.5k xp | 11 posts

Desenvolvedor Front End

Fazendo minhas pesquisas sobre o assunto, descobri que temos nativamente formas de fazer lazy loading para imagens e iframes. Segue as referências que encontrei:

Artigo web.dev sobre lazy-loading de iframes
Artigo sobre lazy-loading na web do pessoal do web.dev. Esse artigo é bem interessante porque ele traz comparações de performance e métricas quando usamos o lazy-loading e quando não.
Site do Can I use mostrando os diferentes recursos de loading e quais browsers suportam ou não. Detalhe: o lazy loading para imagens e iframes já é suportado em mais 70% dos browsers!
Por fim, mas não menos importante, artigo da Mozilla sobre a estratégia de lazy loading.

Espero que seja útil e caso encontrem mais, por favor, compartilhem!

2 respostas

por Jemima Dias

| 124.5k xp | 122 posts

Alura Scuba Team

25/08/2021

Olá Emanuel, tudo bem?

Que legal, obrigada por ter compartilhado suas pesquisas aqui conosco. Sem dúvidas irá ajudar outras pessoas!

Bons estudos =)

por Emanuel Gonçalves Santana de Souza

| 45.5k xp | 11 posts

Desenvolvedor Front End

01/09/2021

Gostaria de acrescentar a esse tópico mais uma referência que achei bem útil, e já estou usando em meu blog pessoal. Eu encontrei esse método no site do CSS Tricks que referencia o Filament Group, que é o criador do loadCss que o professor citou no curso.

Link do CSS Tricks: https://css-tricks.com/the-simplest-way-to-load-css-asynchronously/. Link do Filament Group: https://www.filamentgroup.com/lab/load-css-simpler/

Neste artigo do CSS Tricks, é nos explicado uma maneira bem elegante de fazer o carregamento async de nosso CSS. Basicamente é criar um link do tipo stylesheet, porém, com o media print. Dessa forma, o arquivo será carregado assincronamente, mas não será parseado. O pulo do gato surge no onload, que muda o media do link para all.

Achei útil para carregamento de fontes do Google Fonts (meu maior gargalo no meu blog). Esse hack junto com o preconnect melhorou bastante o carregamento aqui.

Espero que tenha sido útil.