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" />Code language: HTML, XML (xml)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>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 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/.