Luigi Sabbetti

Il mondo del web a 360 gradi

Pubblica immagini in formati piu recenti Google Pagespeed

Google PageSpeed Insights: Pubblica immagini in formati più recenti


di // Pubblicato il: 21 Febbraio 2019

Uno dei tool più utilizzati al mondo per testare la velocità e le performance di un sito web, è senza dubbio il Google PageSpeed insights. Abbiamo già parlato di questo strumento, ma oggi ci soffermeremo sul suggerimento generato dal tool: Pubblica immagini in formati più recenti.

Devo ammettere, infatti, che la prima volta che ho riscontrato questa problematica sono rimasto un pò perplesso, d’altronde salvo le mie immagini con photoshop attraverso la funziona salva per web e, non pensavo assolutamente, che questa potesse essere una modalità obsoleta di salvataggio file.

C’è da dire, comunque, che il tool è stato recentemente aggiornato. I suggerimenti che riporta derivano da uno strumento chiamato Lighthouse e che è già integrato all’interno di Google Chrome.

LightHouse: a cosa serve

Già, per testare le performance di un sito, vi basta andare negli strumenti per sviluppatori (attraverso il tasto destro del mouse o premendo il tasto F12 della tastiera) e troverete una tab chiama audit. In questa finestra, disponibile solo su Google Chrome, avremo la possibilità di testare il nostro sito avvalendoci di diversi fattori. Il tool, infatti, ci permette di testare il sito sia in versione desktop che mobile, dandoci la possibilità di selezionare ben cinque aree di interesse: Performance, Progressive Web App, Best Practice, Accessibilità e SEO.

Uno strumento a tutto tondo, in pratica, che non si sofferma soltanto a consigli relativi alle performance e alla velocità del sito, ma si spinge ben oltre, sfociando anche nelle Web APP. Lo strumento ci consente, infine, di scegliere la velocità di connessione da simulare e di pulire la cache prima di iniziare. Facciamo partire la scansione e potremo vedere il risultato, corredato da consigli utili per migliorare il sito sotto tutti i vari aspetti che presentano delle problematiche.

Con la nuova versione di Google PageSpeed, LightHouse è stato integrato. Attraverso il sito otterrete esattamente lo stesso punteggio ottenuto attraverso il tab audit di chrome. PageSpeed Insights, ad ogni modo, rappresenta uno strumento più completo, in grado di fornire ampi consigli per migliorare il vostro sito.

Dopo questa premessa, giungiamo al punto cardine della nostra guida. La nuova versione di PageSpeed, infatti, è molto più rigida della precedente e, in alcuni casi, fornisce errori difficili da risolvere per i neofiti. Uno dei cavalli di battaglia del tool è senza dubbio il famoso tema dei contenuti above the fold, rimasto anche in questa versione. Di questa problematica, abbiamo già parlato in altre guide che vi invito a leggere e mettere in pratica.

Ottimizzare immagini per il Web

Torniamo a noi e al nostro errore. Come vi dicevo, è importante, oltre che richiesto da Google, utilizzare dei formati di immagine appropiati per il nostro sito. Sarebbe, dunque, da evitare i formati di immagine JPEG 2000, JPEG XR, and WebP cercando di prediligere i nuovi formati JPG e PNG messi a disposizione dai più recenti software di grafica e capaci di mantenere un peso contenuto a fronte di un’ottima resa a video.

Se, come me, utilizzate una versione recente di Adobe Photoshop per la creazione delle vostre immagini, è consigliato passare dal vecchio salva per web al nuovo esporta come.
Esatto, è la stessa Adobe ad etichettare la tanto amata funzione come obsoleta, suggerendo di utilizzare Adobe Generator, un nuovo tool performante ed efficiente per l’esportazione dei vostri assets.

Si vocifera, infatti, di una graduale dismissione totale del vecchio salva per web. Correte ai ripari ed iniziate ad utilizzare la nuova funzione, già disponibile dalla versione CC2015 del software.

Vi ricordo, inoltre, che sul web esistono diversi tool che permettono di ottimizzare le immagini, non solo cambiandone il formato, ma allegerendole, permettendovi così di risparmiare diversi KB. Il più utilizzato è senza dubbio TinyPNG, di questo software esiste anche un plugin per photoshop.

Ottimizzazione immagini su WordPress: i Plugin

Chiaramente esistono anche diversi plugin per WordPress che ci consentono di ottenere lo stesso risultato. Capita, infatti, di trovarsi nella condizione in cui sul nostro sito sono già state caricate tante immagini, come facciamo dunque ad ottimizzare sia il pregresso che il futuro?

Per fortuna esistono diversi plugin che ci permettono di svolgere questa operazione, ve ne cito di seguito tre ma, come detto, ne esistono tantissimi basta testarli e trovare quello che fa al vostro caso

TinyPNG

Abbiamo già parlato dell’ottimo TinyPNG in precedenza. Devi sapere che di TinyPNG esiste sia il plugin per photoshop che quello per WordPress.
Il plugin svolge egregiamente il suo lavoro e ti consente di ottimizzare le immagini precedentemente caricate sul sito. Nella versione free ha alcune limitazioni, potrete infatti ottimizzare soltanto 100 immagini al mese. Un numero abbastanza basso considerando che per ogni immagine caricata WordPress genera diverse miniature. Se sul vostro sito utilizzate poche immagini, può essere un valido aiuto e fare realmente al caso vostro. In alternativa potrete sempre usare il tool tramite il sito web che abbiamo già citato.

EWWW Optimizer

EWWW Optimizer è un plugin che ti permette di ridimensionare di molto il peso delle immagini del tuo sito. Si tratta di un software con licenza open source e non ha particolari limitazioni. Ti permette di ottimizzare una grossa mole di immagini, andando a risparmiare di molto sul peso effettivo delle immagini. Il pannello di controllo è ricco di opzioni e ti permette di scegliere con precisione la dimensione delle miniature e il livello di compressione da applicare. Senza dubbio si tratta di uno dei plugin più validi, per questo tipo di operazione, attualmente presente sul mercato.

Smush

L’ultimo plugin che mi sento di consigliarti è Smush. Smush è facilissimo da usare e ti permette di allegerire le immagini del tuo sito senza rinunciare alla resa. Nella versione free non ha particolari limitazioni, l’unica pecca è che bisogna premere il tasto “resume” dopo 50 immagini ottimizzate in bulk. Un sacrificio, questo, minore per sfruttare un software così performante gratuitamente.

Un’interfaccia grafica moderna ed accattivante, infine, fa di questo software uno dei migliori tra quelli che ho personalmente testato.

Conclusioni

Come abbiamo visto esistono diversi metodi ed approcci per ottimizzare le immagini del nostro sito. Si tratta di un aspetto da non sottovalutare poiché incide fortemente sulle performance del tuo sito. Un sito lento non piace a nessuno. Se conosci altri metodi per ottimizzare le immagini di un sito web, scrivili pure nei commenti e sarò lieto di testarli.

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia