Carregamento lento de imagens fora da tela com lazysizes

O carregamento lento é a abordagem que espera para carregar os recursos até que sejam necessários em vez de carregá-los antecipadamente. Isso pode melhorar o desempenho, reduzindo a quantidade de recursos que precisam ser carregados e analisados no carregamento inicial da página.

Imagens que estiverem 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.

Adicione o script lazysizes à página #

  • Click Remix to Edit to make the project editable.

lazysizes.min.js já foi baixado e adicionado a este Glitch. Para incluí-lo na página:

  • Adicione a seguinte tag <script> ao index.html :
  <script src="lazysizes.min.js" async></script>
<!-- Fim da imagem -->
</body>

O lazysizes carrega imagens de forma inteligente conforme o usuário rola a página e prioriza as imagens que o usuário encontrará em breve.

Indique as imagens para carregamento lento #

  • Adicione a classe lazyload às imagens que devem ser carregadas lentamente. Além disso, altere o atributo src data-src .

Por exemplo, as alterações para flower3.png ficariam assim:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

Para este exemplo, tente fazer o carregamento lento de flower3.png , flower4.jpg e flower5.jpg .

Veja em ação #

É isso! Para ver essas mudanças em ação, siga estas etapas:

  • To preview the site, press View App. Then press Fullscreen fullscreen.

  • Abra o console e encontre as imagens que acabaram de ser adicionadas. Suas classes devem mudar de lazyload para lazyloaded conforme você rola a página para baixo.

Imagens durante o carregamento lento
  • Observe o painel de rede para ver os arquivos de imagem carregados individualmente conforme você rola a página para baixo.
Imagens durante o carregamento lento

Verifique usando o Lighthouse #

Por último, é uma boa ideia usar o Lighthouse para verificar essas alterações. A auditoria de desempenho "Adiar imagens fora da tela" do Lighthouse indicará se você se esqueceu de adicionar carregamento lento a qualquer imagem fora da tela.

  1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  2. Click the Lighthouse tab.

  3. Make sure the Performance checkbox is selected in the Categories list.

  4. Click the Generate report button.

  5. Verifique se a auditoria Adiar imagens fora da tela foi aprovada.

Auditoria 'Codificar imagens de forma eficiente' aprovada no Lighthouse

Sucesso! Você usou lazysizes para carregar lentamente as imagens em sua página.

Last updated: Improve article