Carregamento lento de imagens fora da tela com lazysizes

Nov 5, 2018

Appears in: Tempos de carregamento rápidos

Katie Hempenius

TwitterGitHubGlitchHomepage

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 .

• 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.

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

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

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