Cos'e il lazy loading
Il lazy loading e una tecnica che ritarda il caricamento delle immagini below-the-fold finché l'utente non si avvicina scrollando. Permette di velocizzare il caricamento iniziale, ridurre la banda consumata e migliorare LCP e tutti i Core Web Vitals. Dal 2020 e supportato nativamente da tutti i browser moderni.
Attributo loading="lazy"
L'implementazione e banale: img src="image.jpg" loading="lazy" alt="...". Funziona anche su iframe loading="lazy". Il browser gestisce automaticamente quando caricare basandosi su distance to viewport. Supporto: Chrome 76+, Firefox 75+, Safari 15.4+, copre oltre il 95% dei browser.
Quando NON usare lazy
Mai lazy su immagini above-the-fold, in particolare l'immagine LCP: ritarderesti il caricamento dell'elemento più importante. Tipicamente le prime 1-2 immagini di una pagina (hero, logo) devono essere eager (default). Usa fetchpriority="high" per priorità massima.
Decoding e fetchpriority
decoding="async" delega la decodifica all'idle time. decoding="sync" forza decodifica immediata (usalo per LCP). fetchpriority="high" o "low" istruisce il browser sull'importanza. Combinazione tipica LCP: img fetchpriority="high" decoding="sync". Below-fold: img loading="lazy" decoding="async".
Intersection Observer come fallback
Per browser molto vecchi o casi avanzati (placeholder, blur-up, LQIP), usa Intersection Observer JS. Librerie: lazysizes, vanilla-lazyload. Detecta quando entra in viewport e sostituisce data-src con src. Permette controllo fine su threshold, rootMargin e effetti di entrata.
Lazy loading e CLS
Se le immagini lazy-loaded non hanno width/height, causano CLS quando si caricano. Specifica sempre dimensioni esplicite: img loading="lazy" width="800" height="600". Il browser calcola aspect-ratio e riserva spazio. CSS aspect-ratio property come alternativa moderna per design responsive.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.