Come ottimizzare le immagini del modello per aumentare la velocità di caricamento.

Come ottimizzare le immagini di un modello per renderle più leggere in modo da aumentare la velocità di caricamento e diminuire il tempo di loading.

Se state leggendo questo post siete sicuramente a conoscenza del fatto che la rapidità con cui si aprono le pagine di un sito influiscono sul posizionamento dello stesso. In altre parole Google intende premiare i siti che si aprono più velocemente a parità pertinenza e originalità dei contenuti. Il tool consigliato da Google per testare la velocità di caricamento è Page Speed Insights che offre anche dei consigli per migliorare le performance.

In questo post vediamo come ottimizzare le immagini presenti nel modello che essendo visibili in tutte le pagine del sito rivestono grande importanza. Tra i consigli di Page Speed sono infatti sempre presenti quelli che invitano a diminuire il loro peso. Se infatti incollate l'URL della vostra homepage e poi cliccate su Analize ci sarà certamente la sezione Optimize Images con tutta la lista di immagini e icone

da diminuire di peso per rendere il loro caricamento più rapido. Se si clicca sul link Learn how to fix this issue ci vengono però consigliati dei tool di difficile utilizzo per chi ha un OS Windows. In genere nei template bisognerebbe sempre caricare solo immagini in formato JPEG o PNG. Viene anche consigliato di usare il software gratuito GIMP che permette di salvare le immagini con un alto livello di compressione mantenendo invariata la loro qualità.

Un altro tool particolarmente utile per migliorare le performance delle foto è Pingdom Website Speed Test che analizza il caricamento di ciascun elemento per poter fare dei raffronti dopo eventuali modifiche del template. Prima di provare a alleggerire le foto ecco i dati di questo sito

con un tempo di caricamento di 2,08 secondi. Mi si diceva che questo blog era già più veloce del 68% di tutti gli altri siti che erano stati testati. Coloro che vogliono avere informazioni aggiuntive possono leggersi l'articolo che avevo già dedicato al Pingdom Tool.

Le immagini su cui intervenire nel modello di questo sito sono solo 4 visto che le altre sono o nel widget dei Lettori o si tratta degli avatar di Facebook. I tool che ho usato sono stati JPEG Optimizer per l'immagine in quel formato e TinyPNG per le tre immagini di estensione PNG. Ecco gli screenshot del processo di ottimizzazione effettuato

     

La foto in JPEG è stata alleggerita del 36,6% mentre quelle in PNG del 73% in media. Dopo aver scaricato queste immagini sono passato alla loro sostituzione nei vari widget e nel modello. L'immagine dell'Header fa un po' storia a sé visto che nella maggior parte dei modelli non si può incollare l'URL ma si può solo caricare andando su Layout > Intestazione > Modifica. Con questo procedimento vengono purtroppo persi gran parte dei KB guadagnati. Alla fine ho testato nuovamente su Pingdom

e il tempo di caricamento era sceso da 2.08 a 1.90 secondi mentre il peso della pagina si era ridotto da 1.0MB a 930.0KB. Niente di sensazionale ma quanto basta per essere stato rilevato anche dalla Scheda Punteggi recentemente inserita nella Home di Adsense. Ho allora scaricato l'immagine in GIF di Paypal, l'ho convertita in PNG e l'ho sostituita nel widget dopo averla ottimizzata con TinyPNG

Il risultato è che è aumentato il peso della pagina a 956.2KB  e il tempo di caricamento il che mi ha indotto a lasciarla com'era. Questa conclusione interlocutoria tanto per osservare come questi tool siano utili ma tutt'altro che precisi visto che più analisi a distanza di pochi minuti senza modificare nulla danno quasi sempre dei risultati alquanto diversi. Provare per credere

Certo che tutti questi screenshot renderanno estremamente pesante questo articolo. Spero che almeno i suoi contenuti siano utili ai lettori per guadagnare in questo modo un buon posto nelle SERP.