Come alleggerire il caricamento delle immagini del sito

Tempo fa vi avevo parlato di PageSpeed Insights, uno strumento di Google Developers che analizza le prestazioni del sito ed offre consigli su come diminuire il tempo di caricamento dello stesso.
Se avete cominciato ad utilizzarlo, vi sarete imbattuti sicuramente in SpriteMe, un tool che permette di alleggerire il caricamento delle immagini del vostro sito web. Come riesce a farlo? Semplice, attraverso l’utilizzo dei CSS.

Funzionamento di SpriteMe

Andate sul sito SpriteMe, trascinate il link presente in homepage sulla toolbar ed avrete su quest’ultima un bottone, molto simile al “Pin It” di Pinterest. Non serve installare alcun programma, attraverso una semplice procedura online il vostro sito diventerà decisamente più veloce.

Quando sarete nella pagina del vostro sito basterà cliccare questo bottone per far aprire su di esso una finestra che mostra tutte le immagini sulle quali lo strumento può operare. Cliccando su Make Sprite si unirannanno queste immagini in un unico file. In tal modo non sarete costretti a richiamare nel CSS ognuna di esse, ma verrà richiamato un file unico. Ma come è possibile caricare un alto numero di immagini con un solo file? Attraverso il CSS viene assegnato al file una posizione per ogni id o class. L’operazione vi spaventa?! Cliccate su Export CSS e non dovrete fare calcoli, tutto è automatizzato.



Io l’ho provato e dopo ho effettuato nuovamente il calcolo della velocità del mio sito, vi assicuro che funziona!