Caricamento lento delle immagini fuori schermo con dimensioni lazy

Katie Hempenius

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Il caricamento lento è l'approccio che consiste nell'attendere di caricare le risorse finché non sono necessarie, anziché caricarli in anticipo. Ciò può migliorare le prestazioni riducendo la quantità di risorse che devono essere caricate e analizzate al caricamento iniziale della pagina.

Le immagini fuori schermo durante il caricamento pagina iniziale sono ideali per questa tecnica. La funzionalità lazysize rende questa strategia molto semplice da implementare.

Aggiungi lo script per le dimensioni lazy alla pagina

• Fai clic su Remix per modificare per rendere il progetto modificabile.

lazysizes.min.js è già stato scaricato e aggiunto a questo Glitch. Per includerlo nella pagina:

• Aggiungi il seguente tag <script> a index.html:

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

Nota: il file lazysizes.min.js è già stato aggiunto a questo progetto, quindi non è necessario aggiungerlo separatamente. Lo script appena aggiunto può utilizzare questo script.

lazysize carica in modo intelligente le immagini mentre l'utente scorre la pagina e assegna la priorità alle immagini che l'utente incontrerà a breve.

Indica le immagini per il caricamento lento

• Aggiungi la classe lazyload alle immagini che devono essere caricate tramite caricamento lento. Inoltre, modifica l'attributo src in data-src.

Ad esempio, le modifiche per flower3.png avranno il seguente aspetto:

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

Per questo esempio, prova il caricamento lento flower3.png, flower4.jpg e flower5.jpg.

Nota: ti starai chiedendo perché è necessario modificare l'attributo src in data-src. Se questo attributo non viene modificato, tutte le immagini verranno caricate immediatamente anziché essere caricate tramite caricamento lento. data-src non è un attributo riconosciuto dal browser, pertanto quando rileva un tag immagine con questo attributo, non carica l'immagine. In questo caso, ciò è positivo, poiché consente allo script di lazysizes di decidere quando caricare l'immagine, anziché il browser.

Guarda come funziona

È tutto. Per vedere queste modifiche in azione, procedi nel seguente modo:

• Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .

• Apri la console e trova le immagini appena aggiunte. I corsi dovrebbero cambiare da lazyload a lazyloaded mentre scorri la pagina verso il basso.

• Controlla il riquadro Rete per vedere che i file immagine vengono caricati singolarmente mentre scorri la pagina verso il basso.

Verifica utilizzando Lighthouse

Infine, ti consigliamo di utilizzare Lighthouse per verificare queste modifiche. Il controllo delle prestazioni "Rimanda immagini fuori schermo" di Lighthouse indicherà se hai dimenticato di aggiungere il caricamento lento a qualsiasi immagine fuori schermo.

1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
2. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
3. Fai clic sulla scheda Lighthouse.
4. Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
5. Fai clic sul pulsante Genera report.
6. Verifica che il controllo Rimanda immagini fuori schermo sia stato superato.

Success! Hai utilizzato lazysize per caricare le immagini nella pagina.