Categorie

Ottimizzazione della velocità della pagina: Ottenere immagini più veloci nel caricamento parte 1 - WebP

La velocità della pagina è una componente cruciale per un sito web. Puoi aumentare la velocità del tuo sito facendo una serie di modifiche di ottimizzazione della velocità della pagina. Una di queste è l'ottimizzazione delle immagini.

Google ha confermato che la velocità della pagina è un fattore di ranking e la velocità di un sito può influenzare il rank. La SIA ha testato questa affermazione per controllare e confermare che cosa considera esattamente Google quando si tratta di velocità della pagina - è il tempo di caricamento della pagina, il tempo al primo byte, o la prima vernice di contenuto? Abbiamo scoperto che mentre il tempo di caricamento della pagina o il tempo che una pagina impiega per caricarsi completamente non è un fattore di ranking, il tempo al primo byte potrebbe esserlo. E da questo, è meglio mantenere il vostro TTFB piccolo.

A parte la dichiarazione di Google sul fatto che è un fattore di ranking, la velocità della pagina è anche un fattore di esperienza dell'utente. Gli utenti che visitano un sito che si carica lentamente, il più delle volte, lasciano la pagina. Questo può portare ad un aumento della frequenza di rimbalzo e influenzare i tassi di conversione.

visitatori del sito web felici

Come potete vedere, la velocità della pagina è un fattore importante di un sito e ottimizzare la velocità della pagina del vostro sito in modo che si carichi velocemente soddisfa non solo Google, ma anche i visitatori della vostra pagina. Ci sono un sacco di regolazioni di ottimizzazione della velocità della pagina che puoi fare per migliorare la velocità del tuo sito. Una di queste è l'ottimizzazione delle immagini.

Le immagini sono spesso il file più grande di una pagina web ed è spesso uno dei fattori principali che rallenta la velocità di un sito. Ottimizzare le immagini in modo che le dimensioni dei file non siano molto grandi, pur fornendo immagini di qualità, è un fattore importante da considerare.

In uno dei nostri test nel SIA, abbiamo testato se Google ha una preferenza per le immagini JPG o PNG e abbiamo scoperto che mentre non c'è una particolare preferenza tra i due, si riduce alla velocità della pagina. Nei test, Clint ha discusso le sue intuizioni sui formati di immagine e la velocità della pagina, e ha introdotto due tipi di file immagine di nuova generazione che caricano più velocemente rispetto a JPG e PNG. Questi sono WebP e AVIF.

Mentre questi due tipi non sono esattamente nuovi, non sono così popolari come JPG e PNG e sono spesso trascurati. Questo mi ha fatto pensare di scrivere su questi due tipi di immagini, per discutere ulteriormente entrambi i formati - cosa sono questi tipi di file immagine, i loro benefici e svantaggi, e come potresti applicarli alle tue pagine.

Nella parte 1 di questo articolo, ci concentreremo su WebP. Cos'è WebP? Dovresti passare le tue immagini a WebP? Se sì, come applicarlo al tuo sito?

Cos'è WebP?

cos'è il webp

WebP non è in realtà un nuovo formato di immagine. È stato sviluppato da Google nel 2010 ed è stato progettato per utilizzare un algoritmo di compressione più ottimizzato rispetto agli altri formati di immagine più comuni.

WebP è un formato immagine che fornisce una compressione lossless e lossy superiore delle immagini. Rispetto a JPG, GIF e PNG, WebP riduce significativamente le dimensioni dei file, pur mantenendo la qualità dell'immagine.

In precedenza, era una decisione tra la dimensione del file e la qualità dell'immagine. L'introduzione di WebP ha risolto questo problema con le sue dimensioni di file inferiori e l'alta qualità delle immagini.

Puoi convertire quasi tutti i formati di immagine in WebP e vedrai quasi la stessa qualità dell'immagine come quella dell'originale JPG, PNG, o altro formato. Tuttavia, la dimensione del file è molto più piccola - tra il 20-40 per cento più piccola.

WebP prima non era supportato da Internet Explorer e Safari, ma al momento della scrittura (settembre 2021), oltre 94% dei browser web supportano WebP. Un sacco di siti web oggi usano WebP per le loro immagini a causa della sua velocità di caricamento più veloce. Non saresti in grado di riconoscere alcuna differenza nel tipo di file.

Le miniature di Youtube visualizzate in Chrome sono in WebP e anche Facebook usa questo formato sui dispositivi Android.

browser web moomba

Un altro vantaggio di WebP, a parte la sua compressione superiore, è che supporta sfondi trasparenti simili a quelli di PNG. Supporta anche transizioni e animazioni, molto simili a quelle di GIF, pur essendo di dimensioni più piccole e di qualità simile.

Come applicare WebP al tuo sito web

fare modifiche al sito moomba

Sei convinto dei vantaggi offerti da WebP e stai cercando di aggiornare le tue immagini a questo formato? Ti stai chiedendo come applicarlo al tuo sito?

Ci sono strumenti e plugin che puoi usare per convertire le tue immagini JPG, PNG o altre in WebP.

Per gli strumenti online, puoi usare Squoosh e Online-convert.com. Tutto quello che devi fare è caricare le tue immagini JPG o PNG, poi convertirle in WebP.

In precedenza, Photoshop non supportava WebP. Tuttavia, è stato reso disponibile un plugin WebP per Photoshop che potete installare e che vi permette di essere in grado di salvare le vostre immagini in questo formato.

Se sei su WordPress, a partire da WordPress 5.8, WebP è supportato e puoi caricare le tue immagini nella tua libreria media direttamente, come faresti con le immagini JPG, PNG e GIF. Non c'è bisogno di installare plugin di terze parti per far funzionare il formato immagine.

Se non sei su WordPress 5.8+ o se sei preoccupato di non servire le immagini WebP per i visitatori che utilizzano browser non supportati, allora la tua migliore opzione sarebbe quella di andare per un plugin.

Con un plugin, le vostre immagini JPG o PNG sono convertite in WebP quando il visitatore usa un browser supportato. Se il browser del visitatore non supporta WebP, allora viene servita l'immagine JPG o PNG. In questo modo, hai la garanzia che tutti possano vedere le tue immagini e quelli che sono su browser supportati possono vedere le tue pagine velocemente!

I plugin che potete usare per questo scopo sono ShortPixel, Imagify e Optimole, tra gli altri.

Se state cercando di accelerare la velocità del vostro sito, WebP è sicuramente una grande opzione da scegliere. Ai tuoi visitatori viene servita la stessa esperienza quando si usa un'immagine JPG o PNG, mentre si carica tutto più velocemente. Infatti, PageSpeed Insights raccomanda di servire le tue immagini in WebP, per aiutare a velocizzare il tuo sito.

È un fattore di ranking, vi chiederete? Questo è qualcosa che non abbiamo testato nel SIA, ma che aggiungeremo alla nostra lista di cose da testare.

Tuttavia, fattore di ranking o no, vi fornisce il vantaggio di avere pagine più veloci nel caricamento che possono aiutare a rendere felici sia Google che i vostri visitatori. Vincono tutti!

Nella seconda parte di questo articolo, parleremo del formato immagine AVIF, che è più veloce di WebP. Dovresti scegliere AVIF o WebP è sufficiente? Discutiamo tutto questo in parte 2 dell'articolo.

Marie Aquino

SIA STAFF SEO WRITER

Marie's biografia completa qui.