Carregamento lento de imagens fora da tela com tamanho lento

Katie Hempenius

O carregamento lento é a abordagem de esperar para carregar recursos até que eles sejam necessários em vez de carregá-los com antecedência. Isso pode melhorar a performance reduzindo a quantidade de recursos que precisam ser carregados e analisados no carregamento inicial da página.

Imagens fora da tela durante o carregamento de página inicial são candidatas ideais para essa técnica. O melhor de tudo é que, com o Lazysizes, essa é uma estratégia muito simples de implementar.

Adicionar o script Slowsizes à página

• Clique em Remixar para editar para tornar o projeto editável.

O download de lazysizes.min.js já foi feito e adicionado ao Glitch. Para incluí-lo na página:

• Adicione a seguinte tag <script> a index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

O Slowsizes carregam imagens de maneira inteligente à medida que o usuário percorre a página e prioriza as imagens que o usuário encontrará em breve.

Indicar as imagens para o carregamento lento

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

Por exemplo, as mudanças de flower3.png ficariam assim:

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

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

Confira na prática

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

• Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .

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

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

Verificar usando o Lighthouse

Por fim, é recomendável usar o Lighthouse para verificar essas mudanças. A auditoria de desempenho "Adiar imagens fora da tela" do Lighthouse vai indicar se você esqueceu de adicionar o carregamento lento a qualquer imagem fora da tela.

1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
3. Clique na guia Lighthouse.
4. Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
5. Clique no botão Gerar relatório.
6. Verifique se a auditoria Adiar imagens fora da tela foi aprovada.

Pronto. Você usou a ferramenta Lazysizes para o carregamento lento das imagens na página.