Use lazysizes para imagens de carregamento lento

Nov 5, 2018 — Atualizado Apr 10, 2019

Available in: Español, 한국어, 中文, English

Appears in: Tempos de carregamento rápidos

Katie Hempenius

TwitterGitHubGlitchHomepage

O carregamento lento é a estratégia de carregar recursos conforme eles são necessários, em vez de antecipadamente. Essa abordagem libera recursos durante o carregamento inicial da página e evita o carregamento de ativos que nunca são usados.

Imagens que estão fora da tela durante o carregamento de página inicial são candidatas ideais para essa técnica. E o melhor de tudo: lazysizes torna essa estratégia muito simples de implementar.

O que é lazysizes? #

lazysizes é a biblioteca mais popular para imagens de carregamento lento. É um script que carrega imagens de forma inteligente conforme o usuário se move pela página e prioriza as imagens que o usuário encontrará em breve.

Adicionar lazysizes #

É simples adicionar lazysizes:

• Adicione o script lazysizes às suas páginas.
• Escolha as imagens que você deseja carregar lentamente.
• Atualize as <img> e / ou <picture> para essas imagens.

Adicione o script lazysizes #

Adicione o script lazysizes às suas páginas:

<script src="lazysizes.min.js" async></script>

Atualize as <img> e/ou <picture> #

Instruções da tag <img>

Antes de:

<img src="flower.jpg" alt="">

Depois de:

<img data-src="flower.jpg" class="lazyload" alt="">

Ao atualizar a <img>, você faz duas alterações:

• Adicione a classe lazyload: Isso indica aos preguiçosos que a imagem deve ser carregada lentamente.
• Altere o atributo src data-src: quando chegar a hora de carregar a imagem, o código lazysizes define o src da imagem usando o valor do atributo data-src

Instruções da tag <picture>

Antes de:

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

Depois de:

<picture>
  <source type="image/webp" data-srcset="flower.webp">
  <source type="image/jpeg" data-srcset="flower.jpg">
  <img data-src="flower.jpg" class="lazyload" alt="">
</picture>

Ao atualizar a <picture>, você faz duas alterações:

• Adicione a classe lazyload à tag <img>
• Altere o atributo srcset da tag <source> para data-srcset.

Verificar #

Abra DevTools e role a página para baixo para ver essas mudanças em ação. Conforme você rola, você deve ver novas solicitações de rede ocorrerem e as classes de tag <img> de lazyload para lazyloaded.

Além disso, você pode usar o Lighthouse para verificar se não se esqueceu de carregar lentamente nenhuma imagem fora da tela. Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Desempenho) e procure os resultados da auditoria Deferir imagens fora da tela.