Lazy loading native HTML (loading=lazy)
L'attributo loading=lazy abilita il lazy loading nativo, ritardando il caricamento di immagini e iframe fino a quando l'utente non si avvicina con lo scroll. Riduce drasticamente il tempo di caricamento iniziale, migliora i Core Web Vitals e risparmia banda. Soluzione semplice ed efficace che funziona su tutti i browser moderni senza necessità di librerie esterne.
Cos'è il lazy loading nativo
Prima del 2019 il lazy loading richiedeva librerie JavaScript come lozad.js o yall.js. Oggi basta aggiungere loading="lazy" a img o iframe per ottenere lo stesso risultato a costo zero. Il browser carica la risorsa quando entra (o sta per entrare) nel viewport, calcolando intelligentemente la distanza in base alla velocità di scroll e alla connessione. Implementazione standardizzata e ottimizzata.
Quando usarlo
Usalo su tutte le immagini below-the-fold, ovvero quelle non visibili al primo render. Le immagini above-the-fold non vanno lazy-loaded, perché il browser le ritarderebbe inutilmente penalizzando il Largest Contentful Paint. Per gli iframe (mappe, video YouTube, social embed) il lazy loading è quasi sempre opportuno, perché si tratta di risorse pesanti spesso non immediatamente necessarie all'utente.
Eager per LCP
Il Largest Contentful Paint è la metrica Core Web Vital più legata alla percezione di velocità. Spesso il LCP è un'immagine hero. Per accelerarlo: loading="eager" (default), fetchpriority="high", senza decoding async. Il browser scarica e renderizza l'hero con priorità massima. Le altre immagini sotto la fold restano lazy. Strategia tipica: la prima immagine visibile eager + high priority, tutto il resto lazy. Risultato: LCP migliore senza penalizzare il tempo di caricamento complessivo della pagina.
Lazy loading e SEO
Googlebot esegue scroll virtuale e vede tutte le immagini lazy, indicizzandole come quelle eager. Le immagini lazy contano nei Core Web Vitals e nel ranking. Anzi: pagine più veloci hanno ranking migliore. Per Google Image Search la sintassi loading="lazy" non penalizza l'indicizzazione. L'unica cautela: alt text è sempre obbligatorio per SEO immagini, indipendentemente da lazy/eager. Combinare srcset + sizes + loading=lazy + alt è la ricetta per immagini perfettamente ottimizzate per performance e SEO.
Intersection Observer manuale
Per controllo più granulare sul lazy loading puoi usare Intersection Observer API. Crei un'observer che monitora elementi e li carica quando entrano nel viewport. Permette di personalizzare la rootMargin (quanto prima far partire il caricamento), threshold (percentuale di visibilità), e gestire batch loading. Pattern utile per: scroll infinito di feed/timeline, video poster che diventano video player, animazioni "scroll-triggered". Più complesso del semplice loading=lazy ma più potente. Per immagini semplici loading=lazy basta sempre; per logica avanzata Intersection Observer è la strada giusta.
Content visibility
CSS property content-visibility: auto è il complemento perfetto per il lazy loading: indica al browser di non renderizzare sezioni off-screen. Per blocchi grandi di contenuto (commenti, gallerie, sezioni laterali) riduce drasticamente i tempi di rendering e di parsing CSS. Aggiungi contain-intrinsic-size per riservare spazio prima del rendering effettivo. Combinato con loading=lazy sulle immagini interne, ottieni una pagina che renderizza solo ciò che è effettivamente visibile, in modo incrementale durante lo scroll. Performance boost notevole per pagine lunghe e ricche di contenuto.
Lazy loading per video
Video pesanti richiedono strategie più sofisticate del semplice loading=lazy. Usa preload="none" sui video tag per evitare download iniziale. Mostra poster image leggera. Quando user clicca play, allora carica e riproduce. Per video YouTube embeddati, lite-youtube-embed (di Paul Irish) implementa facade pattern: thumbnail + bottone play, sostituisce con iframe solo al click. Riduce payload iniziale di ~500KB a ~5KB. Pattern obbligatorio per pagine con multipli video. Per video self-hosted, considera streaming HLS/DASH adaptive bitrate, che adatta qualità alla connessione. Combinato con CDN dedicato video (Mux, Cloudflare Stream, Bunny Stream) ottieni performance ottimale globale.
Procedura passo-passo
- Identifica le immagini below-the-fold (non visibili senza scroll).
- Aggiungi loading="lazy" all'img: <img src="..." alt="..." loading="lazy">.
- Per iframe (YouTube, Maps): <iframe src="..." loading="lazy"></iframe>.
- Sulle immagini above-the-fold usa loading="eager" (default) per priorità alta.
- Specifica width e height per evitare layout shift (CLS).
- Combina con decoding="async" per parsing non-bloccante.
- Misura miglioramenti con Lighthouse e Core Web Vitals.
Errori comuni e come risolverli
- Lazy su tutte le immagini: ritardare quelle above-the-fold peggiora LCP; valuta caso per caso.
- Width/height mancanti: causa layout shift quando l'immagine carica; specifica sempre dimensioni.
- Lazy senza alt: ignora accessibilità; alt sempre presente per a11y.
- Doppio lazy: combinare loading=lazy con librerie JS può creare conflitti; scegli un solo metodo.
- Iframe video pesanti: oltre a lazy considera facade pattern per YouTube/Vimeo per risparmiare ancora più risorse.
Domande frequenti
D: Lazy loading funziona su tutti i browser?
R: Sì, supportato da Chrome, Firefox, Safari, Edge da almeno il 2020.
D: Influisce sulla SEO?
R: No, Googlebot esegue lo scroll virtuale e indicizza tutto. Anzi, migliora i Core Web Vitals che sono fattori di ranking.
D: Posso usarlo con srcset?
R: Sì, perfettamente compatibile. Combina entrambi per ottimizzazione massima.
D: A che distanza inizia il caricamento?
R: Dipende da browser e connessione; generalmente alcuni viewport prima dell'apparizione effettiva.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.