Un embed YouTube recupera gli script del player e una miniatura di anteprima nel momento stesso in cui si carica, e su una pagina con più video l’effetto si somma rapidamente. Ecco come restare veloci senza rinunciare ai video incorporati.
Perché gli embed influenzano la velocità della pagina
Ancora prima che un visitatore prema play, un iframe incorporato richiede le risorse del player di YouTube e un’immagine di anteprima. Su una pagina di recensione con cinque video incorporati, ad esempio, si tratta di cinque serie di richieste che partono contemporaneamente al caricamento della pagina, competendo con le risorse del tuo stesso sito per banda e tempo di rendering.
Soluzione 1: lazy loading nativo
La soluzione più semplice è un singolo attributo HTML. Aggiungere loading=”lazy” a un <iframe> indica al browser di rimandarne il caricamento fino a quando non sta per entrare nella parte visibile dello schermo:
<iframe src="..." loading="lazy" ...></iframe>Questa funzione è supportata da tutti i browser moderni, non richiede JavaScript, ed è la modifica dal valore più alto per una pagina con video incorporati sotto la piega.
Soluzione 2: click-to-load
Per le pagine con molti embed, un’opzione ancora più decisa è non caricare affatto alcun iframe finché il visitatore non ci clicca sopra. Mostra un’immagine miniatura statica, recuperata dagli URL pubblici delle miniature di YouTube (vedi il nostro visualizzatore di miniature), con un pulsante di riproduzione sovrapposto, e sostituiscila con l’iframe reale solo al clic. In questo modo non parte alcuna richiesta verso YouTube per i video che un visitatore non guarda mai effettivamente.
Soluzione 3: attiva l’autoplay solo dove serve
L’autoplay di un video aggiunge lavoro reale nel momento in cui la pagina si carica: il player deve bufferizzare immediatamente invece di aspettare l’intenzione dell’utente. Riserva l’autoplay agli embed davvero importanti, e affidati al lazy loading e a un pulsante di riproduzione visibile per gli altri.
Misurare l’impatto
Strumenti come Google PageSpeed Insights o il pannello Lighthouse integrato nel browser segnalano direttamente gli embed di terze parti non ottimizzati, e permettono di confrontare i tempi di caricamento prima e dopo l’applicazione del lazy loading. Sulle pagine con più video la differenza è di solito facile da notare sia nei numeri sia nella sensazione percepita di caricamento.
Integrato di default
Il nostro generatore di codice embed include loading=”lazy” di default su ogni embed generato, quindi questa ottimizzazione è già gestita nel momento in cui copi il codice.