Rendimento del video

Nel modulo precedente, hai appreso alcune tecniche di rendimento relative alle immagini, che sono un tipo di risorsa ampiamente utilizzato sul web e che può consumare una larghezza di banda significativa se non viene prestata attenzione alla loro ottimizzazione e alla visualizzazione dell'utente.

Tuttavia, le immagini non sono l'unico tipo di media comunemente visualizzato sul web. I video sono un altro tipo di contenuti multimediali molto utilizzato nelle pagine web. Prima di esaminare alcune delle possibili ottimizzazioni, è importante capire come funziona l'elemento <video>.

File di origine video

Quando lavori con i file multimediali, il file che riconosci sul tuo sistema operativo (.mp4, .webm e altri) è chiamato contenitore. Un contenitore contiene uno o più stream. Nella maggior parte dei casi, si tratta del flusso video e audio.

Puoi comprimere ogni stream utilizzando un codec. Ad esempio, un video.webm potrebbe essere un container WebM contenente uno stream video compresso utilizzando VP9 e uno stream audio compresso utilizzando Vorbis.

Comprendere la differenza tra contenitori e codec è utile perché consente di comprimere i file multimediali utilizzando una larghezza di banda notevolmente inferiore, il che comporta tempi di caricamento della pagina complessivi più brevi, oltre a migliorare potenzialmente la metrica Largest Contentful Paint (LCP) di una pagina, che è una metrica incentrata sull'utente e una delle tre Core Web Vitals.

Un modo per comprimere i file video consiste nell'utilizzare FFmpeg:

ffmpeg -i input.mov output.webm

Il comando precedente, sebbene sia il più semplice possibile quando si utilizza FFmpeg, prende il file input.mov e restituisce un file output.webm utilizzando le opzioni FFmpeg predefinite. Il comando precedente restituisce un file video più piccolo che funziona in tutti i browser moderni. Modificare le opzioni video o audio offerte da FFmpeg potrebbe aiutarti a ridurre ulteriormente le dimensioni del file di un video. Ad esempio, se utilizzi un elemento <video> per sostituire una GIF, devi rimuovere la traccia audio:

ffmpeg -i input.mov -an output.webm

Se vuoi perfezionare ulteriormente le cose, FFmpeg offre il flag -crf durante la compressione dei video senza utilizzare la codifica a bitrate variabile. -crf sta per Constant Rate Factor. Si tratta di un'impostazione che regola il livello di compressione accettando un numero intero all'interno di un intervallo specificato.

I codec come H.264 e VP9 supportano il flag -crf, ma il suo utilizzo dipende dal codec che utilizzi. Per ulteriori informazioni, leggi l'articolo sul fattore di velocità costante per la codifica dei video in H.264, nonché sulla qualità costante durante la codifica dei video in VP9.

Più formati

Quando lavori con i file video, specificare più formati funziona come fallback per i browser che non supportano tutti i formati moderni.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Poiché tutti i browser moderni supportano il codec H.264, MP4 può essere utilizzato come fallback per i browser legacy. La versione WebM può utilizzare il codec AV1 più recente, che non è ancora supportato in modo così ampio, o il codec VP9 precedente, che è supportato meglio di AV1, ma in genere non comprime bene come AV1.

Attributo poster

L'immagine di copertina di un video viene aggiunta utilizzando l'attributo poster nell'elemento <video>, che suggerisce agli utenti i possibili contenuti del video prima dell'inizio della riproduzione:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Riproduzione automatica

Secondo HTTP Archive, il 20% dei video sul web include l'attributo autoplay. autoplay viene utilizzato quando un video deve essere riprodotto immediatamente, ad esempio quando viene utilizzato come sfondo video o come sostituzione delle GIF animate.

Le GIF animate possono essere molto grandi, soprattutto se hanno molti frame con dettagli complessi. Non è raro che le GIF animate consumino diversi megabyte di dati, il che può rappresentare un consumo significativo di larghezza di banda che potrebbe essere utilizzata per risorse più critiche. In genere, dovresti evitare i formati di immagini animate, in quanto gli equivalenti <video> sono molto più efficienti per questo tipo di contenuti multimediali.

Se la riproduzione automatica dei video è un requisito per il tuo sito web, puoi utilizzare l'attributo autoplay direttamente sull'elemento <video>:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Combinando l'attributo poster con l'API Intersection Observer, puoi configurare la pagina in modo che scarichi i video solo quando si trovano all'interno dell'area visibile. L'immagine poster potrebbe essere un segnaposto di bassa qualità, ad esempio il primo fotogramma del video. Una volta visualizzato il video nel riquadro di visualizzazione, il browser inizia a scaricarlo. In questo modo, i tempi di caricamento dei contenuti all'interno dell'area visibile iniziale potrebbero migliorare. Lo svantaggio è che, quando utilizzi un'immagine poster per autoplay, i tuoi utenti ricevono un'immagine che viene mostrata solo brevemente finché il video non viene caricato e inizia la riproduzione.

Riproduzione avviata dall'utente

In genere, il browser inizia a scaricare un file video non appena il parser HTML rileva l'elemento <video>. Se hai elementi <video> in cui l'utente avvia la riproduzione, probabilmente non vuoi che il video inizi il download finché l'utente non ha interagito con esso.

Puoi influire sui contenuti scaricati per le risorse video utilizzando l'attributo preload dell'elemento <video>:

• L'impostazione preload="none" comunica al browser che nessuno dei contenuti del video deve essere precaricato.
• L'impostazione preload="metadata" recupera solo i metadati del video, come la durata e possibilmente altre informazioni sommarie.

L'impostazione preload="none" è probabilmente la più adatta se carichi video per i quali gli utenti devono avviare la riproduzione.

In questo caso, puoi migliorare l'esperienza utente aggiungendo un'immagine poster. In questo modo l'utente ha un'idea dell'argomento del video. Inoltre, se l'immagine di copertina è l'elemento LCP, puoi aumentare la priorità dell'immagine poster utilizzando il suggerimento <link rel="preload"> insieme a fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Incorporamenti

Data la complessità dell'ottimizzazione e della pubblicazione efficiente dei contenuti video, è logico voler delegare il problema a servizi video dedicati come YouTube o Vimeo. Questi servizi ottimizzano la pubblicazione dei video per te, ma l'incorporamento di un video da un servizio di terze parti può avere un proprio effetto sul rendimento, in quanto i video player incorporati possono spesso pubblicare molte risorse aggiuntive, come JavaScript.

Data questa realtà, i video incorporati di terze parti possono influire in modo significativo sulle prestazioni della pagina. Secondo l'HTTP Archive, gli incorporamenti di YouTube bloccano il thread principale per più di 1,7 secondi per il sito web mediano. Il blocco del thread principale per lunghi periodi di tempo è un grave problema di esperienza utente che può influire sull'Interaction to Next Paint (INP) di una pagina. Tuttavia, puoi trovare un compromesso non caricando l'incorporamento immediatamente durante il caricamento iniziale della pagina e creando invece un segnaposto per l'incorporamento che viene sostituito dall'incorporamento del video effettivo quando l'utente interagisce con esso.

Video dimostrativi

Verifica le tue conoscenze

Prossimo passaggio: ottimizzare i caratteri web

Il prossimo argomento della nostra copertura dell'ottimizzazione di tipi di risorse specifici sono i caratteri. L'ottimizzazione dei caratteri del tuo sito web è un aspetto spesso trascurato, ma può avere un impatto significativo sulla velocità di caricamento complessiva del sito web e su metriche come LCP e Cumulative Layout Shift (CLS).