Mobile

Perché una pagina con molte immagini si carica più lentamente su mobile

La stessa pagina che si carica istantaneamente sul Wi-Fi dell'ufficio può procedere a rilento su una connessione mobile, puramente per il peso delle immagini.

Cos'è

Questo controllo verifica quante immagini carica una pagina, e segnala le pagine con un numero insolitamente alto, dato che ogni immagine aggiuntiva è un altro file separato che il browser deve scaricare prima che la pagina finisca di caricarsi completamente. Questo non riguarda il fatto che le immagini siano intrinsecamente negative — sono spesso essenziali per il design e il contenuto di una pagina — riguarda specificamente l'effetto cumulativo di caricarne un numero molto elevato tutte insieme.

L'impatto pratico di un alto numero di immagini si sente molto più marcatamente su mobile che su desktop, perché le connessioni mobili (anche quelle buone) sono tipicamente più lente e meno costanti di una connessione Wi-Fi o cablata di casa o ufficio.

Perché è importante

Ogni immagine aggiunge alla quantità totale di dati che il dispositivo di un visitatore deve scaricare prima che la pagina sia completamente utilizzabile, e su una connessione dati mobile in particolare, quel tempo di download può allungarsi notevolmente rispetto alla stessa pagina che si carica quasi istantaneamente su una veloce connessione desktop. Un visitatore che aspetta una pagina lenta e piena di immagini sul proprio telefono è significativamente più propenso a rinunciare e andarsene prima che finisca di caricarsi, rispetto a una pagina più leggera che diventa utilizzabile molto prima.

Questo è un caso in cui una correzione non significa necessariamente rimuovere contenuto a cui un visitatore tiene — riguarda molto più spesso come vengono consegnate quelle immagini (la loro dimensione file, e se si caricano tutte immediatamente) piuttosto che doverle tagliare del tutto.

Come risolverlo

  1. Conta quante immagini si caricano immediatamente sulla pagina, e identifica quelle insolitamente grandi in dimensione file (gli strumenti per sviluppatori del tuo browser possono mostrarlo per ogni immagine).
  2. Comprimi le immagini grandi usando uno strumento gratuito di compressione immagini prima di caricarle — questo spesso riduce drasticamente la dimensione del file senza perdita visibile di qualità.
  3. Aggiungi il caricamento lazy alle immagini che appaiono più in basso nella pagina (sotto ciò che è visibile senza scorrere), così si caricano solo quando un visitatore vi scorre effettivamente vicino, invece che tutte insieme quando la pagina si apre.
  4. La maggior parte dei website builder e piattaforme CMS moderne supportano il caricamento lazy con un semplice interruttore o automaticamente di default — controlla le impostazioni immagini o prestazioni prima di aggiungerlo manualmente.
  5. Ritesta il tempo di caricamento mobile della pagina dopo le modifiche, idealmente su una connessione mobile reale invece che su un veloce Wi-Fi da ufficio.

Verifica se il tuo sito ha questo problema

Launch Readiness analizza il tuo sito alla ricerca di questo e altri ~50 problemi prima del lancio, in pochi secondi — gratis, senza registrazione.

Avvia un'analisi gratuita