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.