Cos’è il caricamento differito (lazy loading)?

Il caricamento differito (lazy loading) rimanda il caricamento di una parte di una pagina, come un’immagine o un iframe incorporato, finché non scorre effettivamente vicino all’area visibile. Per un’incorporazione YouTube, questo significa che lo script del player e l’anteprima della miniatura non si caricano nell’istante in cui la pagina si apre, ma solo quando un visitatore sta per vederla.

Perché conta per le incorporazioni

Un iframe YouTube è relativamente pesante da caricare. Una pagina con più incorporazioni (un articolo di blog che recensisce cinque video, per esempio) può risultare notevolmente più lenta se tutte si caricano immediatamente, motivo per cui il caricamento differito è una raccomandazione comune per i Core Web Vitals e la velocità generale della pagina.

Come attivarlo

I browser moderni supportano l’attributo nativo loading=”lazy” direttamente su un <iframe>, senza script aggiuntivi. Il generatore di codice di incorporamento include questo attributo di default.

Come funziona il caricamento differito nativo dietro le quinte

Quando un browser incontra un elemento con loading=”lazy”, non crea un segnaposto per poi attendere indefinitamente; calcola invece una soglia di distanza approssimativa dall’attuale area visibile e avvia la richiesta di rete effettiva solo quando l’elemento si avvicina a quella soglia, tipicamente da poche centinaia fino a mille pixel prima di diventare visibile, a seconda del browser e delle condizioni di rete. Questo significa che un’incorporazione con caricamento differito si carica comunque in tempo per essere visibile quando un visitatore vi arriva scorrendo, senza pagare il costo di caricamento per incorporazioni molto più in basso nella pagina, fino alle quali un visitatore potrebbe non scorrere mai.

Un esempio pratico

Un articolo lungo che recensisce dieci prodotti, ciascuno con un video dimostrativo incorporato, beneficia enormemente del caricamento differito: senza di esso, tutti e dieci i player richiederebbero i propri script e miniature contemporaneamente al caricamento della pagina; con loading="lazy" aggiunto a ogni iframe, solo il video o i due video vicini alla parte superiore si caricano immediatamente, mentre il resto si carica progressivamente man mano che il visitatore scorre verso il basso.

Caricamento differito contro click-to-load

Il caricamento differito e il click-to-load risolvono un problema simile con compromessi diversi. Il caricamento differito finisce comunque per caricare automaticamente ogni incorporazione una volta che un visitatore vi scorre vicino, il che è semplice da implementare (un singolo attributo HTML) ma non risparmia risorse per le incorporazioni che il visitatore effettivamente scorre e vede. Il click-to-load va oltre, non caricando mai il vero iframe finché un visitatore non clicca esplicitamente su un segnaposto, il che richiede più lavoro di implementazione ma garantisce zero richieste per i video mai effettivamente riprodotti. Per la maggior parte dei siti, il caricamento differito nativo, già usato di default nel nostro generatore di codice di incorporamento, offre il miglior equilibrio tra semplicità e vantaggio in termini di prestazioni.

Come regola generale, applica il caricamento differito a ogni incorporazione tranne quella già garantita visibile nell’istante in cui la pagina si carica, come un video in evidenza in cima alla pagina.

Il supporto dei browser per il caricamento differito nativo è ormai abbastanza diffuso su Chrome, Firefox, Safari ed Edge moderni da rendere raramente necessaria una libreria JavaScript di caricamento differito specificamente per gli iframe, sebbene approcci più datati basati su librerie restino in uso su molti siti esistenti costruiti prima dell’arrivo del supporto nativo.

Domande frequenti