Come ottimizzare le immagini per Google PageSpeed

Registra un punto di partenza utile

Apri PageSpeed Insights, inserisci l’URL pubblica della pagina da analizzare e avvia un test per dispositivi mobili o computer.

1. Testa l'URL pubblicato con il percorso esatto.
2. Annota se il test è mobile o desktop.
3. Registra l'immagine segnalata e il suo URL attuale.
4. Salva dimensioni e peso del file insieme al rapporto.
5. Definisci l'obiettivo: peso, individuazione, stabilità del layout o altro.

Prima di modifiche estese scegli una pagina rappresentativa: un prodotto con la galleria abituale o un articolo con una copertina tipica. La homepage non descrive automaticamente ogni modello di pagina.

Scegli un intervento mirato

Se l'immagine servita è troppo grande rispetto allo spazio occupato, crea varianti adeguate. Se il problema è la codifica, confronta WebP tramite JPG in WebP o PNG in WebP.

Se il layout si sposta quando l'immagine appare, riserva lo spazio necessario. Se l'immagine principale viene richiesta tardi, controlla come il browser la individua. La guida ai Core Web Vitals chiarisce le differenze.

Comprendi i due tipi di misurazione

PageSpeed Insights combina un test Lighthouse di laboratorio con dati di utenti reali, quando disponibili. Questi ultimi coprono gli ultimi 28 giorni e possono riguardare tutte le pagine con lo stesso protocollo, nome host e porta, anziché la singola pagina. I siti piccoli possono non avere dati sufficienti: non è un test fallito. Consulta la documentazione PageSpeed di Google.

Una nuova esportazione può influenzare il prossimo test di laboratorio, mentre lo storico non riflette subito soltanto la pagina aggiornata. Annota quale parte del rapporto confronti, evitando di confondere un miglioramento immediato del test con l'esperienza di tutti gli utenti.

Controlla se i dati sul campo riguardano questo URL o l’intera origine. Un’origine raggruppa pagine con lo stesso protocollo, nome host e porta; i suoi dati non confermano il miglioramento di una specifica pagina prodotto modificata. Separa i confronti di laboratorio da questa visione generale. Distingui anche il risparmio stimato di byte da un miglioramento misurato del LCP: un’immagine più leggera può non apparire prima.

Verifica che la modifica sia online

Pubblica il file e aggiorna il riferimento quando serve. Controlla la richiesta reale del browser. Un'esportazione locale non cambia nulla per i visitatori. Se viene ancora usata la vecchia versione, esamina cache e varianti generate.

Ripeti il test sullo stesso URL e con la stessa categoria di dispositivo. Ricontrolla variazioni inattese e confronta il problema specifico, non soltanto il punteggio. Non cambiare insieme hosting, script e tutte le immagini se vuoi capire quale intervento ha funzionato.

Quando altri colli di bottiglia contano di più

Dopo aver risolto i problemi delle immagini, analizza i ritardi rimanenti. Risposte lente, script pesanti o rendering tardivo possono prevalere. Un'ulteriore compressione peggiorerebbe le immagini senza eliminare la causa.

Registra pagina, originale, sostituzione e risultato osservato. Il processo diventa ripetibile e aiuta a riconoscere regressioni dopo modifiche al tema o all'impaginazione.

Esempio: dal rapporto a una correzione

Immagina che il rapporto mobile segnali una foto prodotto troppo grande. Salva rapporto, URL della pagina e dell’immagine e dimensioni visualizzate. Pubblica una copia più piccola con lo stesso ritaglio su una pagina di prova e conferma la richiesta prima di misurare. È un esempio operativo, non un miglioramento di punteggio misurato.

Registra data, categoria del dispositivo, dimensioni, peso, LCP, spostamenti del layout e qualità. Ripeti prove confrontabili e considera la variabilità, senza confrontare la migliore nuova con la peggiore precedente. Un file minore senza cambiamento di LCP può indicare un’altra fase dominante.

Decidi se mantenere la modifica

Mantienila se risolve il problema senza peggiorare dettagli, testo o layout. Se la richiesta parte ancora tardi, verifica individuazione e caricamento. Se il file arriva ma resta invisibile, esamina rendering ed effetti di comparsa. La sola compressione non risolve questi ritardi.