26/11/2020

WebP e WebM

Migliorare le performance di un sito web per la navigazione mobile

La velocità di caricamento delle pagine è già da molto tempo un elemento cardine per l’ottimizzazione dei siti web e l’indicizzazione sui motori di ricerca.

La velocità è un fattore molto importante anche per l’esperienza di navigazione dell’utente, infatti, più un sito è veloce e più l’utente sarà invogliato a navigare al suo interno. Numerosi studi dimostrano la correlazione tra Bounce Rate (frequenza di rimbalzo, ovvero il tempo che intercorre tra il momento in cui un utente entra in una pagina web e la abbandona uscendo completamente dal sito) e velocità di caricamento della pagina. Tanto più un sito è lento tanto più la frequenza di rimbalzo è elevata e viceversa.

Gli elementi che definiscono le performance di un sito sono numerosi come ad esempio la scrittura di un codice snello secondo gli standard del W3C e il responsive design.

Ci concentriamo però su due elementi che in questo ultimo periodo stanno alzando ulteriormente il livello sulle performance dei siti web in particolare durante la navigazione da mobile dato che il 67% della popolazione mondiale naviga in rete da smartphone.

Analizziamo i formati WebP per le immagini e WebM per i contenuti multimediali video e audio.

WebP è il formato aperto per le immagini sviluppato da Google nel 2010 con lo scopo di velocizzare il caricamento delle pagine web da mobile.

10 anni dopo il suo lancio, sembra ricevere il giusto riconoscimento.

Le immagini in formato WebP, a parità di qualità, risultano in media più piccole del 30% circa rispetto ai classici JPEG e PNG.
I file JPEG in fase di compressione per il web hanno una perdita dei dati (lossy), cosa che non avviene invece per quelli in PNG (lossless). La compressione del formato WebP invece può avvenire con o senza perdita di dati a seconda del metodo che si adotta per comprimerli.
Con una compressione lossless (senza perdita di dati) si ottengono immagini più piccole del 26% rispetto ai PNG. Con una compressione lossy (con perdita di dati) invece le immagini risultano più piccole del 25-34% rispetto al JPEG. Il formato WebP accetta inoltre le trasparenze come per i PNG e anche le animazioni come per le GIF.

Notiamo come il formato WebP sia il 50% più leggero rispetto al classico JPEG

Non tutti i browser al momento lo supportano, pertanto l’adozione di questo formato per le immagini del proprio sito web deve avvenire in modo parallelo ai più comuni JPEG e PNG. Adottarlo in modo esclusivo renderebbe inaccessibili le immagini a quei browser che ancora non lo supportano.
Questo problema si può ovviare con l'opportuno codice HTML. In fase di sviluppo si possono rendere fruibili le immagini in WebP a tutti gli utenti che utilizzano browser che supportano tale formato mentre tutti gli altri continueranno a vederle in JPEG o PNG.

È evidente la potenzialità del WebP e la crescita che avrà nei prossimi anni correlata all’aumento continuo della navigazione da mobile.

WebM è il formato aperto per i file multimediali video e audio sviluppato da On2 Technologies, società che è stata acquisita da Google nel 2010. Il WebM ha lo scopo di velocizzare il caricamento delle pagine che contengono file multimediali non solo da mobile ma da tutti i dispositivi come desktop, tablet e smart TV. È facilmente intuibile il potenziale che questo formato ha in ambito mobile perché segue le logiche del formato WebP analizzato sopra.

WebM è la soluzione Open Source alternativa ad altri formati video, in particolare all'MP4. È stato sviluppata per l'utilizzo con HTML5 e contiene i codec video VP8 e VP9 e i codec audio Vorbis e Opus.

Con l'utilizzo del WebM avviene una compressione del file molto elevata ma la sua decompressione per poterlo vedere in streaming richiede una potenza di calcolo estremamente ridotta.

Ecco un confronto tra un video in formato MP4 e uno in formato WebM:

Come possiamo vedere la qualità è identica eppure le dimensioni del WebM sono ridotte del 20% circa.

In questo modo è possibile anche ridurre la quantità di traffico internet durante la navigazione: quando l'utente guarda un video, questo viene scaricato nei file temporanei del suo dispositivo. Minori sono le dimensioni del file, più velocemente l'utente riuscirà a guardare il video, utilizzando meno dati internet.

Youtube supporta numerosi formati ma, facendo parte del gruppo Google, già dal 2011 ha avviato la conversione di tutti i video all'interno della piattaforma in WebM. Nonostante Youtube sia il secondo sito web più visitato al mondo dopo Google, il WebM però non è ancora molto diffuso e quindi non è supportato da tutti i browser e da tutti dispositivi. Per questo motivo Youtube e la maggiorparte delle applicazioni di streaming supportano più formati ed è il browser stesso che carica il video nel formato compatibile come avviene per le immagini in WebP.

In un'ottica strategica, considerando che la maggiorparte delle aziende si avvale di piattaforme di streaming come appunto Youtube per la promozione dei propri video, risulta particolarmente importante adottare anche questo formato per far fronte al cambiamento tecnologico in atto.

E tu hai considerato i formati WebP e WebM nella tua strategia digitale?

La velocità e la navigazione da dispositivi mobili sono ancora una volta fondamentali per il ranking delle pagine e per offrire la migliore esperienza di navigazione ai tuoi utenti.

Molte aziende si stanno già muovendo in questa direzione perché hanno capito l'importanza sempre maggiore di adottare una strategia mobile.

Il nostro team è pronto ad affiancarti in questo percorso strategico e di cambiamento!