Sostituisci le GIF animate con video per velocizzare i caricamenti delle pagine

Hai mai visto una GIF animata su un servizio come Imgur o Gfycat, l'hai ispezionata nei tuoi strumenti di sviluppo per poi scoprire che la GIF era in realtà un video? C'è un buon motivo. Le GIF animate possono essere molto grandi.

Riquadro di rete DevTools con una GIF da 13,7 MB.

Fortunatamente, questa è una di quelle aree delle prestazioni di caricamento in cui puoi fare poco lavoro per ottenere enormi guadagni. Convertindo le GIF di grandi dimensioni in video, puoi risparmiare notevolmente sulla larghezza di banda degli utenti.

Prima la misurazione

Utilizza Lighthouse per verificare la presenza sul tuo sito di GIF che possono essere convertite in video. In DevTools, fai clic sulla scheda Controlli e seleziona la casella di controllo Prestazioni. Poi esegui Lighthouse e controlla il report. Se hai GIF che possono essere convertite, dovresti vedere il suggerimento "Utilizza formati video per contenuti animati":

Se il controllo Lighthouse ha avuto esito negativo, utilizza i formati video per i contenuti animati.

Crea video MPEG

Esistono diversi modi per convertire le GIF in video. Lo strumento utilizzato in questa guida è FFmpeg. Per utilizzare FFmpeg per convertire la GIF, my-animation.gif in un video MP4, esegui questo comando nella console:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Questo indica a FFmpeg di prendere my-animation.gif come input, indicato dal flag -i, e di convertirlo in un video chiamato my-animation.mp4.

Il codificatore libx264 funziona solo con file che hanno dimensioni pari, ad esempio 320 x 240 px. Se la GIF di input ha dimensioni dispari, puoi includere un filtro di ritaglio per evitare che FFmpeg generi un errore di tipo "altezza/larghezza non divisibile per 2":

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Crea video WebM

Sebbene MP4 sia disponibile dal 1999, WebM è un formato file relativamente nuovo pubblicato inizialmente nel 2010. I video WebM sono molto più piccoli dei video MP4, ma non tutti i browser supportano WebM, quindi ha senso generarli entrambi.

Per utilizzare FFmpeg per convertire my-animation.gif in un video WebM, esegui questo comando nella console:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Confrontare la differenza

Il risparmio sui costi tra una GIF e un video può essere piuttosto significativo.

Confronto dimensioni file che mostra 3,7 MB per il gif, 551 KB per il mp4 e 341 KB per il webm.

In questo esempio, la GIF iniziale è di 3, 7 MB, rispetto alla versione MP4, che è pari a 551 kB, e alla versione WebM di soli 341 kB.

Sostituisci l'immagine GIF con un video

Le GIF animate hanno tre caratteristiche chiave che un video deve replicare:

  • Vengono riprodotti automaticamente.
  • Riproducono in loop in modo continuo (di solito, ma è possibile evitarli).
  • Sono in silenzio.

Fortunatamente, puoi ricreare questi comportamenti utilizzando l'elemento <video>.

<video autoplay loop muted playsinline></video>

Un elemento <video> con questi attributi viene riprodotto automaticamente, viene riprodotto all'infinito, non riproduce l'audio e viene riprodotto in linea (ovvero non a schermo intero), con tutti i comportamenti caratteristici che ci si aspetta dalle GIF animate. 🎉

Infine, l'elemento <video> richiede uno o più elementi secondari <source> che puntino a diversi file video tra cui il browser può scegliere, a seconda del supporto dei formati del browser. Fornisci sia WebM che MP4 in modo che se un browser non supporta WebM, possa tornare a MP4.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

Effetto sulla Largest Contentful Paint (LCP)

Tieni presente che sebbene gli elementi <img> siano candidati per LCP, gli elementi <video> senza un'immagine poster non sono candidati per LCP. La soluzione nel caso di emulazione di GIF animate non è aggiungere l'attributo poster agli elementi <video>, perché quell'immagine non verrà utilizzata.

Cosa cambia per il tuo sito web? È consigliabile utilizzare un elemento <video> anziché una GIF animata, tenendo presente che questi contenuti multimediali non saranno candidati per l'LCP e verrà utilizzato il secondo candidato più importante. Poiché le GIF e i <video> sono in genere più grandi e molto più lenti da scaricare, passare a un altro candidato LCP migliorerà probabilmente l'LCP del sito.