In questo codelab, migliora le prestazioni sostituendo una GIF animata con un video.
Prima la misurazione
Innanzitutto, misura le prestazioni del sito web:
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
- Fai clic sul pulsante Genera report.
Al termine, dovresti vedere che Lighthouse ha segnalato la GIF come problema nel controllo "Utilizza formati video per contenuti animati".
Ottieni FFmpeg
Esistono diversi modi per convertire le GIF in video; questa guida utilizza FFmpeg. È già installato nella VM Glitch e, se vuoi, puoi seguire queste istruzioni per installarlo sulla tua macchina locale.
Apri la console
Verifica che FFmpeg sia installato e funzionante:
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potrebbe essere necessario utilizzare l'opzione Schermo intero).
- Nella console, esegui:
which ffmpeg
Dovresti visualizzare il percorso del file:
/usr/bin/ffmpeg
Converti GIF in video
- Nella console, esegui
cd images
per accedere alla directory delle immagini. - Esegui
ls
per vederne il contenuto.
Il risultato dovrebbe essere simile a questo:
$ ls
cat-herd.gif
- Nella console, esegui:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
Questo indica a FFmpeg di prendere l'input, rappresentato dal flag -i
, di
cat-herd.gif e di convertirlo in un video chiamato cat-herd.mp4. L'esecuzione dovrebbe richiedere
un secondo. Al termine del comando, dovresti essere in grado di digitare di nuovo ls
e visualizzare due file:
$ ls
cat-herd.gif cat-herd.mp4
Crea video WebM
Sebbene il formato MP4 sia disponibile dal 1999, WebM è una novità relativa, uscita
inizialmente nel 2010. I video WebM possono essere molto più piccoli
rispetto ai video MP4, quindi ha senso generarli entrambi. Per fortuna, l'elemento <video>
ti consente di
aggiungere più origini. Se un browser non supporta WebM, può usare il formato MP4
di riserva.
- Nella console, esegui:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- Per verificare le dimensioni dei file eseguite:
ls -lh
Dovresti avere una GIF e due video:
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
Tieni presente che la GIF originale è di 3, 7 MB, mentre la versione MP4 è da 551 kB e la versione WebM è solo 341 kB. Un risparmio enorme!
Aggiorna il codice HTML per ricreare l'effetto GIF
Le GIF animate hanno tre caratteristiche chiave che i video devono 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>
.
- Nel file
index.html
, sostituisci la riga con<img>
con:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Un elemento <video>
che utilizza questi attributi viene riprodotto automaticamente, in loop
all'infinito, senza audio e in linea (ovvero non a schermo intero), tutti
i comportamenti previsti dalle GIF animate. 🎉
Specifica le tue origini
Non ti resta che specificare le origini video. L'elemento <video>
richiede uno o più elementi secondari <source>
che puntino a file video diversi tra cui il browser può scegliere, a seconda del formato supportato.
Aggiorna il campo <video>
con gli elementi <source>
che rimandano ai video del mandria di gatti:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Anteprima
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
L'esperienza dovrebbe essere la stessa. Stai andando bene.
Verifica con Lighthouse
Con il sito pubblicato aperto:
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
- Fai clic sul pulsante Genera report.
Dovresti notare che il controllo "Utilizza formati video per i contenuti animati" è stato superato. Bene! 💪