TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come servire immagini WebP in SiteGround?

99

SiteGround è una delle società di hosting consigliate da WordPress.org ufficiale. Negli ultimi anni, l’ hosting di SiteGround è cresciuto a un livello diverso. Hanno sostituito la tradizionale configurazione cPanel e hanno migrato tutti gli account esistenti nella loro configurazione personalizzata di Strumenti del sito. Con questo puoi servire immagini WebP invece di PNG o JPEG per aumentare la velocità di caricamento del tuo sito web. In questo articolo, spiegheremo come servire immagini WebP in SiteGround e controllare nel browser.

Correlati: come utilizzare WebP in WordPress per correggere le immagini di servizio negli errori dei formati di nuova generazione nello strumento di approfondimento di Google PageSpeed?



Perché le immagini WebP?

Ogni volta che controlli il punteggio della velocità della pagina nello strumento Google PageSpeed ​​Insights, ti mostrerà molte opportunità che possono migliorare la velocità del sito. Uno dei suggerimenti importanti che non puoi risolvere facilmente è "Pubblica immagini nei formati di nuova generazione". I formati di nuova generazione includono WebP, JPEG 2000 o JPEG XR per sostituire i tradizionali formati di immagine di PNG e JPEG.

Come servire immagini WebP in SiteGround?

Servire immagini in formati di nuova generazione

Pertanto, servire l’immagine WebP ti aiuterà a risolvere il problema di Google PageSpeed ​​Insights. Inoltre, riduce la dimensione dell’immagine a più del 75% in meno a parità di qualità, migliorando così la velocità di caricamento della pagina.

Come funziona con SiteGround?

SiteGround offre il plug-in SG Optimizer che ti consente di abilitare la conversione di tutte le tue immagini in formato WebP. La parte buona è che non hai bisogno di nessun’altra configurazione.

  • Tutte le immagini WebP sono archiviate sul lato server e non puoi visualizzarle nella tua libreria multimediale o utilizzando FTP.
  • È possibile verificare se le immagini WebP vengono caricate durante la visualizzazione del sito nel browser.
  • Devi attivare WebP per singolo sito sul tuo account di hosting.

Come servire immagini WebP in SiteGround?

Se non stai usando SG Optimizer, devi prima installare il plugin.

  • Accedi al tuo sito WordPress e vai alla sezione "Plugin > Aggiungi nuovo".
  • Cerca "SG Optimizer" per trovare il plugin.
  • Installa e attiva il plugin sul tuo sito.

Come servire immagini WebP in SiteGround?

Installa il plugin SG Optimizer

Dopo aver installato SG Optimizer, vai al menu "SG Optimizer" e poi alla sezione "Media Optimizer". Qui hai le opzioni per abilitare le immagini WebP sul tuo sito.

Ricorda, se stai già utilizzando dei plug-in di memorizzazione nella cache, non dovresti abilitare altre opzioni nel plug- in SG Optimizer. Assicurati di non abilitare le stesse opzioni in due plugin e di non rompere il sito.

Abilita WebP per nuove immagini

Abilitare prima l’opzione "Genera copie WebP di nuove immagini". Scegli il tipo di ottimizzazione per scegliere la qualità delle tue immagini WebP. L’opzione lossless ti aiuta a mantenere la qualità e l’opzione lossy riduce le dimensioni a un livello molto più basso riducendo la qualità dell’immagine.

Come servire immagini WebP in SiteGround?

Genera immagini WebP in SiteGround

Ti consigliamo di selezionare lossless per mantenere la qualità con una riduzione nominale delle dimensioni. Tuttavia, se hai immagini più grandi sul tuo sito e la riduzione della qualità è accettabile per te, scegli l’opzione con perdita di dati. Per l’opzione con perdita, puoi selezionare la percentuale di qualità trascinando il cursore.

Come servire immagini WebP in SiteGround?

Genera WebP con perdita in SiteGround

Carica una nuova immagine e controlla la qualità di alcune immagini sul browser (vedi la sezione seguente per questo) prima di elaborare in blocco tutte le immagini esistenti.

Generazione in blocco di file WebP

Una volta che hai deciso e impostato la qualità, fai clic sul pulsante "Genera file WebP in blocco". Questo rigenererà la versione WebP per tutte le tue immagini esistenti. A differenza della normale opzione di ottimizzazione delle immagini, la creazione di immagini WebP richiederà solo meno tempo a seconda del numero di immagini sul tuo sito. Nel nostro caso, abbiamo immagini 14K che hanno impiegato poco meno di un minuto.

Cambiare la qualità

In qualsiasi momento puoi decidere di cambiare la qualità da lossless a lossy o viceversa. Puoi anche modificare la qualità delle immagini WebP con perdita in qualsiasi momento in un secondo momento. Ogni volta che cambi la qualità, fai clic sul link "rigenera" per rigenerare le immagini con una nuova qualità. In alternativa, fare clic sul pulsante "Elimina tutti i file WebP" e quindi fare clic su "Genera file WebP in blocco" per rigenerare le immagini con una nuova qualità.

Testare le immagini WebP nel browser

Apri il tuo sito in Google Chrome e controlla il codice sorgente dalla Developer Console. Vedrai ancora che le immagini PNG o JPEG vengono caricate invece delle immagini WebP. Tuttavia, questo non è il modo corretto per verificare.

Come servire immagini WebP in SiteGround?

Fonte che mostra l’immagine PNG

Dal momento che non puoi vedere le immagini WebP nel server di hosting o dalla libreria multimediale, potresti confonderti se funziona sul tuo sito o meno. Segui le istruzioni di seguito per verificare che il tuo sito funzioni con le immagini WebP.

  • Apri Google Chrome e apri la sezione Strumenti per sviluppatori di Chrome. Puoi accedere agli strumenti per sviluppatori premendo F12 in Windows e andando su "Opzione + Comando + I" in Mac.
  • Fare clic sulla scheda "Rete" e aprire la pagina Web nella barra degli indirizzi. Se hai già aperto la pagina, fai clic sul pulsante di aggiornamento per ricaricare la pagina.
  • Ora puoi vedere che le attività di rete vengono registrate e fai clic sulla scheda "Img".
  • Qui puoi vedere il tipo di risorsa caricata dal tuo sito.
  • Puoi ordinare la colonna "Nome" o "Tipo" per controllare il tipo di immagine. Dovrebbe essere visualizzato come "WebP".
  • Questo è il modo per confermare che le immagini WebP vengono servite dal tuo sito web.

Come servire immagini WebP in SiteGround?

Controlla SiteGround WebP nel browser

Metodo alternativo di test

L’altro modo di testare è semplice.

Come servire immagini WebP in SiteGround?

Salva l’immagine come

  • Dovresti vedere il formato dell’immagine come "Google WebP".

Come servire immagini WebP in SiteGround?

Salva immagine WebP

Sebbene l’immagine originale sia PNG (o JPEG), dovresti vedere il formato come "Google WebP" poiché questo è il formato immagine disponibile sul tuo sito.

Immagini WebP memorizzate nella cache

Alcuni plug-in di memorizzazione nella cache come WP Rocket ti consentono di memorizzare nella cache le immagini WebP. Se metti nella cache le immagini WebP, puoi trovare le versioni .png.webp o .jpg.webp nel tuo server di hosting nella directory dei caricamenti. Questo non è il comportamento predefinito del servizio SiteGround WebP e quando disabiliti il ​​plug-in di memorizzazione nella cache, la generazione della cache si interrompe e dovresti utilizzare uno dei metodi sopra indicati per verificare.

Come servire immagini WebP in SiteGround?

Cache WebP in WP Rocket

Quante dimensioni posso risparmiare?

Questo dipende molto dalla qualità che scegli per le tue immagini WebP. Nel nostro caso, scegliamo l’opzione lossless e abbiamo un risparmio di oltre il 77% per singola immagine.

  • Dimensione dell’immagine PNG originale: 139 KB
  • Dimensione dell’immagine WebP: 31 KB

Test di nuovo con Google PageSpeed ​​Insights

Ora torna allo strumento Google PageSpeed ​​Insights e prova una delle tue pagine web. Il suggerimento per la pubblicazione di immagini nel formato di nuova generazione dovrebbe scomparire ora.

Punti a cui prestare attenzione

Assicurati di prestare attenzione ai seguenti punti quando utilizzi WebP sul tuo sito:

  • Non tutti i browser supportano WebP, assicurati di controllare il tuo sito su Google Chrome o qualsiasi browser supportato.
  • I plug -in di memorizzazione nella cache come WP Rocket offrono la memorizzazione nella cache delle immagini WebP per aumentare la velocità di caricamento della pagina. Tuttavia, questi plug-in di memorizzazione nella cache non rileveranno le immagini WebP nel server SiteGround. Puoi confermare con lo sviluppatore del plugin prima di abilitare la memorizzazione nella cache delle immagini WebP.
  • I servizi CDN come Cloudflare funzioneranno perfettamente con SiteGround. Tuttavia, se disponi di una configurazione CNAME separata per fornire file multimediali tramite CDN, verifica con il tuo provider CDN se possono fornire immagini WebP.
  • L’opzione WebP non è disponibile per i siti che ancora utilizzano l’installazione di cPanel. Devi aspettare che SiteGround migri il tuo account su Site Tools.
  • Devi utilizzare il plug-in SG Optimizer per abilitare WebP, senza il plug-in non è possibile abilitare dal tuo account di hosting.
  • Assicurati di rigenerare le immagini ogni volta che modifichi la qualità delle immagini WebP.

Parole finali

La velocità del sito sta diventando un fattore importante con i Core Web Vitals annunciati da Google che influenzeranno il ranking in futuro. I siti Web SiteGround sono già sulla piattaforma Google Cloud e con WebP sarai molto più avanti della concorrenza ospitata su altre società.

Fonte di registrazione: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More