Google si trova in cima alla catena alimentare nel web. La compagnia influenza (o impone) molto di ciò che accade online e il loro nuovo formato di immagine, WebP, continua questa tendenza.
Con la velocità di caricamento delle pagine sempre più importante (principalmente a causa del Page Rank di Google), gli sviluppatori e i progettisti considerano la compressione delle immagini come il modo più semplice per ridurre i tempi di caricamento. Le immagini WebP di Google sono inferiori di circa il 30% rispetto alle tipiche immagini JPG o PNG e mantengono una qualità equivalente.
E soprattutto, non devi preoccuparti di convertire manualmente le tue immagini in WebP.
In questo articolo ti mostreremo come utilizzare questo nuovo formato di immagine con WordPress anche se non è ancora supportato per impostazione predefinita.
Utilizzo di Optimole per servire immagini WebP su WordPress
WebP, come formato immagine, non è supportato per impostazione predefinita in WordPress. Puoi caricare un’immagine .webp, ma come succede con i file SVG riceverai un messaggio di errore.
C’è però una soluzione semplice tramite plugin per risolvere il problema.
Dei servizi WebP che abbiamo provato, il nostro preferito è Optimole. Abbiamo avuto la fortuna di farlo funzionare con il minimo sforzo, quindi vogliamo guidarti alla sua configurazione per rendere la tua installazione WordPress compatibile con il formato WebP nel modo più indolore possibile.
Dovrai innanzitutto scaricare e installare il plug-in stesso. Lo trovi sul repository di WordPress ed è totalmente gratuito come lo è (fino a un certo punto) il servizio basato su API che lo alimenta.
Sebbene sia possibile convertire al volo le immagini tradizionali in WebP utilizzando PHP, non tutti gli host web forniscono tale autorizzazione al server. Se disponi di tale autorizzazione nel tuo host web, puoi dare un occhio il plug-in WebP Express con il quale hai più controllo ma che richiede più modifiche per funzionare senza problemi.
Dopo aver installato e attivato Optimole sul tuo sito web WordPress, troverai una nuova opzione di menu in Media – Optimole .
Leggi anche: Ottimizzazione delle immagini in WordPress – 6 suggerimenti utili per velocizzare il tuo sito
La tua chiave API Optimole
Prima di poter accedere a qualsiasi impostazione o configurazione, è necessario disporre di un account Optimole. Se ne hai già impostato uno, puoi fare clic sul pulsante Ho già una chiave API . In caso contrario, registrati e inserisci la chiave API .
L’account di base per una chiave API è gratuito fino a circa 5.000 visite. Se hai bisogno di qualcosa di più, ci sono disponobili altri livelli di prezzi.
Optimole definisce una visita come “chiunque visiti il tuo sito una volta [. . .] Ogni utente viene conteggiato una sola volta. Non importa cosa fa sul tuo sito, quante immagini scarica o quante pagine visita; è solo un utente. Se lascia il tuo sito e ritorna nello stesso giorno, rimane comunque un solo utente.”
Una volta esaurite le visite a disposizione, verranno interrotte solo le immagini WebP. Le tue immagini ovviamente no. Troverai la chiave API nella dashboard di Optimole in alto.
Basta incollarlo nuovamente sul pannello di WordPress e sarai pronto per iniziare a pubblicare immagini WebP con WordPress.
La dashboard WordPress di Optimole
Nella dashboard di WordPress, Optimole ti dà alcune informazioni di base sull’ottimizzazione WebP. Ciò consente di risolvere i problemi e valutare il successo effettivo dell’accelerazione. In questo modo puoi entrare e modificare varie impostazioni.
Innanzitutto, viene visualizzato l’account collegato all’API e, nella parte inferiore dello schermo, il plug-in visualizza le immagini ottimizzate più recenti. Puoi vedere quanto sono più piccole le immagini WebP che sono state pubblicate in confronto a quelle originali che hai caricato su WordPress.
Quindi c’è la scheda Possibili problemi. A nessuno piace vedere la scheda evidenziata, ma dobbiamo anche vedere anche quali conflitti potrebbero sorgere.
Il problema principale che abbiamo riscontrato è con altri plugin di compressione delle immagini. Come puoi vedere nell’immagine sopra, il plug-in Jetpack funziona in modo simile a Optimole tramite Photon APIT e i due plugin vanno in conflitto. In questo caso e con questo errore nessuna immagine viene consegnata al visitatore.
Non abbiamo avuto problemi con altri servizi di compressione come TinyPNG o Smush.
Utilizzo delle dashboard
Se desideri informazioni più dettagliate su cosa sta facendo il tuo sito con WebP, la dashboard esterna di Optimole ti fornisce queste informazioni.
Puoi vedere le dimensioni effettive dei file che sono stati serviti e tutti i file stessi per un periodo di 30 giorni.
Puoi anche impostare un watermark nella dashboard di Optimole (o di WordPress) in modo che quando qualcuno visualizza un’immagine WebP sul tuo sito WordPress, il tuo logo comparirà automaticamente. È un processo semplice e hai il controllo su opacità, posizione e così via.
In sostanza, puoi fare le stesse cose da entrambe le dashboard. O nella scheda Impostazioni in WordPress o visitando la dashboard esterna al sito su Optimole. Dipende solo da come ti senti più a tuo agio e dal livello di dati di cui hai bisogno in un determinato momento.
Sarai inoltren in grado di controllare il livello di compressione, il lazy loading e quando / se determinate immagini vengono offerte come WebP in base ai nomi dei file. Troverai tutto ciò nella scheda Settings in Media -> Optimole .
Conclusioni
La cosa migliore dell’utilizzo di WebP con i siti web WordPress è che non è necessario lavorare manualmente con i file. Nessun upload extra, nessun tempo di compressione extra, niente. Per il modo in cui funzionano le API, tutti i calcoli e i processi vengono eseguiti al volo in tempo reale.
Google ha davvero reso Internet più veloce utilizzando WebP anziché JPG o PNG. Il vantaggio più grande, tuttavia, è che le immagini mantengono la stessa qualità anche con dimensioni ridotte in modo significativo. Potrebbe essere egoistico da parte di Google farti utilizzare il suo formato per accelerare il tuo sito per posizionarti meglio ma tutto ciò migliora anche l’esperienza dell’utente finale.
Ed è quello che conta alla fine.
