Landing page con molti video: 36 clip in una pagina, senza rallentarla

Quando è arrivata la richiesta per la landing di SNACK, la nuova unit di Social Content Factory, la parte che mi preoccupava non era il design. Era il conto della spesa.

Trentasei riquadri video sulla stessa pagina, che scorrono in due nastri orizzontali, più il video grande in apertura. Caricati come viene naturale caricarli, sono diciassette megabyte che partono prima che il visitatore abbia letto una riga.

Poi ho misurato i file davvero, e il rapporto era più brutale di quanto pensassi.

Diciassette megabyte di video, o trecento kilobyte di immagini

I file video della pagina, sommati, fanno 17,2 MB. Le anteprime degli stessi video, in WebP, ne fanno 301 KB in tutto. Cinquantanove volte meno.

Questa non è una micro ottimizzazione da fine progetto. È la differenza fra una pagina che si apre e una che non si apre.

E quei megabyte non li paga chi guarda i video fino in fondo: li paga chiunque atterri sulla pagina, compreso chi legge due righe e se ne va. Che poi è la maggioranza.

Da qui la prima decisione, facile da dire e scomoda da accettare: all'apertura non deve partire nessun video. Nemmeno quello grande in cima.

Un video senza src non è un video, è un segnaposto

Il browser scarica un video perché glielo dici tu. Se l'indirizzo non sta in src ma in un attributo che lui non conosce, non parte niente.

<video
  data-src="/media/video/loop/promo.mp4"
  poster="/media/posters/hero.webp"
  preload="none"
  muted loop playsinline
></video>

Tre cose in quel frammento fanno il lavoro.

• data-src invece di src: per il browser lì non c'è nessun video da scaricare, solo una stringa qualsiasi.
• poster: quello che vedi mentre il video non c'è. L'anteprima dell'apertura pesa 14 KB contro i 4,6 MB del video che sostituisce.
• preload="none": quando più tardi il src arriverà davvero, il browser non si metterà comunque a scaricare in anticipo per conto suo.

Il risultato è che la pagina, appena aperta, è fatta di immagini. Diciassette anteprime da pochi kilobyte l'una al posto di altrettanti file da mezzo megabyte abbondante.

Il video entra in scena ottocento pixel prima di servire

Il src glielo diamo dopo, e lo decide un IntersectionObserver:

const io = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      const video = entry.target;
      if (entry.isIntersecting) {
        if (!video.src && video.dataset.src) {
          video.src = video.dataset.src;
        }
        video.muted = true;
        video.play().catch(() => {});
      } else {
        video.pause();
      }
    });
  },
  { rootMargin: '800px' },
);

document.querySelectorAll('video[data-src]').forEach((v) => io.observe(v));

Il pezzo che conta è rootMargin: '800px'. Non aspettiamo che il riquadro sia visibile: lo carichiamo quando manca ancora quasi uno schermo intero. Chi scorre normalmente trova il video già pronto e non vede nessun caricamento; chi non arriva mai fin lì non lo scarica mai.

L'altro dettaglio è quel controllo su !video.src. Senza, ogni volta che il riquadro rientra nello schermo riassegneresti l'indirizzo, e riassegnare src a un video significa ricominciare da capo. Con il controllo, ogni file viene chiesto una volta sola in tutta la vita della pagina.

La riga che quasi tutti dimenticano è la pausa

Guarda il ramo else: video.pause().

Un video che è uscito dallo schermo, se nessuno lo ferma, continua a decodificare fotogrammi. Non è più un problema di rete, è un problema di processore.

Trentasei video in riproduzione simultanea su un portatile fanno partire la ventola e rendono lo scorrimento a scatti, anche quando la rete ha finito il suo lavoro da un pezzo. Su un telefono si mangiano la batteria.

È una riga sola, ed è quella che tiene lo scorrimento fluido.

I nastri duplicano i riquadri, e la duplicazione va nascosta

I due nastri scorrono all'infinito, e per farlo clonano i riquadri finché non coprono tutta la larghezza. Ecco perché i diciassette video di partenza diventano trentasei elementi nella pagina.

I cloni però non aggiungono informazione, la ripetono. Quindi ricevono aria-hidden="true": chi naviga con uno screen reader si sente leggere l'elenco dei lavori una volta, non tre.

Stesso ragionamento per le animazioni: se il sistema operativo dichiara prefers-reduced-motion, le entrate allo scorrimento non partono proprio. Chi ha bisogno di quella impostazione di solito ha un buon motivo.

Cosa dice il punteggio, e cosa dice la pagina

Il risultato è 100 su 100 su tutti i parametri di PageSpeed Insights, che era l'obiettivo dichiarato all'inizio.

Ma il numero che guardo io è un altro: il documento HTML pesa 28 KB e il server risponde in poco più di due decimi di secondo. Il punteggio è una conseguenza, non un traguardo.

Lo dico perché il rapporto con quel 100 è ambiguo. Un punteggio pieno non certifica che la pagina sia bella o che converta. Certifica che non stai facendo pagare a chi arriva il costo di cose che non ha chiesto.

Se stai commissionando una pagina piena di video

Il ragionamento vale ben oltre SNACK. Ogni volta che un progetto mette molti media sulla stessa schermata, le domande da fare in fase di preventivo sono sempre queste tre:

• I video partono tutti all'apertura o solo quando servono? Se la risposta è vaga, è la prima.
• Cosa vede l'utente prima che il video sia pronto? Se la risposta è "un rettangolo nero", manca il poster.
• Cosa succede ai video che sono usciti dallo schermo? Se nessuno li ferma, la pagina resta pesante anche dopo che ha finito di caricare.

Sono tre domande che chiunque può fare senza sapere una riga di codice, e che separano una pagina costruita da una pagina assemblata.

La mia posizione

La landing di SNACK mi piace perché è il caso in cui il vincolo tecnico e l'idea creativa spingono nella stessa direzione. Volevano una pagina che si comportasse come i contenuti short-form che l'unit produce: parte subito, non fa aspettare, non chiede pazienza.

Quella promessa non la mantiene il design. La mantiene la decisione di non scaricare diciassette megabyte a un visitatore che ancora non sa se gli interessi.

Se hai un progetto con molti video e non sai da che parte prenderlo, di questo ci occupiamo tutti i giorni.