Come utilizzare i file WebP in WordPress e ridurre i tempi di caricamento della pagina

file webp wordpress

La maggior parte di noi sa ormai che l’ottimizzazione delle immagini è molto importante in quanto svolge un ruolo importante nei tempi di caricamento totali del tuo sito Web WordPress. Oggi vogliamo condividere con te una semplice alternativa su come integrare i file WebP di Google nel tuo sito WordPress. Alcuni utenti hanno riscontrato riduzioni delle dimensioni dei file di immagine di oltre il 70%!


Cos’è WebP?

Se non hai familiarità WebP, si tratta di un formato di file immagine creato dal team delle prestazioni web di Google con l’intento di creare immagini più piccole e più veloci. È stato annunciato per la prima volta nel 2010 e presenta metodi di compressione sia lossy che lossless. Le immagini vengono recapitate al browser Web da un server Web basato sul tipo MIME che utilizza image / WebP.

Le immagini senza perdita di WebP sono 26% più piccolo in termini di dimensioni rispetto ai PNG e alle immagini con perdita di WebP 25-34% più piccolo rispetto ai JPEG.

Aziende come YouTube ed eBay stanno già utilizzando WebP per alimentare silenziosamente molti dei loro siti. Di seguito è riportato un esempio di eBay, dove sulla loro homepage hanno una media di circa 30 file WebP.

utilizzo webp ebay

Perché WebP è così importante? Secondo httparchive, a partire da agosto 2016, le immagini rappresentano oltre il 64% del peso medio di una pagina web. In genere è più che combinato CSS, JS e HTML. Pertanto, scegliere un metodo di ottimizzazione dell’immagine e un formato immagine affidabili come WebP è fondamentale in modo da poter ridurre il peso della pagina il più possibile. In genere, più piccola è la tua pagina, più veloce verrà caricata. E ciò soddisferà non solo i tuoi visitatori, ma anche Google, come la velocità della pagina è un fattore di classificazione.

Supporto WebP

Ora, sebbene WebP sia molto interessante, è anche importante menzionare il supporto del browser. Al momento non tutti i browser moderni supportano WebP. Secondo posso usare, WebP è attualmente supportato in Chrome 23+, Opera 39+, tutte le versioni di Opera mini, browser Android 4.3+ e Chrome per Android.

supporto browser webp

Ma aspetta! Non essere troppo deluso, perché nel tutorial ti mostreremo di seguito, c’è un metodo per consegnare i file WebP ai browser supportati e ai file JPG / PNG come fallback. Ciò significa che i browser non supportati non vedranno un’immagine spezzata, vedranno solo quello che stavano vedendo prima. Pensa a WebP come un’aggiunta al tuo sito WordPress, piuttosto che una migrazione.

Secondo W3Schools, Chrome detiene il monopolio della quota di mercato del browser di poco più del 70%. Ma non prendere semplicemente la quota di mercato come prova solida, guarda i dati dei tuoi visitatori e vedi quali browser stanno usando, poiché potrebbero differire in base alla tua nicchia. Potresti essere sorpreso da quanto siano distorte le statistiche. In Google Analytics in “Pubblico” puoi fare clic su “Browser e sistema operativo” e vedere quali browser le persone utilizzano quando accedono al tuo sito. Abbiamo creato un sito Web casuale e come puoi vedere di seguito, il 67% dei visitatori proviene da Chrome e un altro 1% da Opera. Così Il 68% di queste persone può visualizzare e beneficiare del WebP formato file immagine!

browser chrome webp

Come utilizzare i file WebP in WordPress

Nell’esempio odierno useremo una combinazione di due diversi plugin di WordPress per far funzionare WebP in WordPress. Questi vengono creati e sviluppati dal team di KeyCDN, che è una rete globale di distribuzione di contenuti (CDN).

  1. [Premio] Optimus Image Optimizer: Plugin di compressione delle immagini senza perdita di dati per WordPress, converte le immagini in WebP
  2. [gratuito] Enabler della cache di WordPress: Plugin di memorizzazione nella cache quale ti consente di servire WebP ai browser supportati

Optimus Image Optimizer

Puoi scaricare Optimus Image Optimizer dal Repository di WordPress, a partire dal optimus.io, o dalla dashboard del plug-in. Nota: richiede una licenza premium se si desidera convertire le immagini in WebP. Una volta installato è possibile abilitare la “Creazione di file WebP” nelle impostazioni del plugin.

creazione di file webp

Dopo aver abilitato WebP, questo crea essenzialmente un’immagine aggiuntiva per tutto ciò che viene convertito. Quindi, se carichi un file PNG o JPG, ora esiste anche una versione .webp della tua immagine. Ricorda, il PNG / JPG è ancora necessario perché questi vengono ancora utilizzati per i browser non supportati. Optimus esegue una compressione senza perdita, quindi anche i tuoi PNG e JPG sono compressi.

file webp e png

C’è anche un’opzione di ottimizzazione di massa nel caso in cui tu abbia già compresso le tue immagini in precedenza e debba comunque convertirle in WebP.

ottimizzatore di immagini di massa

Enabler della cache di WordPress

Quindi ora che hai immagini WebP, hai bisogno di un modo per dire a WordPress di offrire immagini WebP ai browser supportati e PNG / JPG agli altri browser. Ciò può essere realizzato con il plug-in Enabler cache di WordPress gratuito. Puoi scaricare il plugin dal Repository di WordPress oppure installalo dalla dashboard del plug-in. Una volta installato è possibile abilitare “Crea una versione cache WebP aggiuntiva” nelle impostazioni del plug-in.

impostazioni di abilitazione cache

Dopo aver abilitato tale opzione, viene creata una versione WebP aggiuntiva della pagina.versioni webp

E questo è tutto! Ora dovresti avere file WebP in esecuzione sul tuo sito Web WordPress.

Confronto da JPG a WebP

Abbiamo eseguito un confronto di JPG a WebP per mostrare le differenze che puoi ottenere.

NOME DEL FILEORIGINALE JPGCOMPRESSA JPGFORMATO WEBPDIFFERENZA FORMATO%
jpg-to-WebP-1.jpg758 KB685 KB109 KB86%
jpg-to-WebP-2.jpg599 KB529 KB58.8 KB90%
jpg-to-WebP-3.jpg960 KB881 KB200 KB79%
jpg-to-WebP-4.jpg862 KB791 KB146 KB83%
jpg-to-WebP-5.jpg960 KB877 KB71,7 KB93%

WebP ha portato a Riduzione dell’85,87% delle dimensioni medie dell’immagine.

Confronto da PNG a WebP

Ancora una volta, abbiamo anche eseguito un confronto di PNG a WebP per mostrare le differenze che puoi ottenere.

Nome del filePNG originalecompressa PNGFormato WebPDifferenza dimensionale%
png-to-WebP-1.png44 KB34 KB30 KB32%
png-to-WebP-2.png46 KB35 KB33 KB28%
png-to-WebP-3.png43 KB31 KB25 KB42%
png-to-WebP-4.png30 KB24 KB18 KB40%
png-to-WebP-5.png15 KB11 KB8 KB47%
png-to-WebP-6.png34 KB24 KB18 KB47%
png-to-WebP-7.png15 KB13 KB8 KB47%
png-to-WebP-8.png63 KB47 KB44 KB30%
png-to-WebP-9.png48 KB36 KB33 KB31%
png-to-WebP-10.png17 KB14 KB11 KB35%
png-to-WebP-11.png18 KB13 KB9 KB50%
png-to-WebP-12.png61 KB45 KB39 KB36%
png-to-WebP-13.png32 KB25 KB21 KB35%
png-to-WebP-14.png26 KB21 KB17 KB35%
png-to-WebP-15.png14 KB12 KB9 KB36%
png-to-WebP-16.png36 KB27 KB24 KB33%
png-to-WebP-17.png14 KB12 KB8 KB43%
png-to-WebP-18.png21 KB18 KB13 KB38%
png-to-WebP-19.png42 KB30 KB27 KB36%
png-to-WebP-20.png23 KB20 KB18 KB22%

WebP ha portato a Riduzione del 42,8% delle dimensioni medie dell’immagine.

Sommario

Come puoi vedere, WebP è molto facile da implementare sul tuo sito WordPress e puoi ottenere file di immagini drasticamente più piccoli! Non esiste alcuna compressione dell’immagine che possa essere paragonata ai risparmi di WebP. Oh, e abbiamo detto che WebP ha la capacità di usare la compressione senza perdita? Ciò significa che non vedrai alcuna perdita di qualità evidente. Se stai cercando un modo migliore per accelerare WordPress, WebP può essere un’ottima soluzione.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map