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>
aindex.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 atributosrc
paradata-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
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, é 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.
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- 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 a ferramenta Lazysizes para o carregamento lento das imagens na página.