Facciate per gli embed: video, mappe e chat senza rallentare

Un video incorporato da una piattaforma esterna sembra un semplice riquadro con un pulsante di riproduzione. Dietro quel riquadro, però, c'è un iframe che carica un'intera applicazione: HTML, fogli di stile, centinaia di kilobyte di JavaScript, font, immagini e connessioni verso più domini. Tutto questo accade al caricamento della pagina, anche se la maggior parte dei visitatori non premerà mai play. Lo stesso vale per mappe interattive, widget di chat, feed di social network e moduli di prenotazione.

La tecnica della facciata risolve il problema in modo elegante: al posto del componente vero si mostra un'anteprima statica che gli somiglia, e il componente viene caricato solo quando l'utente interagisce.

Come funziona una facciata

Il principio è semplice:

1. nella pagina si inserisce un elemento leggero, di solito un'immagine e un pulsante, con le stesse dimensioni del componente finale;
2. al clic (o al passaggio del mouse, se si vuole anticipare) uno script sostituisce l'anteprima con l'iframe o il widget reale;
3. il componente parte già con l'azione richiesta, per esempio il video in riproduzione automatica, così l'utente non deve cliccare due volte.

Il costo iniziale passa da centinaia di kilobyte e diverse connessioni a una sola immagine ottimizzata. Lighthouse riconosce questo schema e segnala gli embed per cui esistono facciate note.

Video: un esempio pratico

Per un video basta un'immagine di anteprima e un pulsante:

<div class="video" data-id="ID_DEL_VIDEO">
  <img src="/img/anteprima-video.webp" alt="Anteprima: installazione del modulo"
       width="1280" height="720" loading="lazy">
  <button type="button" aria-label="Riproduci il video">▶</button>
</div>

document.querySelectorAll('.video').forEach((box) => {
  box.querySelector('button').addEventListener('click', () => {
    const iframe = document.createElement('iframe');
    iframe.src = `${URL_EMBED}/${box.dataset.id}?autoplay=1`;
    iframe.allow = 'autoplay; fullscreen';
    iframe.title = 'Video: installazione del modulo';
    iframe.width = 1280; iframe.height = 720;
    box.replaceChildren(iframe);
  }, { once: true });
});

Alcuni accorgimenti contano:

• l'anteprima va ospitata sul proprio sito e ottimizzata, invece di richiamarla dal fornitore al caricamento;
• larghezza e altezza, oppure aspect-ratio nel CSS, evitano spostamenti di layout quando l'iframe sostituisce l'immagine;
• il pulsante deve essere un vero button, raggiungibile da tastiera e con un'etichetta comprensibile;
• esistono componenti pronti e collaudati, come lite-youtube-embed per i video di YouTube, che implementano già questo schema.

Mappe

Una mappa interattiva è tra gli embed più pesanti. Spesso, però, all'utente basta vedere dove si trova un luogo. Le alternative, in ordine di leggerezza:

• immagine statica della mappa con un link «Apri nella mappa» che porta all'applicazione esterna;
• immagine statica con caricamento su richiesta: al clic si sostituisce con la mappa interattiva;
• mappa interattiva con loading="lazy" sull'iframe, se si trova in fondo alla pagina e deve essere interattiva subito.

Per la pagina dei contatti di un'attività locale, un'immagine statica con indirizzo testuale e link è quasi sempre sufficiente, ed è anche più accessibile.

Widget di chat

I widget di assistenza sono un caso tipico: caricano molto codice, aprono connessioni persistenti e a volte mostrano un'animazione che sposta il layout. Una facciata qui è un semplice pulsante fisso con l'icona della chat:

• al clic si carica lo script del fornitore e si apre la finestra;
• nel frattempo il pulsante mostra uno stato di caricamento, così l'utente capisce che qualcosa sta accadendo;
• se il fornitore offre un'API per aprire la chat in modo programmatico, la si invoca subito dopo il caricamento.

Il risparmio è evidente soprattutto sui dispositivi mobili, dove l'esecuzione di JavaScript pesa di più.

Il compromesso dell'attesa

La facciata sposta il costo dal caricamento al momento dell'interazione: chi preme play attende un po' di più rispetto a un iframe già pronto. Due tecniche riducono questa attesa:

1. preconnect al passaggio del mouse: quando il puntatore si avvicina al pulsante, si aggiungono dinamicamente i suggerimenti preconnect verso i domini del fornitore;
2. avvio al pointerdown invece che al click, che guadagna qualche decina di millisecondi.

Privacy come effetto collaterale

C'è un vantaggio ulteriore: finché l'utente non interagisce, il browser non contatta i server del fornitore. Nessun cookie di terze parti, nessuna richiesta che riveli la visita. Per molti siti questo semplifica anche la gestione del consenso, perché il caricamento avviene solo dopo un'azione esplicita.

In sintesi

• Gli embed di video, mappe e chat caricano intere applicazioni anche se nessuno li usa.
• Una facciata mostra un'anteprima leggera e carica il componente solo all'interazione.
• Riserva lo spazio con dimensioni o aspect-ratio e usa veri pulsanti accessibili.
• Riduci l'attesa con preconnect al passaggio del mouse e avvio al pointerdown.
• Il caricamento su richiesta migliora anche la privacy degli utenti.