Caricamento differito
Il lazy loading ritarda il caricamento delle risorse non critiche, come immagini o video, fino al momento in cui sono necessarie. Ciò riduce il tempo di caricamento iniziale della pagina e migliora le prestazioni percepite.
Il lazy loading consente ai browser di concentrarsi innanzitutto sui contenuti "above-the-fold", migliorando sia l'esperienza utente che le metriche delle prestazioni.
Un blog con articoli lunghi ha implementato il lazy loading nativo delle immagini. Il tempo di caricamento iniziale è diminuito del 35%, mantenendo fluida la velocità di scorrimento.
Cosa dovrebbe essere caricato in modalità lazy
- Immagini "below-the-fold"
- Video incorporati
- Widget di terze parti
Evita il lazy loading per gli elementi che influiscono sull'LCP, come le immagini hero.
Best practice
- Utilizza il lazy loading nativo (loading="lazy") dove possibile
- Assicurati che i contenuti rimangano scansionabili
- Testa il comportamento su diversi dispositivi e browser
Il lazy loading dovrebbe migliorare la velocità, non nascondere i contenuti agli utenti o ai crawler.
Problemi comuni del lazy loading
- Lazy loading di immagini "above-the-fold"
- Blocco del rendering dei contenuti
- Lazy loading basato su JavaScript che i motori di ricerca non riescono a elaborare