Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 18, 2022 08:53 pm GMT

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:

Tela de um notebook e celular mostrando a regio acima e abaixo da dobra de um site

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):

Animao mostrando uma pgina deslizando com vrias imagens de gatinho

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:

Animao mostrando todas as imagens sendo baixadas logo no carregamento da pgina, ou seja, sem o atributo loading="lazy"

Agora, veja o que acontece quando adiciono o atributo loading="lazy":

<img src="cat.png" alt="Sweet cat" loading="lazy" />

Animao mostrando que as imagens so baixadas apenas quando se aproximam da rea de visualizao, ou seja, com o atributo 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:

Print mostrando que um site com o atributo loading="lazy" faz menor requests no incio, baixa menos dados e carrega mais rpido

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To