Perché le immagini del mio sito si caricano lentamente?

Parti da una pagina lenta

Apri la pagina pubblicata su telefono e computer. Nota quale immagine appare in ritardo, se tutta la pagina è lenta e se il testo si sposta quando compaiono le immagini.

1. Annota l’indirizzo della pagina e l’immagine che presenta il problema.
2. Esegui un test in PageSpeed Insights e conserva i risultati relativi alle immagini.
3. Se qualcun altro gestisce il sito, inviagli l’indirizzo e il rapporto. Chiedi di controllare quell’immagine prima di modificare l’intera libreria.

Le sezioni seguenti aiutano a scegliere il prossimo controllo. Per un’analisi più approfondita, il pannello Network del browser mostra quali file scarica la pagina e quanto dura ogni richiesta.

Collega ogni sintomo a un controllo

Facoltativo: esaminare l’immagine nel pannello Network

Su un computer, apri la pagina in Chrome. Apri gli strumenti per sviluppatori con Ctrl + Maiusc + J su Windows o Linux, oppure Comando + Opzione + J su Mac. Seleziona la scheda Network e segui questi passaggi:

1. Seleziona il filtro immagini Img.
2. Attiva Disable cache e ricarica la pagina con il pannello aperto. In questo modo esamini un nuovo download anziché una copia salvata dal browser.
3. Seleziona la richiesta dell’immagine problematica. Controlla l’anteprima per verificare che sia quella giusta.
4. Annota l’indirizzo dell’immagine e le dimensioni del file.
5. Apri Timing per vedere dove la richiesta impiega tempo e controlla Initiator per sapere cosa l’ha avviata.

Questa impostazione del browser non svuota la cache del server del sito o della CDN. Una CDN distribuisce i file del sito da diversi server e può conservare copie proprie.

Se parte tardi, verifica se la avviano HTML, script o caricamento differito. Se parte presto ma attende a lungo, confronta un’altra immagine e il documento HTML. Se il file arriva rapidamente ma non appare, controlla CSS, animazioni e JavaScript. Correggi la fase che perde davvero tempo.

Timing mostra dove la richiesta impiega tempo, per esempio aspettando il server o scaricando. Initiator indica cosa l’ha avviata, come HTML o uno script. Questo distingue un file pesante da una richiesta tardiva.

documentazione Network di Chrome

In Timing, distingui Queueing o Stalled, Waiting for server response (TTFB) e Content Download. Il tempo prima dell’invio può dipendere dalla pianificazione del browser o dall’apertura della connessione: non è tutto lavoro del server. Il TTFB comprende anche il transito in rete, quindi un’attesa lunga non dimostra un guasto dell’hosting. Un download lungo suggerisce di controllare quantità di dati e velocità della connessione. Confronta più richieste nelle stesse condizioni.

Riduci i file inutilmente grandi

Se una piccola scheda scarica una foto enorme, parti dalle dimensioni. Crea una copia proporzionata con lo strumento di ridimensionamento, poi confronta WebP o AVIF se il sistema di distribuzione li supporta. La guida ai formati aiuta a scegliere.

Considera l'intera schermata iniziale. Decine di piccole miniature scaricate contemporaneamente possono trasferire troppi dati nel complesso. Decidi quali servono subito e quali possono attendere che il visitatore scorra più vicino.

Correggi i tempi quando il peso non è il problema

Non lasciare che il caricamento differito ritardi l'immagine visibile più importante. Se attende un'animazione o uno script, analizza la sequenza con lo sviluppatore. La guida LCP di Google distingue i ritardi di caricamento da quelli di rendering.

Confronta più richieste prima di attribuire il problema al formato. Se anche HTML e altre risorse attendono a lungo, controlla hosting e distribuzione. Dieci nuove esportazioni difficilmente risolvono l'attesa precedente alla risposta del server.

Ripeti il test in condizioni confrontabili

Una visita successiva può essere più veloce grazie alla cache. Annota se il caricamento usa dati memorizzati e mantieni uguali dispositivo e rete. Prova anche una finestra stretta per individuare eventuali varianti mobili mancanti.

1. Annota l'URL lento e la richiesta dell'immagine interessata.
2. Modifica il file o il comportamento di caricamento.
3. Verifica che venga servita la nuova versione.
4. Ripeti la misurazione e controlla la qualità visiva.

Considera insieme la prima vista della galleria: immagine principale e venti miniature possono richiedere regole diverse. Dai priorità al visibile e rinvia il resto quando opportuno. Scorri poi tutta la galleria e torna indietro per verificare comparsa puntuale e assenza di spazi vuoti.