Rendimento del video

Nel modulo precedente hai imparato alcune tecniche per le prestazioni delle immagini, che sono un tipo di risorsa ampiamente usato sul web che possono consumare una notevole larghezza di banda se non viene presa cura di ottimizzarle e prendere in considerazione l'area visibile dell'utente.

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

File sorgente video

Quando lavori con file multimediali, il file riconosciuto sul tuo sistema operativo (.mp4, .webm e altri) viene 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, video.webm può 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é consente di comprimere i file multimediali utilizzando una larghezza di banda notevolmente inferiore, il che comporta una riduzione dei tempi di caricamento complessivi della pagina, oltre a un potenziale miglioramento della Largest Contentful Paint (LCP) di una pagina, che è una metrica incentrata sull'utente e uno dei tre Segnali web essenziali.

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

ffmpeg -i input.mov output.webm

Il comando precedente, anche se molto semplice come 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 compatibile con tutti i browser moderni. Modificando il video o le opzioni audio offerte da FFmpeg potresti 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 apportare ulteriori modifiche, FFmpeg offre il flag -crf durante la compressione dei video senza utilizzare la codifica con velocità in bit variabile. -crf sta per Constant Rate Factor. Questa è 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 in uso. Per saperne di più, consulta il fattore di frequenza costante per la codifica dei video in H.264 e la qualità costante durante la codifica dei video in VP9.

Diversi formati

Quando si lavora con file video, la specifica di più formati funziona come metodo alternativo 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 riserva per i browser precedenti. La versione WebM può utilizzare il più recente codec AV1, che non è ancora così ampiamente supportato, oppure il precedente codec VP9, che è meglio supportato rispetto ad AV1, ma in genere non si comprime bene come AV1.

Attributo poster

L'immagine poster di un video viene aggiunta utilizzando l'attributo poster nell'elemento <video>, che suggerisce agli utenti quali potrebbero essere i contenuti video prima di avviare la 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'attributo autoplay. autoplay viene utilizzato quando un video deve essere riprodotto immediatamente, ad esempio quando viene utilizzato come sfondo del video o come sostituzione di GIF animate.

Le GIF animate possono essere molto grandi, soprattutto se hanno molti frame con dettagli intricati. Non è raro che le GIF animate consumino diversi megabyte di dati, il che può comportare un consumo eccessivo della larghezza di banda spesa per risorse più critiche. In genere dovresti evitare i formati delle immagini animate, perché 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 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 Observationr, puoi configurare la pagina in modo che scarica i video solo una volta che si trovano nell'area visibile. L'immagine poster potrebbe essere un segnaposto di immagine di bassa qualità, come il primo frame del video. Quando il video appare nell'area visibile, il browser inizia a scaricarlo. Ciò potrebbe migliorare i tempi di caricamento dei contenuti all'interno dell'area visibile iniziale. Svantaggio che, quando utilizzi un'immagine poster per autoplay, gli utenti ricevono un'immagine che viene mostrata solo per un breve momento fino al caricamento del video e all'avvio della riproduzione.

Riproduzione avviata dall'utente

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

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

• 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 del video e possibilmente altre informazioni rapide.

L'impostazione preload="none" è probabilmente il caso più adatto se stai caricando video per i quali gli utenti devono avviare la riproduzione.

In questo caso, puoi migliorare l'esperienza utente aggiungendo un'immagine poster. Ciò fornisce all'utente informazioni aggiuntive sull'argomento del video. Inoltre, se l'immagine poster è il tuo 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à nell'ottimizzare e pubblicare in modo efficiente i contenuti video, ha senso trasferire il problema a servizi video dedicati come YouTube o Vimeo. Questi servizi ottimizzano la pubblicazione dei video al posto tuo, ma l'incorporamento di un video da un servizio di terze parti può avere un proprio effetto sulle prestazioni, dato che i video player incorporati spesso possono offrire molte risorse aggiuntive, ad esempio JavaScript.

Alla luce di questi dati, gli incorporamenti di video di terze parti possono influire notevolmente sul rendimento delle pagine. Secondo l'archivio HTTP, gli incorporamenti di YouTube bloccano il thread principale per più di 1,7 secondi per il sito web medio. Bloccare il thread principale per lunghi periodi di tempo rappresenta un grave problema dell'esperienza utente e può influire sull'interazione con la pagina successiva (INP). Tuttavia, puoi segnalare una compromissione non caricando immediatamente l'incorporamento durante il caricamento iniziale della pagina, ma creando invece un segnaposto per l'incorporamento che viene sostituito dall'incorporamento effettivo del video quando l'utente interagisce con quest'ultimo.

Video dimostrativi

verifica le tue conoscenze

A seguire: ottimizzare i caratteri web

L'altro aspetto della nostra copertura sull'ottimizzazione di tipi di risorse specifici sono i caratteri. L'ottimizzazione dei caratteri del sito web spesso viene 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).