Pubblicato il 18/08/13e aggiornato il

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

immagini-page-speed

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

pingdom-website-speed-test
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

jpeg-optimizer     
tinypng-optimizer

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

pingdom-test

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

immagine-png-gif
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

pingdom-tool-speed

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.




8 commenti :

  1. ciao nel mio account adsense in stato di salute del sito c'è scritto: Eliminate external render-blocking Javascript and CSS in above-the-fold content
    Your page has 2 blocking CSS resources. This causes a delay in rendering your page. Non so come fare, con il programma che hai appena spiegato posso rimuovere questi blocchi?

    RispondiElimina
    Risposte
    1. No. Sono consigli che hanno tutti gli utenti di Blogger. Se guardi l'url riporta ai server di Blogger e quindi non sono modificabili
      @#

      Elimina
  2. Ok ho capito ma in qualche modo c sarà il sistema di migliorare la velocità, almeno con le foto farò come da te descritto

    RispondiElimina
    Risposte
    1. Oltre a questo post leggi anche questo
      http://www.ideepercomputeredinternet.com/2013/07/page-speed-insights.html
      Non si può fare moltissimo
      @#

      Elimina
    2. Ernesto secondo te gli ingeneri informatici di Blogger si adopereranno per risolvere le impostazioni lato server in tempi ragionevoli o rimarremo sempre con il bel bollino rosso?:D

      Elimina
    3. Mi sa che sia una questione di priorità. Al momento sembra che stiano puntando sui modelli a Visualizzazione Dinamica lasciando perdere l'ottimizzazione di quelli classici
      @#

      Elimina
    4. Poi non mi sorprendo che sul forum di Blogger ci siano più persone arrabbiate che felici:D
      Buon lavoro Ernesto:D (dovresti farti nominare Collaboratore principale li così avresti tanti mal di testa!)

      Elimina
    5. La trafila per diventare Collaboratore Principale di Blogger o di altro servizio di Google è molto lunga. Bisogna rispondere alle domande del forum, si ottiene dei punteggi e si aumenta di livello. Ho provato a rispondere a qualche domanda ma ci sono persone che ci stanno fisse per poi dare quasi sempre lo stesso consiglio "Hai provato a cambiare browser?". In qualche caso ho risposto a utenti a cui nessuno era stato in grado di farlo ma non fa per me, non lo trovo gratificante ma è una questione di gusti, sensibilità e di tempo a disposizione. Io ho non ne ho molto e devo ottimizzarlo al massimo.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.