Servire immagini scalate per ridurre i tempi di caricamento
Durante la tua analisi del pagespeed su PageSpeed Insights o GtMetrix hai rilevato un errore con la dicitura “Pagespeed: Serve scaled images“.
Cosa significa servire le immagini scalate?
Stiamo servendo immagini ad una risoluzione maggiore di quella che effettivamente l’utente sta visualizzando.
Riprendiamo l’esempio della figura sopra: l’utente si collega al nostro sito, visualizza un’immagine in una cornice di 524* 287 px. La risoluzione dell’immagine però è di 2000 * 1095 px, ciò significa che l’utente sta scaricando dati che non servono ai fini della visualizzazione, sta scaricando un’immagine più grande di ciò che servirebbe. Si tratta di uno spreco di risorse che si moltiplica per ogni immagine fornita con questa tecnica.
Il problema può essere dovuto ad una serie di fattori:
- problemi di gestione dell’html
- non abbiamo ottimizzato le immagini prima o dopo il caricamento (utilizzando per esempio delle miniature con dimensioni ad hoc)
- uso errato del responsive
- Come risolvere questo problema?
Assicurarsi sempre che l’immagine che stiamo facendo scaricare sia identica o inferiore alle dimensioni del contenitore di visualizzazione. E fare i test a più risoluzioni, sia su pc, sia su tablet, sia su smarthphone nella vista orizzontale e verticale.
Strumenti per il controllo delle dimensioni delle immagini
Un valido strumento è l’analizza elemento di Google Chrome, o Firebug, strumenti che consentono di vedere al volo il sorgente della pagina. Inoltre sempre con questi strumenti, integrati nel browser o installabili con una pratica estensione, si può simulare la vista di altri device come tablet e smartphone.
Altrimenti esistono degli strumenti online, che probabilmente avrai già utilizzato, che consentono di fare un check di tutti i fattori legati alle performance, tra cui anche il discorso delle immagini. Ti lascio un elenco dei migliori strumenti automatici:
Non ti resta quindi che analizzare e cercare di risolvere manualmente questi problemi. Qualora tu abbia difficoltà noi rimaniamo a tua disposizione per una consulenza o un intervento tecnico.
Buon lavoro
Mara
Aprile 29, 2019 at 8:57 amSi, è assolutamente necessario intervenire per ridurre i tempi di caricamento, tuttavia dovrebbe essere un compito da non sottovalutare già in partenza
Marco P.
Maggio 29, 2019 at 4:05 pmLa giusta soluzione per intervenire anche sui tempi di caricamento, che si sa sono la causa di abbandono di un sito web più frequente
Matteo G.
Giugno 30, 2019 at 2:30 pmSicuramente uno di quei passi da percorrere per velocizzare il caricamento
Pierangelo
Maggio 1, 2020 at 11:16 amIl problema con Woocommerce però sembra proprio irrisolvibile, se si danno immagini scalate le immagini prodotto diventano orrende e se si servono due versioni non serve a nulla! Esiste una soluzione?
Sicuro G.
Gennaio 13, 2021 at 9:57 pmUn articolo molto interessante. Mi sono promesso di rileggerlo ancora domani. Per una mia sicurezza