Talvez voc no deva usar o atributo loading="lazy"
O atributo loading="lazy" mais uma vtima de um problema que todo front-end enfrenta: a compatibilidades entre os navegadores. Entenda porque voc talvez no deva utiliz-lo, ainda.
Sem polmica.
No sou contra o atributo loading="lazy"
. Acho ele timo pois :
- Simples
- Nativo
- E funciona como eu imagino que deveria funcionar
Na verdade sou to a favor, que o gostaria muito que ele funcionasse em todos os navegadores. Mas infelizmente no bem assim.
sobre isso, e t tudo bem.
De incio, vou falar sobre o efeito lazyload, sua importncia e porque talvez voc no deva usar o atributo loading="lazy"
ainda.
O que Lazyload?
Vou comear pela traduo.
Gosto de fazer isso sempre que conheo um termo novo na programao, ou quero reforar um que j conheo:
- lazy = preguioso
- load = carregar
Ou seja, lazyload o mesmo que carregamento preguioso.
Elementos com lazyload no so carregados junto com os demais. Em vez disso, eles esperam at que o usurio desa a tela e eles se aproximem da viewport (rea de exibio).
Veja na imagem abaixo, a diferena de elementos above the folde e below the fold:
recomendado aplicar esse comportamento em 3 elementos especficos, que so os mais pesados de uma pgina:
- Imagens
- Vdeos
- Iframes
Veja um exemplo.
Essa pgina apenas uma lista com fotos de gatinhos. Quando carregada, voc v as duas (ou no mximo as trs) primeiras fotos, pois so as imagens above the fold (acima da dobra):
Ento te pergunto: por qual motivo o navegador deveria baixar as imagens abaixo da dobra se voc ainda no visualizou elas?
E a que o lazyload entra, pois ele pede para o navegador baixar as imagens apenas quando elas se aproximam da viewport.
E existem alguns motivos bem legais para as imagens no serem baixadas todas de uma vez.
Por que o Lazyload importante?
Performance
A primeira resposta que dou a isso aumentar a performance do site.
Alm de serem os elementos mais pesados, imagens, vdeos e iframes costumam atrasar o carregamento completo de uma pgina. Se forem baixados apenas quando o usurio precisar visualiz-los, o carregamento inicial fica mais rpido.
Isso melhora a experincia do usurio, e diminui as chances de ele abandonar seu site.
SEO
Tambm posso citar uma melhora no SEO do site.
sempre bom quando o Google gosta de voc. Sendo assim, ele ir lhe avaliar melhor segundo as mtricas do Web Vitals.
Consumo de banda de internet
Outra grande vantagem diminuir o consumo de banda de internet.
Imagine que o usurio abra uma pgina longa, com vrias imagens, mas s visualize as primeiras fotos antes de fechar a pgina. Todas as demais fotos do site consumiram banda mas sequer foram visualizadas.
Legal, bonito. Voc j sabe:
- O que lazyload
- Como funciona
- Qual a importncia dele
Agora veja como implementar isso no seu site.
Comportamento do atributo loading="lazy"
Os navegadores j suportam o lazyload de forma nativa.
Basta voc adicionar o atributo loading="lazy"
.
Vou dar exemplos sempre com imagens, mas voc pode aplicar o mesmo conceito em vdeos e iframes sem problemas.
Veja o cdigo de uma imagem:
<img src="cat.png" alt="Sweet cat" />
Quando o navegador l esse cdigo HTML enviado pelo servidor, o arquivo da imagem baixado imediatamente. Se voc olhar a aba Network do DevTools, possvel perceber que todas as imagens so baixadas de uma vez:
Agora, veja o que acontece quando adiciono o atributo loading="lazy"
:
<img src="cat.png" alt="Sweet cat" loading="lazy" />
Aqui acontece exatamente aquilo que falei no comeo do artigo: a imagem s baixada quando se aproxima da viewport. Isso torna o primeiro carregamento mais rpido.
O prprio navegador mostra isso:
possvel perceber que uma pgina com o atributo loading="lazy"
:
- Faz menos requests no primeiro carregamento
- mais leve
- Possui um tempo menor para carregar o evento de
load
- Finaliza o carregamento em menos tempo
O evento de DOMContentLoaded
tambm foi mais rpido, mas no em funo do lazyload, e sim de uma variao na conexo.
Claro que essa diferena pode parecer pequena, pois todas as imagens desse teste possuem 20kb de tamanho em mdia.
"Ento s adicionar o atributo *loading="lazy"
** para atrasar o carregamento das imagens e melhorar o desempenho?"*
Quase isso.
Problema atual do atributo loading="lazy"
Antes do atributo nativo de lazyload, as coisas eram um pouco mais difceis.
A nica alternativa para voc criar o efeito de lazyload era construir manualmente com Javascript, ou com bibliotecas. Elas ainda existem e so muito usadas.
Porm, existe um leve problema com o atributo loading="lazy"
: s funciona no Chromium.
Conforme a pgina do atributo loading no Can I Use, ele s ir funcionar como esperado em 3 navegadores:
- Chrome
- Edge
- pera
O Firefox no momento suporta lazyload nativo apenas para imagens (com exceo de vdeos e iframes). J o Safari (o diferento) suporta lazyload apenas para imagens e apenas se o usurio ativar nas configuraes.
Caso as imagens contenham o atributo loading="lazy"
, no acontece nada demais. Elas so carregadas todas diretamente, assim como mostrei no primeiro gif do captulo Comportamento do atributo loading="lazy".
por isso que o nome desse artigo "Talvez voc no deva usar o atributo loading="lazy"
". Porque talvez voc no deva usar o atributo loading="lazy"
ainda.
Mas creio que exista uma exceo a isso. Caso:
- Seu pblico no use o Safari, ou apenas uma mnima parte dele utilize
- E voc queira aplicar lazyload apenas nas imagens
Ento esse recurso altamente recomendado, e fico feliz que tenha lido at aqui.
Mas se voc no se encaixa nos critrios acima, precisar usar uma biblioteca ou criar o seu prprio lazyload.
No prximo post, vou te mostrar como fazer um efeito de lazyload sem depender do atributo loading="lazy"
.
Callback
O lazyload um efeito inteligente que faz o download de imagens, vdeos e iframes apenas quando o usurio os visualiza.
Isso melhora a performance e SEO do site, alm de carregar mais rpido mesmo em conexes mais lentas.
O atributo loading="lazy"
bom. Mas vai ficar melhor ainda quando a Apple implementar ele de forma nativa no Safari
Original Link: https://dev.to/demenezes/talvez-voce-nao-deva-usar-o-atributo-loadinglazy-5an5
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To