Caricamento differito degli iframe
Rimandare il caricamento degli iframe fuori schermo con loading=lazy
Caricamento differito degli iframe è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è il lazy loading
Il lazy loading rimanda il caricamento delle risorse fino a quando sono necessarie, ovvero quando un elemento si trova vicino al viewport o al suo interno. Per gli iframe, questo significa che il documento incorporato, i relativi script, CSS e risorse non vengono scaricati finché l'utente non scorre vicino all'iframe.
L'attributo loading
Aggiunga loading="lazy" a un iframe: <iframe src="embed.html" loading="lazy">. Il browser determina quando iniziare il caricamento in base a una propria euristica, in genere 1000-2500px prima che l'iframe entri nel viewport. Non è richiesto JavaScript.
Impatto sulle prestazioni
Gli iframe possono caricare una quantità considerevole di risorse (YouTube carica circa 500KB di JavaScript). Il lazy loading di un video incorporato sotto la piega riduce il caricamento iniziale della pagina esattamente di questa quantità, migliorando direttamente LCP e Time to Interactive per il contenuto above the fold.
loading="eager"
loading="eager" carica immediatamente l'iframe indipendentemente dalla sua posizione. Questo è il comportamento predefinito. L'aggiunta esplicita di eager è utile nei contesti che utilizzano lazy per impostazione predefinita, come i framework che aggiungono il lazy loading globalmente, quando un iframe specifico deve essere caricato subito.
Alternativa con IntersectionObserver
Per una logica di lazy loading complessa, ad esempio il caricamento al clic o in base alla qualità della connessione, utilizzi IntersectionObserver: osservi il contenitore dell'iframe e imposti src solo quando entra nel viewport. In questo modo ha il pieno controllo su quando e se l'iframe viene caricato.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Pattern facade
Mostri per impostazione predefinita una miniatura statica invece dell'iframe. Aggiunga un pulsante di riproduzione in sovrimpressione. Al clic, sostituisca la miniatura con l'iframe reale. Il pattern facade di YouTube consiste nel mostrare l'immagine in miniatura del video e caricare l'iframe solo quando l'utente fa clic su Riproduci, risparmiando il costo completo del caricamento dell'embed YouTube.
Pattern click-to-load
Per gli incorporamenti social (timeline di Twitter, post di Instagram) che caricano una quantità significativa di JavaScript, mostri un pulsante "Carica i commenti". Al clic, inserisca l'iframe. Gli utenti che non interagiscono non sostengono mai il costo del caricamento. Si tratta di progressive enhancement per i contenuti social incorporati.
Supporto dei browser
loading="lazy" per gli iframe è supportato in Chrome 77+ e Firefox 121+. Safari non supporta il lazy loading per gli iframe (a partire dal 2024). Per un lazy loading compatibile con tutti i browser, utilizzi IntersectionObserver come fallback affidabile: funziona in tutti i browser moderni.
Prevenzione del CLS
Riservi spazio per gli iframe caricati in modo lazy specificando width, height e CSS aspect-ratio, così da prevenire il Cumulative Layout Shift (CLS). Quando l'iframe viene caricato e diventa visibile, lo spazio è già stato allocato: nessun contenuto circostante si sposta per adattarsi.
Monitoraggio dell'analytics
Gli iframe caricati in modo lazy possono influire sulle analytics: se un iframe per un pixel di tracciamento o un embed di analytics viene caricato in modo lazy, potrebbe non essere eseguito dagli utenti che non scorrono fino a raggiungerlo. Si assicuri che gli iframe fondamentali per l'analytics e il monitoraggio delle conversioni vengano caricati eager o si trovino above the fold.
Combinare lazy e sandbox
Utilizzi lazy e sandbox insieme: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. I due attributi funzionano indipendentemente: lazy controlla quando l'iframe viene caricato, mentre sandbox controlla ciò che l'iframe può fare. Li combini per ottenere un incorporamento efficiente e sicuro di contenuti di terze parti.
Verifica delle conoscenze
Qual è il pattern facade per il caricamento differito degli iframe?
Riepilogo
Il caricamento differito degli iframe con loading="lazy" rimanda il caricamento delle risorse fino a quando l'iframe non si trova vicino all'area visibile, riducendo significativamente il caricamento iniziale della pagina per gli embed pesanti. Il pattern facade e il caricamento al clic estendono ulteriormente questo approccio, caricando l'iframe solo in seguito all'interazione dell'utente. IntersectionObserver consente un controllo compatibile con i vari browser per gli scenari di caricamento differito più complessi. Riservi lo spazio per le dimensioni dell'iframe per evitare il CLS.
Domande Frequenti
La lezione «Caricamento differito degli iframe» è gratuita?
Sì — il testo completo di «Caricamento differito degli iframe» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Caricamento differito degli iframe»?
Rimandare il caricamento degli iframe fuori schermo con loading=lazy Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Caricamento differito degli iframe»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- L’elemento iframe: src e sandbox
- Sicurezza degli iframe: clickjacking e X-Frame-Options
- Gli elementi embed e object
- Caricamento differito degli iframe