Caricamento lento delle immagini fuori schermo con dimensioni lazy

Katie Hempenius

Il caricamento lento consiste nell'attendere il caricamento delle risorse fino a quando non sono necessarie, anziché caricarli in anticipo. Questo 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 candidati ideali per questa tecnica. La cosa migliore è che le dimensioni lente rendono una strategia molto semplice da implementare.

Aggiungi lo script lazysize alla pagina

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

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>

le dimensioni lazy caricano in modo intelligente le immagini man mano che l'utente scorre la pagina e danno la priorità alle immagini che l'utente incontrerà a breve.

Indica le immagini di cui eseguire il caricamento lento

• Aggiungi la classe lazyload alle immagini da caricare tramite caricamento lento. Inoltre, modifica l'attributo src in data-src.

Ad esempio, le modifiche per flower3.png sarebbero simili alle seguenti:

<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.

Guarda come funziona

È tutto. Per vedere le modifiche in azione:

• 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 Network per vedere che i file immagine vengono caricati singolarmente mentre scorri la pagina verso il basso.

Verifica tramite Lighthouse

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

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

Operazione riuscita. Hai utilizzato dimensioni ridotte per il caricamento lento delle immagini nella tua pagina.