Plugins e Consigli per ottimizzare le immagini su WordPress

Plugins e Consigli per ottimizzare le immagini su WordPress

5838
0
CONDIVIDI

Come è noto agli addetti ai lavori, Google ha lanciato l’acceleratore per pagine webAMP“, con il chiaro obiettivo di tracciare una linea netta verso pagine web più leggere e veloci.

La maggior parte delle persone utilizzano i dispositivi mobili, una mole importante di traffico in arrivo sui nostri siti proviene proprio da smarphone o tablet. Molto spesso la frequenza di rimbalzo è così alta proprio perché i navigatori non vogliono aspettare un secondo in più per aprire le nostre pagine.

In realtà, ci sono un sacco di fattori che possono influenzare il tempo necessario per caricare una pagina web, ma il mio obiettivo qui oggi è supportare gli utenti di WordPress, e parlare di come possiamo mantenere le nostre immagini leggere ed efficienti da tutti i dispositivi.

Per i siti che sviluppo in WordPress, cerco di attuare al meglio le “best pratices” assicurandomi soprattutto che i visitatori mobile non sono costretti a subire un salasso ogni volta che aprono le mie pagine. In realtà tempo fa ho già scritto un’articolo simile (leggi i 5 consigli per rendere WordPress più veloce) ma oggi approfondirò questo discorso, orientandolo in gran parte all’utilizzo errato delle immagini.

Host e provider

La fase preliminare è la più importante. In generale, se acquistate uno di quei spazi “ottimizzati” per WordPress, assicuratevi di avere incluse le seguenti funzionalità:

  • Innanzitutto, come già anticipato, che sia uno spazio web ottimizzato per “WordPress“;
  • Che abbia un sistema di caching proprietario che sa quando servire pagine dinamiche, e quando è meglio prendere uno snapshot di una pagina al primo caricamento;
  • Che abbia la possibilità di utilizzare delle CDN (Content Delivery Network). Essenzialmente il computer che si collega al vostro sito internet, dipende dalla posizione geografica stessa. In sostanza, otterrete il servizio (che può essere un’immagine piuttosto che una chiamata ad un javascript) più vicino all’area geografica del navigatore.

Se credete che uno spazio web ottimizzato per WordPress sia una cosa da principianti, allora acquistate un server dedicato e pagate un buon sistemista 🙂

Come posso proseguire?

pexels-photo-24836Innanzitutto, se dobbiamo utilizzare un tema già pronto, mi sento di consigliarne uno  che sia sensibile alle problematiche della velocità. In generale, uno sviluppatore di temi deve prendere in considerazione le differenze tra i dispositivi mobili e dispositivi desktop. Provate a digitare su google “WordPress fastest themes“, avrete l’imbarazzo della scelta 🙂

Tutti i siti hanno scopi diversi, naturalmente, ma per me, per la maggior parte dei siti, devono guardare al futuro in quest’ottica. Come sappiamo, le pagine lente sono penalizzate da Google (e qui si potrebbe aprire un dibattito), è un motivo in più per seguire le linee guida in fase di sviluppo.

Come accennato in precedenza, le immagini spesso occupano più spazio sul disco rigido di quanto hanno bisogno, questo influenza sensibilmente il tempo necessario per caricare una risorsa all’interno di una pagina web.

Un’immagine per ogni risoluzione

imac-apple-mockup-app-38544Non tutti sanno che WordPress ha reso le immagini responsive, parte del suo core. Come però sapete, crea una varietà di versioni “in miniatura” dell’immagine che si sta caricando nei media. Lo ha sempre fatto. In passato, l’unico scopo di questo caricamento multiplo, era prettamente legato al tema e alla possibilità di mostrare immagini di diverso formato che meglio si adattassero alla grafica del contesto.

Ma ora c’è uno scopo ulteriore. La presenza di più versioni dell’immagine è a portata di mano per quando la pagina web viene visualizzata su schermi di dimensioni diverse. Adesso, quando il codice HTML per l’immagine viene inviata al browser web (che WordPress ha reso scalabile), fornisce dettagli sulle diverse versioni (o dimensioni) dell’immagine visualizzata. In questo modo, l’immagine corretta verrà utilizzata in maniera intelligente a seconda della dimensione del dispositivo che stiamo utilizzando.

Ridimensionare Immagini “on the fly” in WordPress

pexels-photo-60229WordPress a volte in realtà riduce la dimensione del file durante il caricamento utilizzando un algoritmo abbastanza decente che in realtà non ha bisogno di una interfaccia utente per modificare ulteriormente le impostazioni. Ma c’è ancora spazio per migliorare. Un sacco di spazio.

Non è una ricetta, ma un esperimento che vi servirà ad acquisire la consapevolezza di quanto spazio possiamo risparmiare se ottimizzassimo al meglio le immagini:

  1. Prendete nota della dimensione iniziale dell’immagine su disco;
  2. Caricate l’immagine su WordPress;
  3. Prendere nota della nuova dimensione;
  4. Installare un plugin ottimizzazione delle immagini;
  5. Ri-caricare la stessa immagine;
  6. Prendere nota delle dimensioni della nuova immagine.

Proviamo? Ma no, lo fa per noi diversi plugin:

ShortPixel

Ho preso un plugin che ritengo molto interessante, si chiama ShortPixel ed è disponibile gratuitamente nel repository di WordPress.

Per farlo funzionare, è necessario scaricare e installare il plugin (link sopra) per WordPress. L’elaborazione delle immagini inizierà automaticamente utilizzando le impostazioni predefinite. È possibile ottenere un’ottimizzazione di 100 immagini gratis ogni mese. Non male per chi realizza un sito web istituzionale o poco aggiornato. L’elaborazione delle immagini avviene direttamente sul server ShortPixel, in background, per evitare di dover installare utility extra e costringervi a configurazioni particolari del server, che in molti ambienti di hosting condiviso, non è nemmeno possibile fare. Dovrete munirvi di una chiave API ShortPixel per comunicare con i loro server.

Nel dettaglio:

  1. Ottenete la vostra chiave API che verrà inviata via email;
  2. Successivamente, scaricare , caricare, installare e attivare il plugin in modo tradizionale. Oppure, cercare “shortpixel” dal tuo pannello Plugin di WordPress (Plugin > Aggiungi Nuovo);
  3. Andare alla schermata Impostazioni ShortPixel (Impostazioni > ShorPixel);
  4. Incollare nella chiave API che avete ricevuto via mail e fare clic sul pulsante di attivazione;
  5. Ora verranno visualizzate le impostazioni di configurazione. Attualmente, i valori predefiniti impostati dal plugin sono: il tipo di compressione, l’ottimizzazione delle miniature, le immagini vengono regolate per i dispositivi mobili;

Si può giocare con le impostazioni, se non vi piacciono i risultati desiderati. L’opzione “lossless” è un giusto compromesso tra qualità e quantità.

Un’altra opzione aggiuntiva consente di impostare le dimensioni massime per immagine caricata, nel caso in cui voi o peggio ancora i vostri utenti stanno caricando i file enormi da fotocamere o da repository.

Nell’ottica dello sviluppo Agile, c’è una frase pilastro a cui faccio riferimento ogni giorno “automate and forget“. La possibilità di automatizzare un processo, dimenticandone di doverlo fare manualmente ogni volta lascia spazio e tempo ad altre funzionalità più complesse da sviluppare. ShortPixel è pratico, facile da usare, a prezzi accessibili e mi permette facilmente di impostare rapidamente e dimenticare (automate and forget appunto).

Non dimenticare che se si sta installando ShortPixel su un sito web che ha già un gruppo di immagini caricati, una volta che hai settato le impostazioni, è possibile utilizzare la funzione Optimize Bulk.

In alternativa diamo uno sguardo ad alcuni plugin simili: Kraken, e TinyPNG piuttosto che Optimus , ImagifyEWWW. Sono validi plugin, tutti lavorano nello stesso modo:

  • Immagini processate sul “cloud”;
  • Sono in grado di comprimere e ottimizzare le immagini;
  • Sono in grado di ridimensionare le immagini;
  • Offrono a pagamento, possibilità di ampliare il numero di immagini da caricare;

Kraken Image Optimizer

È possibile provare il plugin WordPress Kraken gratuitamente. Tuttavia, al fine di utilizzarlo oltre la quota di test 50 MB, vi verrà richiesto di effettuare l’aggiornamento a un piano a pagamento a partire da $ 5 al mese. Visitate il loro sito web per vedere la serie completa di funzioni.

In questo momento, Kraken ha più di 10.000 installazioni attive e, come ShortPixel, ha una valutazione globale di 4.6 su 5 stelle.

In conclusione

writing-notes-idea-conferenceIndipendentemente dall’utilizzo di questi Plugin è fondamentale tenere d’occhio le dimensioni delle immagini per i siti responsive. Dedicate più tempo in fase di analisi, perché come mi capita spesso, se non voglio rinunciare ad una qualità desktop molto alta, decido di realizzare una versione mobile e tablet ad hoc in modo tale da evitare una riduzione drastica della qualità delle immagini anche per chi naviga via desktop. Ma questo dipende sempre dalle statistiche di accesso e dal target.

#AutomateAndForget