Rendimento del video

Nel modulo precedente hai appreso alcune tecniche di performance relative un tipo di risorsa ampiamente utilizzato sul web, che può essere una larghezza di banda significativa se non si presta attenzione a ottimizzarle e a sfruttare le l'area visibile.

Tuttavia, le immagini non sono l'unico tipo multimediale comunemente visto sul web. I video sono un altro tipo multimediale molto usato spesso nelle pagine web. Prima di esaminare alcuni dei possibili ottimizzazioni, è importante comprendere innanzitutto in che modo il <video> funziona.

File di origine video

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

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

Comprendere la differenza tra container e codec è utile, puoi comprimere i file multimediali utilizzando una larghezza di banda notevolmente inferiore, il che si traduce in una riduzione dei tempi di caricamento complessivi della pagina e nel potenziale miglioramento la Largest Contentful Paint (LCP) della pagina, che è una metrica incentrata sugli utenti e uno dei tre Core Web Vitals.

Un modo per comprimere i file video prevede l'utilizzo di FFmpeg:

ffmpeg -i input.mov output.webm

Il comando precedente, anche se basilare quando si usa FFmpeg, prende il comando input.mov e restituisce un file output.webm utilizzando il formato FFmpeg predefinito le opzioni di CPU e memoria disponibili. Il comando precedente produce un file video più piccolo che funziona in tutte le browser moderni. La modifica del video o delle opzioni audio offerte da FFmpeg potrebbe contribuisce a ridurre ulteriormente le dimensioni del file di un video. Ad esempio, se se utilizzi un elemento <video> in sostituzione di una GIF, devi rimuovere la traccia audio:

ffmpeg -i input.mov -an output.webm

Se vuoi apportare ulteriori modifiche, FFmpeg offre il flag -crf quando comprimere i video senza utilizzare la codifica della velocità in bit variabile. -crf sta per Fattore di frequenza costante. Si tratta di un'impostazione che regola il livello e lo fa accettando un numero intero all'interno di un determinato intervallo.

Codec come H.264 e VP9 supportano il flag -crf, ma il suo utilizzo dipende il codec in uso. Per ulteriori informazioni, leggi l'articolo sul fattore a frequenza costante per codifica i video in H.264, nonché qualità costante durante la codifica dei video in VP9.

Più formati

Quando lavori con i file video, specificare più formati funziona come una riserva 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, il formato MP4 può essere utilizzato di riserva per i browser precedenti. 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 lo stesso volume di AV1.

Attributo poster

L'immagine poster di un video viene aggiunta utilizzando l'attributo poster in <video> che suggerisce agli utenti i contenuti del video prima che inizi la riproduzione avviata:

<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 il autoplay. autoplay viene utilizzato quando è necessario riprodurre un video immediatamente, ad esempio quando viene utilizzato come sfondo per un video o come sostituzione per GIF animate.

Le GIF animate possono essere molto grandi, soprattutto se hanno molti frame con intricati dettagli. Non è raro che le GIF animate ne consumino diverse. megabyte di dati, il che può comportare un consumo significativo di larghezza di banda e una spesa maggiore alla ricerca di risorse più critiche. In genere dovresti evitare formati di immagini animate, poiché gli equivalenti di <video> sono molto più efficienti per questo tipo di contenuti multimediali.

Se per il tuo sito web è richiesta la riproduzione automatica dei video, puoi utilizzare Attributo autoplay 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 una volta che si trovano all'interno dell'area visibile. L'immagine poster potrebbe essere un segnaposto per immagini di bassa qualità, come il primo fotogramma del video. Quando il video compare nell'area visibile, il browser inizia scaricare il video. Questo potrebbe migliorare i tempi di caricamento dei contenuti all'interno area visibile iniziale. Lo svantaggio è che, quando utilizzi un'immagine poster per autoplay, gli utenti ricevono un'immagine che viene mostrata solo per brevi momenti finché il video non viene è stato caricato e inizia la riproduzione.

Riproduzione avviata dall'utente

In genere, il browser avvia il download di un file video non appena il codice HTML il parser rileva l'elemento <video>. Se hai elementi <video> in cui l'utente avvia la riproduzione, probabilmente non vorrai scaricare il video fino all'interazione dell'utente.

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

• L'impostazione di preload="none" informa il browser che nessuno dei contenuti del video dovrebbe essere precaricato.
• L'impostazione di preload="metadata" recupera solo i metadati del video, ad esempio i relativi durata ed eventualmente altre informazioni rapide.

L'impostazione di preload="none" è probabilmente la soluzione più adatta durante il caricamento Video per cui gli utenti devono avviare la riproduzione.

In questo caso, puoi migliorare l'esperienza utente aggiungendo un'immagine poster. Ciò fornisce all'utente un po' di contesto sull'argomento del video. Inoltre, se l'immagine poster è l'elemento LCP, puoi aumentare l'poster la priorità utilizzando il suggerimento <link rel="preload"> insieme 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, ha senso trasferire il problema a servizi video dedicati come 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 tipo di effetto perché i video player incorporati spesso possono offrire di risorse, come JavaScript.

Data questa realtà, gli incorporamenti di video di terze parti possono influire notevolmente sulla pagina le prestazioni dei dispositivi. Secondo HTTP Archive, gli incorporamenti di YouTube bloccano il thread principale per più di 1,7 secondi per il sito web mediano. Blocco del thread principale per periodi di tempo prolungati rappresenta un grave problema di esperienza utente che può Interazione con Next Paint (INP). Tuttavia, puoi trovare un compromesso Non caricare immediatamente l'incorporamento durante il caricamento iniziale della pagina. Creare un segnaposto per l'incorporamento che venga sostituito dal video incorporato effettivo quando l'utente interagisce con essi.

Demo video

Verifica le tue conoscenze

A seguire: ottimizzare i caratteri web

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