Categorias
Tutoriais

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 fazer uso do 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" />

O atributo loading pode receber os seguintes valores:

  • auto: Executará o comportamento padrão do navegador
  • lazy: A image 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 suas dimensões largura e altura. Isso porque até carregar as imagens o browser 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 browsers.

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>
<video src="./wordcamps/wordcamp_edinburgh_2018.MP4" width="720" height="1280" loop loading="lazy" controls="false" muted></video>
<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>

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 minima 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 browsers 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 tá habilitado
  • Conexão efetiva do device

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 em 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/.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *