Entrar Ainda não tem acesso?
2
respostas

Referências de lazy loading para imagens e iframes de forma nativa

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:

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

2 respostas
por Jemima Dias
| 124.5k xp | 122 posts
Alura Scuba Team

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

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.