Lazy loading nativo dos browsers

lazy loading nativo dos browsers

Lazy loading ou Carregamento tardio para imagens e vídeos é um recurso onde você prioriza o carregamento dos itens visíveis na tela do usuário. O resultado dessa ação melhora o tempo de carregamento para a área visível do usuário e o carregamento de recursos somente quando necessário super relevante para usuários mobile.

Esse Recurso foi introduzido pelo internet Explorer 11, mas nenhum browser implementou o recurso nessa época. Em 2019 o Chrome voltou a colocar o recurso em pauta na versão 76. Atualmente o recurso está disponível para Edge, Firefox, Chrome, Opera e Android Browser. Já no Safari recurso está disponível em formato de teste.

Em agosto de 2020 o recurso ganhou atenção quando passou a fazer parte do Core do WordPress na versão 5.5. Mas como esse recuso funciona? Nesse posts vamos ver como implementar essa funcionalidade e os requisitos para recorrer ao recurso.

Trabalhando com Lazy Loading

Para aplicar o lazy loading em imagens adicionamos o atributo loading na tag img, por exemplo:

<img loading="lazy"src="minha_foto.jpg" />
Code language: HTML, XML (xml)

O atributo loading pode receber os seguintes valores:

  • auto: Executará o comportamento padrão do navegador
  • lazy: A imagem só será carregada quando o scroll chegar uma distância específica da área visível.
  • eager: carrega o recurso imediatamente caso esteja localizado na página.

Além da propriedade loading as imagens precisam ter especificadas as suas dimensões largura e altura. Isso porque até carregar as imagens o navegador não sabe as dimensões da imagem. Além disso, a falta de dimensões podem causar mudanças de layout durante o carregamento também um fator que pode comprometer a experiência do usuário.

A definição das dimensões é uma recomendação já antiga antes mesmo da propriedade loading existir. Com o lazy loading isso se torna mais relevante sem as dimensões o carregamento fica ainda mais dependente dos navegadores.

As tags picture, video e iframe também podem fazer o uso do lazy loading como no exemplo abaixo:

<picture> <source media="(min-width: 900px)" srcset="wordcamp.jpg 1x, wordcamp_2x.jpg 2x"> <img src="wordcamp_fallback.jpg" loading="lazy"> </picture>
Code language: HTML, XML (xml)
<video src="./wordcamps/wordcamp_edinburgh_2018.MP4" width="720" height="1280" loop loading="lazy" controls="false" muted></video>
Code language: HTML, XML (xml)
<iframe width="900" height="515" loading="lazy" src="https://www.youtube.com/embed/yT7fCspMrU8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Code language: HTML, XML (xml)

No código anterior temos múltiplas alternativas de carregamento, mas o atributo loading só precisa ser definido na tag img.

Carregamento de imagens e sua visualização

A implementação do recurso tenta garantir performance sem afetar a experiência do usuário. Assim o carregamento da imagem irá iniciar quando a imagem atingir uma distância mínima da área visível. Mas vale lembrar que o carregamento das imagens ficam dependentes da rede do usuário.

Comparado a algumas bibliotecas de lazy loading a distância implementada pelos navegadores que rodam a engine do Chrome são um pouco conservadoras.

Mas no Chrome essa distância não é fixa ele é dependente de alguns fatores:

  • O tipo da imagem que está sendo carregada
  • Se o modo econômico está habilitado
  • Conexão efetiva do dispositivo

Quando utilizar Lazy loading

Core web vitals introduziu as novas métricas de tempo de carregamento de páginas, essa métrica é chamada de LCP ou Largest Content Paint. Ela é utilizada para calcular o tempo de carregamento do maior elemento na primeira dobra da página. Lazy loading deve ser utilizado com cuidado para não afetar a métrica LCP.

Para evitar influenciar as métricas de LCP evite adicionar lazy loading nas imagens da primeira dobra, adicione a propriedade apenas em elementos que não corram risco de ser o elemento responsável pelo LCP.

Mudanças em 2020

Após a implementação do recurso na versão 76 em julho de 2020 essa distância foi reduzida baseada nos relatórios recolhidos nos primeiros meses de uso do recurso. Para conexões 4G o primeiro carregamento ficava restrito a uma área de 3000px agora foi reduzido para 1250px. e para conexões lentas de 4000px para 2500px.

Essas medidas reduzem o carregamento médio de imagens em até 40%. O assunto não é muito extenso então vamos ficando por aqui para mais tutoriais acesse a página da categoria tutoriais. Também fiz um vídeo no meu canal onde eu abordo o assunto:

Para mais informações sobre lazy loading acesse o site do web.dev: https://web.dev/native-lazy-loading/. Recentemente foi incluído no Chrome 101 o recurso de priority hints confira também o post que eu escrevi sobre o assunto.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.