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>
aindex.html
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
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 atributosrc
paradata-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
.
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
paralazyloaded
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.
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Lighthouse.
- Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
- Clique no botão Gerar relatório.
- 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.