Suggerimenti di Google per ottimizzare le immagini

Velocizzare il caricamento delle immagini su un sito: 6 consigli di Google

In un video, Google ha fornito alcuni suggerimenti utili per ottimizzare il caricamento delle immagini su un sito web.

I 6 consigli di Google per ottimizzare il caricamento delle immagini

1. Monitora il Cumulative Layout Shift (CLS) del tuo sito web

Il Cumulative Layout Shift (CLS) è la metrica che misura l’instabilità dei contenuti all’interno di un sito web. Vale a dire gli elementi che possono muoversi in una pagina web, influenzando ad esempio la lettura di un articolo. Questo indicatore è uno dei Core Web Vital determinati da Google, con un impatto reale sull’esperienza dell’utente. Sebbene le immagini non siano il fattore principale che influenza questa metrica, potrebbero contribuire. Questo è particolarmente vero quando un browser web non conosce le dimensioni dell’immagine prima di caricare il contenuto di una pagina web e non lascia spazio sufficiente per questa immagine, come spiegato da Alan Kent, Developer Advocate di Google.

Consiglio: è fondamentale per valutare il caricamento di un sito web e apportare modifiche per migliorarlo. Nota che ci sono anche molti strumenti che possono misurare le prestazioni del tuo sito web.

2. Ridimensiona correttamente le tue immagini

Per un caricamento più rapido ed efficiente delle immagini, è essenziale scegliere la giusta larghezza e altezza di queste. “Il download di file più grandi richiede più tempo, soprattutto sugli smartphone dove la connessione di rete può essere più lenta, ma anche a causa dei processori meno potenti“, afferma Alan Kent. Se il browser Web stesso ritaglia l’immagine, il tempo di download finisce per essere più lungo del necessario. Ciò consente di rilevare immagini di dimensioni errate nella sezione Opportunità, all’interno del report fornito da PageSpeed ​​Insights.

Il consiglio: puntate su immagini reattive che si adatteranno al mezzo utilizzato per accedere al sito. Esiste quindi un attributo HTML che consente di elencare diversi formati e dimensioni delle immagini in modo che il browser web possa scegliere quale è il più adatto.

3. Usa il miglior formato di immagine

Vale la pena pensare al miglior formato da utilizzare per le tue immagini, in particolare tra i formati PNG, JPEG o WebP. “Il formato del file influisce sulla dimensione del file. Bisogna fare attenzione però poiché formati come JPEG e WebP possono ridurre i file utilizzando algoritmi di compressione con perdita, ovvero una riduzione della qualità dell’immagine in cambio della riduzione delle dimensioni del file”, spiega Alan Kent. L’esperto di Google sottolinea, tuttavia, che il degrado della qualità dell’immagine non è necessariamente percepibile dai visitatori di un sito e che il guadagno nella velocità di caricamento può essere sostanziale.

Suggerimento: verifica se il tuo sito Web può trarre vantaggio dall’utilizzo di un formato immagine diverso nella sezione Opportunità > Fornitura di immagini in formati di nuova generazione di un rapporto visualizzato su PageSpeed ​​Insights.

4. Comprimi le immagini

Un altro trucco consiste nell’utilizzare il giusto fattore di qualità per le immagini per codificarle in modo efficiente, mantenendo la qualità dell’immagine desiderata. È possibile identificare se le ottimizzazioni sono fattibili nella sezione Opportunità > Codifica immagini in modo efficiente di un report PageSpeed ​​Insights.

Suggerimento: per trovare il fattore di qualità che fa per te, ti consigliamo di utilizzare lo strumento di conversione delle immagini preferito e di utilizzare valori di qualità diversi su più immagini, quindi confrontare il prima e il dopo. Google consiglia anche il sito Squoosh.app come un modo semplice per confrontare le immagini con e senza compressione.

5. Comunica ai suggerimenti per la memorizzazione nella cache del browser

Per garantire che le immagini vengano caricate più velocemente su un sito Web, è possibile dire a un browser Web per quanto tempo può memorizzare in modo sicuro le immagini nella cache. Quando un’immagine viene inviata da un sito Web, è possibile includere un’intestazione HTTP con suggerimenti per la memorizzazione nella cache, ad esempio la quantità di tempo consigliata per un browser Web per memorizzare nella cache un’immagine. Per scoprire se le intestazioni di risposta sono state impostate correttamente su un sito web, Google consiglia di guardare la sezione Opportunità > Usa regole cache efficaci sugli elementi statici in un rapporto di PageSpeed ​​Insights. Ciò indica se le immagini sono idonee per i miglioramenti della memorizzazione nella cache.

Suggerimento: assicurati di disporre delle impostazioni della piattaforma o del server Web che puoi modificare per regolare la durata della cache. Se non modifichi le immagini di frequente, puoi impostare una lunga durata della cache.

6. Assicurati di creare sequenze di download di immagini

Google consiglia inoltre di sequenziare correttamente l’ordine in cui vengono scaricate le risorse, comprese le immagini. Questo può migliorare le prestazioni di una pagina web. Si consiglia quindi di optare per il seguente ordine di download:

  • Hero Header, il banner principale del tuo sito web,
  • Immagini situate prima della linea di galleggiamento,
  • Immagini situate appena sotto la linea di piegatura.

Nella sezione Opportunità > Rinvia caricamento immagine fuori schermo di un rapporto di PageSpeed ​​Insights, hai la possibilità di identificare le immagini che potrebbero essere caricate dopo altre immagini.

Per maggiori dettagli sui consigli di Google, guarda il video completo:

Leave a Reply