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
L'ordine degli elementi <source>
all'interno di un
L'elemento <video>
principale non determina
quale risorsa video viene scaricata alla fine.
Attributo poster
dell'elemento <video>
è considerato un candidato LCP.
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).