Video YouTube incorporato rallenta il sito? Il trucco della copertina che carica il player solo al clic

Sulla sinistra c’è un riquadro azzurro pallido con uno schema di pagina stilizzato, un’etichetta piccola, Video guide, e al centro un pulsante blu a pillola con il triangolo bianco e la scritta Play Video. Una freccia, una sola parola in maiuscolo, Click. A destra, lo stesso riquadro, identico al pixel, solo che in fondo è comparsa una barra scura con il tasto play, la barra di avanzamento e l’icona dello schermo intero. Sopra, un titolo che sembra uno slogan: Load The Player After The Click, carica il player dopo il clic.

È uno schema didattico, ma racconta una delle scelte di progettazione più sottovalutate del web: il pattern facade, la facciata. Quel primo pulsante blu è finto. Non c’è nessun player dietro, solo un’immagine e un po’ di stile. Il player vero, quello di YouTube o Vimeo, arriva solo se qualcuno lo chiede. Mi piace pensarlo come un fondale dipinto a teatro: dalla platea sembra una stanza, ma diventa una stanza vera solo quando l’attore apre la porta.

Perché un video incorporato rallenta il sito anche se nessuno lo guarda

La domanda che sta dietro a questa grafica è semplice: quanto costa ciò che non si guarda? Quando incolli il codice di incorporamento di YouTube in una pagina, il browser non scarica il video, ma scarica tutto il necessario per poterlo riprodurre: script, fogli di stile, connessioni verso server esterni. E lo fa per ogni visitatore, anche per quello che scorre oltre senza degnarlo di uno sguardo.

Le cifre ufficiali sono eloquenti. La documentazione di Lighthouse, lo strumento di analisi delle prestazioni integrato in Chrome, porta proprio l’esempio di YouTube: la facciata pesa circa 3 KB, il player che viene caricato al clic circa 540 KB. Le linee guida di web.dev sugli incorporamenti di terze parti aggiungono che molti embed diffusi superano i 100 KB di JavaScript e possono arrivare fino a 2 MB, tenendo occupato il thread principale del browser mentre vengono eseguiti. Tradotto: la pagina risponde più lentamente ai tocchi e ai clic proprio nei secondi in cui il visitatore sta decidendo se restare.

Nella mia esperienza di revisione di siti di studi professionali e piccole aziende, il caso tipico è la home con un video di presentazione in fondo alla pagina. Nessuno lo nota, nessuno lo avvia, ma è spesso la risorsa più pesante di tutta la pagina, più del logo, dei testi e delle fotografie messe insieme.

Come è fatta la facciata: anatomia di un trucco di scena

La grafica lo spiega in due tempi, e la scelta di disegnare i due riquadri quasi identici non è pigrizia: è il cuore del pattern. La facciata deve occupare esattamente lo stesso spazio del player che sostituirà, altrimenti al momento del clic la pagina salta e il contenuto si sposta. Le linee guida web.dev insistono su questo punto, perché gli spostamenti improvvisi del layout sono uno degli indicatori che Google misura nei Core Web Vitals.

Gli ingredienti sono pochi:

un’immagine statica, di solito il fotogramma di copertina del video, ottimizzata e leggera;
un pulsante play disegnato che imita quello vero, così l’utente sa cosa aspettarsi;
un piccolo script che, al clic, sostituisce l’immagine con il vero iframe del player e avvia la riproduzione.

Dal punto di vista di chi guarda, la differenza è quasi impercettibile: un istante di attesa in più dopo il clic. Dal punto di vista della pagina, è la differenza tra caricare mezzo megabyte per tutti o solo per chi lo vuole davvero.

Da dove nasce: lite-youtube-embed e l’audit di Lighthouse

L’idea di sostituire il player con una copertina circolava da tempo tra gli sviluppatori, ma a darle una forma riconoscibile è stato lite-youtube-embed, un piccolo componente pubblicato da Paul Irish, ingegnere del team Chrome di Google. Si presenta con una descrizione di quattro parole, a faster youtube embed, è distribuito con licenza Apache 2.0 e su GitHub conta migliaia di stelle e centinaia di derivazioni, comprese versioni per React e come web component autonomo. Il dettaglio che lo ha reso popolare è la sua semplicità: si scrive un tag personalizzato con l’identificativo del video e il resto lo fa lui.

Il passo successivo è stato istituzionale. Con la versione 7.0 di Lighthouse è arrivato un audit dedicato, Lazy load third-party resources with facades, che segnala quando una pagina carica risorse di embed differibili come player video, widget social o chat. I dati su quali prodotti si possono differire e quali facciate esistono sono raccolti nel progetto open source third-party-web di Patrick Hulce. In altre parole, quella che era un’astuzia da sviluppatori attenti è diventata una raccomandazione ufficiale, con tanto di bollino rosso nei report.

Lazy loading non è la stessa cosa: il riquadro che molti saltano

Nella fascia in basso della grafica c’è il consiglio che considero il più prezioso: Lazy is different, con la formula vicino al viewport diverso da cliccato. Qui si annida l’equivoco più frequente che incontro.

Da qualche anno i browser supportano l’attributo loading=lazy sugli iframe. MDN lo descrive con precisione: il caricamento viene rimandato finché l’iframe non arriva a una certa distanza dall’area visibile, distanza calcolata dal browser. Funziona, ed è meglio di niente, ma il player viene comunque caricato appena l’utente ci scorre vicino. Chi scorre una pagina lunga fino in fondo si porta a casa il player intero senza averlo mai avviato. La facciata invece aspetta un’intenzione esplicita: il clic. Sono due filosofie diverse, una basata sulla posizione, l’altra sulla volontà.

Privacy: il player è anche una porta aperta verso terzi

C’è un secondo costo nascosto, meno misurabile ma più delicato. Ogni volta che il player di un servizio esterno si carica, il browser del visitatore si collega ai server di quel servizio, che può leggere informazioni sul dispositivo e impostare strumenti di tracciamento. Tutto questo prima di qualsiasi clic.

Sul piano giuridico, la Corte di giustizia dell’Unione europea con la sentenza Fashion ID del 2019 ha stabilito che il gestore di un sito che incorpora un contenuto di terze parti, nel caso specifico il pulsante Mi piace di Facebook, può essere considerato contitolare del trattamento per la raccolta e la trasmissione dei dati dei visitatori. Il principio è stato letto dai commentatori come applicabile in generale ai contenuti di terze parti incorporati. In Italia il riferimento sono le Linee guida cookie e altri strumenti di tracciamento del Garante per la protezione dei dati personali, approvate il 10 giugno 2021 e pubblicate in Gazzetta Ufficiale, che rafforzano il potere di scelta dell’utente: gli strumenti non tecnici non possono essere attivati prima del consenso.

Qui la facciata diventa preziosa due volte. Un banner cookie fatto bene dovrebbe impedire al player di caricarsi finché l’utente non acconsente; la copertina statica è il modo più elegante per riempire quel vuoto, magari con una riga di testo che spiega che al clic verranno caricati contenuti di un servizio esterno. La modalità a privacy avanzata di YouTube, quella con il dominio youtube-nocookie, riduce l’uso dei cookie ma il collegamento ai server esterni resta: per questo nei progetti che seguo la considero un complemento, non un sostituto della facciata. Per la valutazione di conformità del singolo sito, ovviamente, serve il proprio consulente privacy.

Il conto lo paga chi naviga da smartphone

Mezzo megabyte sembra poco con la fibra di casa. Su una connessione mobile instabile, in treno o in montagna, è il motivo per cui una pagina resta bianca qualche secondo di troppo. E con le offerte a giga limitati, è traffico consumato per qualcosa che non si è scelto di vedere. Secondo il Web Almanac di HTTP Archive, già nel 2021 oltre il 94% dei siti mobili usava almeno una risorsa di terze parti: il problema non riguarda qualche sito sfortunato, riguarda quasi tutti.

Come capire in trenta secondi se una pagina carica il player prima del clic

È il terzo consiglio della grafica, Check the network, ed è alla portata di chiunque abbia un computer:

apri la pagina in Chrome, Edge o Firefox e premi F12 per aprire gli strumenti per sviluppatori;
vai nella scheda Rete (Network) e ricarica la pagina senza toccare il video;
nel campo filtro scrivi youtube oppure vimeo: se compaiono decine di richieste e centinaia di kilobyte prima di aver premuto play, il player viene caricato in anticipo;
ora clicca sul video e osserva: con una facciata ben fatta, le richieste partono solo in quel momento.

In alternativa, nella stessa finestra c’è la scheda Lighthouse: lancia un’analisi e cerca la voce dedicata alle facciate. Se il tuo sito la fallisce, hai già la frase giusta da girare a chi lo gestisce.

Cosa chiedere a chi gestisce il sito

I video incorporati usano una facciata con copertina statica o caricano il player all’apertura della pagina?
La copertina ha le stesse proporzioni del player, così non ci sono salti di layout al clic?
Il banner cookie blocca davvero i contenuti esterni prima del consenso, o si limita a mostrarsi?
Il video in quella posizione serve davvero, o basterebbe un link al canale?

Una lezione di design che va oltre il video

Di questa grafica apprezzo anche la forma: un solo colore d’accento, il blu, usato per ciò che è interattivo, cioè pulsante, freccia e parola chiave; il nero della barra di controllo che compare solo nel secondo riquadro, come a dire che lì sta la cosa vera e pesante. La lettura è da sinistra a destra, causa ed effetto, senza una parola di troppo. È lo stesso principio che predica: mostrare il minimo indispensabile finché non serve altro.

Ed è un principio che si sta allargando. Le stesse facciate oggi si usano per le chat di assistenza, le mappe, i widget dei social. La domanda da farsi, per ogni elemento di una pagina, è quella che questo schema pone con garbo: chi lo sta pagando, e per cosa? Spesso la risposta migliore è un fondale dipinto, pronto a diventare vero nel momento esatto in cui qualcuno apre la porta.

Fonti

Tag:Interfacce digitali