Carregamento lento de imagens fora da tela com tamanho lento

Katie Hempenius

Para continuar este codelab, abra este Glitch em uma segunda guia.

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

Imagens que estão fora da tela durante o carregamento de página inicial são candidatas ideais para essa técnica. O melhor de tudo é que a Slowsizes torna essa 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 o arquivo foi adicionado a este 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>

Observação : o arquivo lazysizes.min.js já foi adicionado a este projeto. Por isso, não é necessário fazer isso separadamente. Ele pode ser usado pelo script que você acabou de adicionar.

O Lazysizes carrega imagens de maneira inteligente à medida que o usuário percorre a página e prioriza aquelas que vai encontrar em breve.

Indicar as imagens para 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 em flower3.png ficariam assim:

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

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

Observação : você pode estar se perguntando por que é necessário mudar o atributo src para data-src. Se esse atributo não for alterado, todas as imagens serão carregadas imediatamente em vez de serem carregadas lentamente. data-src não é um atributo reconhecido pelo navegador. Por isso, quando ele encontra uma tag de imagem com esse atributo, ele não carrega a imagem. Nesse caso, isso é bom, porque permite que o script Slowsizes decida quando a imagem deve ser carregada em vez do navegador.

Confira na prática

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

• Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .

• Abra o console e encontre as imagens que acabaram de ser adicionadas. As classes delas 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, convém usar o Lighthouse para verificar essas alterações. A auditoria de desempenho "Adiar imagens fora da tela" do Lighthouse vai indicar se você se esqueceu de adicionar carregamento lento a qualquer imagem fora da tela.

1. Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
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 Lazysizes para fazer o carregamento lento das imagens na página.