Come ottimizzare le immagini per la velocità della pagina (e Google)

Ti chiedi come ottimizzare le immagini per la velocità della pagina e Google? In questo articolo imparerai le migliori tecniche di ottimizzazione delle immagini che migliorano le prestazioni e affrontano gli avvisi di immagine di Page Speed ​​Insights (PSI).

Google è una fonte significativa di entrate per la maggior parte delle aziende, quindi è fondamentale classificarsi bene. La velocità della pagina è uno dei KPI più importanti nell'algoritmo e vedrai come le tecniche di ottimizzazione delle immagini sono un modo eccellente per aumentare la velocità del tuo sito WordPress.

Immergiamoci.

Perché le immagini sono fondamentali per migliorare la velocità della pagina

Secondo Google, l'ottimizzazione delle immagini per la velocità della pagina è importante per il ranking e l'esperienza dell'utente. In effetti, devi preparare le immagini per il web.

Sapevi che un grande volume di immagini non ottimizzate è solitamente il colpevole di un sito Web lento? Ecco come le immagini influiscono sulle prestazioni:

• Velocità complessiva della pagina: le immagini di grandi dimensioni possono rallentare il tuo sito Web e sconvolgere i tuoi visitatori che si aspettano di accedere alle informazioni il prima possibile. Come mostrato nella figura seguente, le immagini sono la risorsa dominante in una pagina web:

Le immagini sono un'ottima fonte di peso della pagina e costituiscono anche il maggior numero di richieste HTTP per pagina:

Quando un visitatore atterra sul tuo sito, il tuo browser deve richiedere e scaricare alcuni file per renderizzare il contenuto. Viene effettuata una richiesta HTTP al server per ogni singolo file:

Più risorse pesanti hai, più richieste dovrà fare il tuo browser. Ottimizzare le tue immagini e renderle più piccole ridurrà le dimensioni delle richieste HTTP con conseguente caricamento più rapido del sito.

• Conversioni: l'ottimizzazione delle immagini per la velocità della pagina è fondamentale per le entrate della tua attività. Hai bisogno di un sito a caricamento rapido con immagini leggere per rendere felice il tuo visitatore, altrimenti i potenziali clienti se ne andranno prima ancora di navigare. Secondo Google, se il tempo di caricamento della pagina è superiore a 5 secondi, la probabilità di rimbalzo aumenta del 90%!

Abbiamo visto come le immagini svolgano un ruolo importante nelle prestazioni di una pagina web. Esaminiamo gli effetti delle immagini non ottimizzate sui rapporti di Google PageSpeed ​​Insights.

Qual è l'impatto delle immagini su Google PageSpeed ​​Insights?

PageSpeed ​​Insights è uno strumento basato su Lighthouse che analizza il contenuto di una pagina Web, comprese le immagini. Una volta terminato l'audit, PageSpeed ​​fornisce una diagnosi e consigli per ottimizzare le immagini e rendere quella pagina più veloce.

Ci sono due metriche PageSpeed ​​influenzate dalle immagini: il Largest Contentful Paint (LCP), che è un Google Core Web Vitals, e il First Contentful Paint (FCP).

Inoltre, ci sono cinque consigli PageSpeed ​​comuni relativi all'ottimizzazione delle immagini, vale a dire:

1. Servi immagini nei formati di nuova generazione

Google consiglia di convertire le immagini in WebP o AVIF perché questi formati offrono una compressione migliore rispetto a JPEG o PNG. La compressione delle immagini significa download più rapidi, minor consumo di dati e un sito più veloce.

Nell'esempio seguente, potrei risparmiare quasi 135 KB convertendo la mia immagine JPEG in webP:

2. Codifica le immagini in modo efficiente

Codificare le immagini in modo efficiente significa ridurre le dimensioni di un file di immagine pur mantenendo un'ottima qualità. Se i potenziali risparmi sono pari o superiori a 4 KB, Google contrassegnerà l'immagine come ottimizzabile.

3. Rinvia le immagini fuori schermo

Un altro modo per ottimizzare le prestazioni delle immagini è rinviare le immagini fuori schermo e applicare lo script di caricamento lento alle immagini below-the-fold (non sullo schermo del visitatore). L'obiettivo è dare la priorità alle risorse critiche prima e caricare le immagini "nascoste" in un secondo momento.

4. Immagini di dimensioni adeguate

Un'altra raccomandazione di Google è di ridimensionare correttamente le immagini, soprattutto quando le servono su dispositivi mobili (design reattivo). Nell'immagine qui sotto, potrei risparmiare 50 KB ridimensionando e ottimizzando la mia immagine per i dispositivi mobili.

5. Servire risorse statiche con una politica di cache efficiente

La memorizzazione nella cache HTTP può accelerare il tempo di caricamento della pagina durante le visite ripetute al tuo sito. Google contrassegna tutte le risorse statiche che non sono memorizzate nella cache:

Nella prossima sezione, esamineremo come affrontare ciascuno degli elementi di PageSpeed ​​Insights dell'immagine e come migliorare la velocità della pagina.

Come ottimizzare le immagini per Google PageSpeed ​​e prestazioni

Per ottimizzare le immagini per Google e migliorare la velocità della pagina, puoi implementare 8 seguenti tecniche di performance:

1. Converti immagini in WebP (o un altro formato di nuova generazione)
2. Comprimi immagini
3. Ridimensiona le immagini
4. Imposta le dimensioni dell'immagine
5. Implementare il caricamento lento
6. Abilita la memorizzazione nella cache del browser
7. Approfitta di un CDN
8. Usa la grafica .SVG quando possibile

Esaminiamo gli strumenti Web e i plug-in che puoi utilizzare per ciascuna ottimizzazione consigliata da Google per migliorare il tuo punteggio complessivo di Lighthouse.

1. Converti le immagini in WebP (o un altro formato di nuova generazione)

Uno dei modi più efficienti per ottimizzare le tue immagini per Google è convertirle in WebP utilizzando un plug-in WordPress come Imagify. Crea una versione WebP delle immagini con conseguente migliore compressione e ottimizzazione. Imagify è gratuito fino a 20 MB di dati al mese. (Controlla il prezzo completo di Imagify ).

Puoi controllare altri plugin di conversione WebP: WebP Converter per media e WebP Express.

Se non vuoi usare un plugin, troverai molti strumenti online gratuiti come Convertio o Ezgif. È necessario eseguire alcuni passaggi aggiuntivi per quel metodo: caricare le immagini, scaricarle in WebP e inserirle nella libreria di WordPress.

2. Comprimi le immagini

Comprimere un'immagine significa ridurne significativamente le dimensioni per ridurne il costo di archiviazione. Secondo Google, questo darà al tuo sito web un bel miglioramento delle prestazioni!

I plugin WordPress più popolari per comprimere le immagini senza perdere qualità sono, ovvero:

• Imagify (con 3 livelli di compressione: normale, aggressivo e ultra in grado di comprimere le immagini in blocco)

• Ottimo
• Comprimi JPEG e PNG (Piccolo PNG)
• EWWW
• ShortPixel

Leggi la nostra guida per saperne di più sui 6 migliori plugin di compressione delle immagini per WordPress.

Puoi anche utilizzare software di progettazione come Photoshop o Lightroom per comprimere le immagini, ma tieni presente che la qualità potrebbe essere alterata.

L'ultima opzione è quella di utilizzare uno strumento basato sul Web come TinyPNG.

3. Ridimensiona le immagini

Google consiglia di ridimensionare correttamente le immagini, soprattutto sui dispositivi mobili. Puoi utilizzare software come Sketch, Preview o GIMP per modificare le dimensioni delle immagini e ridurne il peso.

Nota: puoi anche usare Imagify per ridimensionare immagini di grandi dimensioni. C'è un'opzione per ottimizzare automaticamente le immagini più grandi.

4. Imposta le dimensioni dell'immagine

PageSpeed ​​suggerisce di impostare una larghezza e un'altezza esplicite sugli elementi dell'immagine. L'obiettivo è ridurre i cambiamenti di layout e migliorare la metrica Cumulative Layout Shift (CLS), un'altra metrica di Core Web Vitals. Misura la stabilità visiva del contenuto.

Per impostare una dimensione dell'immagine, assicurati che i tag HTML "larghezza" e "altezza" abbiano un valore, come mostrato in rosso di seguito:

 <!-- set a 640:360 ie a 16:9 - aspect ratio --> <img src="girl.jpg" width="640" height="360" alt="girl at the beach" />

Un modo manuale per sapere se le dimensioni sono impostate correttamente è utilizzare lo strumento di sviluppo su Chrome e controllare le tue immagini:

5. Implementare il caricamento lento

Il caricamento lento è uno dei modi più efficienti per ottimizzare le tue immagini per Google e le prestazioni. Come mai? Dici al browser solo di scaricare le immagini che il visitatore sta visualizzando.

Per applicare il caricamento lento alle tue immagini, puoi utilizzare un plug-in WordPress gratuito come LazyLoad di WP Rocket o Autoptimize. LazyLoad di WP Rocket è molto semplice:

Puoi anche implementare il caricamento lento manualmente aggiungendo il seguente tag all'immagine:

 <img src="image.png" loading="lazy" alt="…" width="200" height="200">

Per saperne di più sul caricamento lento, ti suggeriamo di leggere questo articolo sui migliori plugin di caricamento lento per WordPress.

6. Abilita la memorizzazione nella cache del browser

La memorizzazione nella cache è un'altra raccomandazione di Google per la velocità della pagina perché consente alle immagini di essere fornite più velocemente agli utenti. La memorizzazione nella cache del browser può aiutare a ridurre il carico del server riducendo il numero di richieste HTTP per pagina.

Google suggerisce di utilizzare un plug-in di WordPress per implementare la memorizzazione nella cache. Uno dei migliori plugin per la cache è WP Rocket. Applica l'80% delle migliori pratiche per le prestazioni web, ha un'interfaccia semplice e una configurazione rapida.

7. Approfitta di un CDN

L'utilizzo di una CDN immagine riduce significativamente i costi di traffico e aumenta il voto su Google PageSpeed ​​Insights. Ottimizza il modo in cui le immagini vengono consegnate ai visitatori, indipendentemente da dove si trovino nel mondo. Grazie a questa tecnica di ottimizzazione dell'immagine, la quantità di dati trasferiti viene ridotta.

Importante: la creazione di una CDN da zero può essere opprimente. Dovrai gestire i record DNS e i campi Cname. Se preferisci un'installazione automatica, potresti provare RocketCDN. Fanno il lavoro pesante e configurano la CDN per te.

8. Usa grafica SVG quando possibile

Una delle caratteristiche più importanti di SVG per le prestazioni è che la grafica può essere ridimensionata senza perdere qualità. SVG sta per Scalable Vector Graphics ed è basato su XML. Dietro le quinte, questo formato contiene equazioni e matematica, rendendo più facile la scalabilità senza mai compromettere i pixel.

Immagini e velocità della pagina: un caso di studio

Applichiamo tutte le tecniche consigliate che abbiamo appena menzionato in modo da poter confrontare le nostre prestazioni prima e dopo l'ottimizzazione di una pagina web. Utilizzeremo PageSpeed ​​Insights e GTmetrix per l'audit.

La prima colonna mostra i risultati prima di qualsiasi tipo di ottimizzazione. Ho creato una pagina web con 8 immagini HD dal mio iPhone.

La seconda colonna mostra i miglioramenti dopo l'implementazione delle tecniche di ottimizzazione delle immagini. I miei risultati su Google PageSpeed ​​Insights sono decisamente migliorati:

	Prima dell'ottimizzazione dell'immagine	Dopo l'ottimizzazione dell'immagine (Imagify + WP Rocket + Rocket CDN)
Voto complessivo
Avvisi di Page Speed ​​Insights
Dettagli pagina: Peso totale delle mie immagini sulla pagina % delle richieste fatte dalle immagini

Risultati chiave delle prestazioni con Imagify, WPRocket e RocketCDN:

Dopo aver seguito i consigli di Google su come ottimizzare le immagini, possiamo notare i seguenti miglioramenti:

• I problemi e gli avvisi relativi alla PSI relativi all'immagine sono stati risolti
• Il peso totale delle immagini era di 3,5 MB, ora è sceso a 36,8 KB
• La metà delle richieste HTTP è stata effettuata dalle immagini. Dopo l'ottimizzazione, sono responsabili solo del 22% delle richieste.
• Le richieste HTTP sono passate da 16 a 9
• I miei Core Web Vitals sono ora tutti nel verde
• Il punteggio delle prestazioni è passato da 68/100 a 95/100 su dispositivo mobile
• Il tempo a pieno carico è stato di 3,9 s ed è sceso a 1,2 s
• La dimensione della mia pagina era di quasi 4 MB e ora è di 91 KB!

Avvolgendo

Per ottimizzare le immagini per la velocità della pagina e Google, ho applicato il seguente protocollo di prestazioni:

• Ho installato Imagify, che mi ha permesso di:
  • Converti le mie immagini in WebP
  • Ridimensiona le mie immagini più grandi
  • Comprimi e ottimizza le mie immagini utilizzando la modalità Ultra per codificarle in modo efficiente

• Ho attivato RocketCDN per consentire alle mie immagini di essere servite più velocemente in tutto il mondo.

• Ho usato WP Rocket per:
  • Implementa la memorizzazione nella cache
  • Applica il carico pigro sulle mie immagini
  • Ottimizza il mio codice JS e CSS

Vuoi fare un tentativo e sbarazzarti degli avvisi relativi alle immagini? Inizia il tuo viaggio di ottimizzazione delle immagini con Imagify! Prima di installare il plug-in, puoi iniziare a utilizzare l'app Web gratuitamente.