Rendimento del video

In the previous module, hai appreso alcune tecniche di ottimizzazione del rendimento relative alle immagini, un tipo di risorsa ampiamente utilizzato sul web che può consumare una larghezza di banda significativa se non viene ottimizzato e non viene preso in considerazione il riquadro visibile dell'utente.

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

File di origine video

Quando lavori con i file multimediali, il file che riconosci sul tuo sistema operativo (.mp4, .webm e altri) è chiamato container. Un container contiene uno o più stream. Nella maggior parte dei casi, si tratta dello stream 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 container e codec è utile perché ti consente di comprimere i file multimediali utilizzando una larghezza di banda notevolmente inferiore, il che comporta tempi di caricamento complessivi della pagina 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 è utilizzare FFmpeg:

ffmpeg -i input.mov output.webm

Il comando precedente, per quanto semplice quando si utilizza FFmpeg, prende il file input.mov e genera un file output.webm utilizzando le opzioni FFmpeg predefinite. Il comando precedente genera un file video più piccolo che funziona in tutti i browser moderni. La modifica delle 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 modificare ulteriormente le impostazioni, FFmpeg offre il flag -crf quando comprimi i video senza utilizzare la codifica con bitrate variabile. -crf sta per Constant Rate Factor. Si tratta di un'impostazione che regola il livello di compressione accettando un numero intero in un determinato intervallo.

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

Più formati

Quando lavori con i file video, la specifica di 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 ampiamente supportato, o il codec VP9 precedente, che è supportato meglio di AV1, ma in genere non comprime bene come AV1.

L'attributo poster

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

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

Riproduzione automatica

Secondo l'archivio HTTP, il 20% dei video sul web include l' autoplay attributo. autoplay viene utilizzato quando un video deve essere riprodotto immediatamente, ad esempio quando viene utilizzato come sfondo video o in 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 meglio per risorse più critiche. In genere, dovresti evitare i formati di immagini animate, poiché gli equivalenti <video> sono molto più efficienti per questo tipo di media.

Se la riproduzione automatica dei video è un requisito per il tuo sito web, puoi utilizzare l' autoplay attributo direttamente nell'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 del riquadro visibile. L'immagine poster potrebbe essere un segnaposto di immagine di bassa qualità, ad esempio il primo frame del video. Una volta che il video viene visualizzato nel riquadro visibile, il browser inizia a scaricarlo. Ciò potrebbe migliorare i tempi di caricamento dei contenuti all'interno del riquadro visibile iniziale. Lo svantaggio è che, quando utilizzi un'immagine poster per autoplay, gli utenti ricevono un'immagine che viene visualizzata 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 <video> elementi 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 su ciò che viene scaricato per le risorse video utilizzando l'<video> attributo preload:

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

L'impostazione preload="none" è probabilmente la più auspicabile 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 contesto sul contenuto del video. Inoltre, se l'immagine poster è 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">

Caricamento lento

Un'aggiunta relativamente nuova al rendimento dei video è l'attributo loading=lazy. Analogamente al caricamento lento delle immagini a livello di browser e a quello degli iframe, questo attributo porta lo stesso ai video per i download di poster e preload.

L'utilizzo di un attributo poster insieme a preload="none" o preload="metadata" può già evitare il download del video per impostazione predefinita, l'attributo loading=lazy posticipa anche il download dell'immagine poster e dei metadati fino a quando il video non si trova nel riquadro visibile o si sta avvicinando.

Incorporamenti

Data tutta la complessità dell'ottimizzazione e dell'erogazione efficiente dei contenuti video, è logico voler trasferire il problema su servizi video dedicati come YouTube o Vimeo. Questi servizi ottimizzano la distribuzione dei video, ma l'incorporamento di un video da un servizio di terze parti può avere un proprio tipo di effetto sul rendimento, poiché i video player incorporati possono spesso pubblicare molte risorse aggiuntive, come JavaScript.

Data questa realtà, gli incorporamenti di video di terze parti possono influire in modo significativo sul rendimento della pagina. Secondo l'archivio HTTP, 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 immediatamente l'incorporamento durante il caricamento iniziale della pagina e creando invece un segnaposto per l'incorporamento che viene sostituito dall'incorporamento video effettivo quando l'utente interagisce con esso.

Video dimostrativi

Verifica le tue conoscenze

A seguire: ottimizzare i caratteri web

Il prossimo argomento della nostra trattazione sull'ottimizzazione di tipi di risorse specifici riguarda 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).