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 po’ 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.
Indice dei contenuti
- Lighthouse: a cosa serve
- Ottimizzare immagini per il Web
- Ottimizzazione immagini su WordPress: i Plugin
- Conclusioni
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 Lighthouse. In questa finestra, disponibile solo su Google Chrome, avremo la possibilità di testare il nostro sito avvalendoci da diversi punti di vista.
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 tematiche prettamente SEO e legate all’accessibilità. 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 Lighthouse di Google 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.
Non solo, con le ultime versioni sono state introdotte nuove metriche molto severe, definiti Core Web Vitals e che presto impatteranno anche dal punto di vista SEO e che riguardano il Content Layout Shift (CLS – ovvero la presenza di shifting di contenuti durante il caricamento della pagina) e il Largest Contentfull Paint (LCP – Tempo trascorso prima del caricamento del contenuto immagine più grande della pagina).
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 appropriati per il nostro sito. Sarebbe, dunque, da evitare i formati di immagine JPEG 2000, JPEG XR 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, in particolar modo il formato WebP è ad oggi considerato il migliore da Google assieme alle progressive JPG.
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 alleggerendole, 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, scrivimi pure e sarò lieto di testarli ed aggiornare questa mia lista con i tuoi consigli.