Tra i vari accorgimenti che si possono adottare per rendere un sito più fluido, veloce e, conseguentemente, migliorarne il posizionamento su Google, c’è sicuramente quello di ottimizzare le immagini. Questo ragionamento, vale in generale per qualsiasi sito web, in quest’articolo, affronterò la problematica relativa a siti web realizzati sul CMS WordPress, che, per fortuna, offre una serie di strumenti adatti al nostro scopo, cioè l’ottimizzazione delle immagini. Nell’articolo vedremo come ottimizzare le immagini su WordPress anche in ottica SEO ed alcune tecniche, come il lazy loading, per velocizzare ulteriormente il caricamento delle pagine web.
Come ottimizzare le immagini su WordPress? Quali sono gli accorgimenti per avere una buona ottimizzazione delle immagini?
Occhio alle dimensioni!
Il primo punto da tenere ben presente per una buona ottimizzazione delle immagini è sicuramente la dimensione delle stesse. Riducendo le dimensioni delle immagini, infatti, si possono ridurre notevolmente i tempi di caricamento delle pagine.
L’ideale sarebbe quello di caricare le immagini sul nostro sito WordPress già ottimizzate in modo da avere il lavoro già completo per questo primo aspetto. Per ottimizzare le immagini, a monte del caricamento in WordPress esistono svariati software o servizi da utilizzare direttamente online.
Per quanto riguarda i software c’è veramente l’imbarazzo della scelta, si possono utilizzare i software più blasonati come Photoshop o Gimp, oppure puntare su qualcosa di più leggero e veloce per il nostro scopo. Un programma che vale la pena citare è senza dubbio Caesium, che non sarà a livello di Photoshop o Gimp, ma per il nostro obiettivo fa egregiamente il suo lavoro. Caesium è a tutti gli effetti un compressore di immagini, il suo funzionamento è davvero semplice ed intuitivo, si può ad esempio ridurre il livello di compressione, oppure scalare l’immagine se troppo grande, cambiare estensione ecc..
Altro software degno di nota è FILEminimizer Picture, molto simile a Caesium ed offre le stesse funzionalità. Una volta compresse le immagini con Caesium, FILEminimizer Picture o qualsiasi altro software dalle medesime caratteristiche e funzionalità, possiamo farne l’upload sul nostro sito WordPress.
Per quanto riguarda gli strumenti online, anche qui abbiamo un bel pò di servizi che fanno al caso nostro. I vantaggi di utilizzare uno strumento online sono dati dal fatto che essi non necessitano installazione su PC, si usano direttamente online, gli svantaggi sono dovuti ai tempi di upload delle immagini per poterle processare. Tra i servizi più importanti abbiamo: Image Optimizer, Optimizilla.
Per quanto riguarda questa prima fase, possiamo estendere questo discorso a qualsiasi sito web, caricare immagini già compresse ed ottimizzate è una procedura sempre valida per qualsiasi sito web a prescindere da come esso sia stato realizzato.
Se abbiamo un sito WordPress, con centinaia di immagini caricate già da tempo, come possiamo risolvere?
Sicuramente non possiamo processarle tutte e reimportarle in WordPress, sarebbe un lavoraccio, a meno che, non abbiamo un sito relativamente giovane con una ventina di immagini al massimo, allora si potrebbe anche fare. Se, invece, abbiamo un sito invece ben avviato, con centinaia o migliaia di immagini, WordPress anche in questo caso ci viene d’aiuto. Esistono infatti dei plugin, che consentono di processare ed ottimizzare le immagini già presenti sul nostro sito WordPress!
Tra i plugin più importanti, adatti a questo scopo, ne cito due, entrambi validissimi: EWWW Image Optimizer (che ho usato personalmente su questo blog) e WP Smush.it.
Mi soffermo un attimo sul plugin EWWW Image Optimizer, in quanto l’ho trovato veramente fantastico.
Questo magnifico plugin, una volta installato, ci consente di ottimizzare tutte le immagini presenti sul nostro sito WordPress in un colpo solo. Una volta installato il plugin è già settato a dovere per poter lavorare, occorre solamente lanciarlo. Basta entrare infatti nella sezione Media di WordPress e cliccare sulla nuova voce Bulk Optimize. In questo modo tutte le immagini presenti sul sito saranno ottimizzate. Inoltre i caricamenti futuri, subiranno direttamente l’azione del plugin, questo significa che le immagini che caricheremo saranno automaticamente processate ed ottimizzate.
Tecniche aggiuntive per velocizzare il caricamento di una pagina
Come accennato nell’introduzione di quest’articolo, oltre ad ottimizzare le immagini, esistono anche altre tecniche per velocizzare il caricamento di una pagina, una di queste è il lazy loading delle immagini. Il lazy loading, che tradotto vuol dire caricamento “pigro”, è una tecnica che consente di caricare le immagini solo quando esse vengono raggiunte visivamente dall’utente mentre effettua lo scroll verso il basso della pagina. Questa tecnica riduce, a volte anche di molto, i tempi per di caricamento complessivo della pagina web. Infatti, verranno caricate solo le immagini nella parte alta della pagina visibili da subito all’utente, mentre quelle che si trovano a fondo pagina non impatteranno sui tempi di caricamento, verranno caricate soltanto se l’utente le raggiunge effettuando uno scroll verso il basso.
Anche in questo caso esistono diversi plugin WordPress che applicano il lazy loading, come ad esempio BJ Lazy Loading, ma il mio consiglio è quello di applicare il lazy loading manualmente, senza passare per i plugin. Perchè? Perchè ogni plugin che installiamo, appesantisce il nostro sito, installandolo manualmente aggiungeremo solo il codice necessario ai nostri scopi e nient’altro.
Un ottimo script basato su jQuery che offre il lazy loading è Lazy Load Plugin for jQuery.
Attenzione è un plugin jQuery e non un plugin WordPress! Una volta entrati sul sito effettuiamo il download del javascript, meglio se è in versione minified, nel mio caso ho scaricato il file con il nome jquery.lazyload.min.js
Per poter applicare il lazy loading sul nostro WordPress, dobbiamo accertarci che stiamo utilizzando jQuery. Se non abbiamo jQuery occorre caricarlo sul proprio sito WordPress, a tal proposito vi rimando a quest’articolo: 5 suggerimenti per usare jQuery in WordPress.
Una volta caricato jQuery, carichiamo il file jquery.lazyload.min.js via FTP nella cartella wp-includes/js del nostro sito WordPress ed importiamo lo script nell’head, subito dopo l’import di jQuery come da esempio in basso.
<script src="http://www.tuositowordpress.com/wp-includes/js/jquery.lazyload.min.js" type="text/javascript"></script>
Dopo inseriamo nella document ready di jQuery la chiamata al lazy load come segue:
<script type="text/javascript">
jQuery(document).ready(function($){
$("img").lazyload({
failurelimit : 10,
effect : "fadeIn"
});
});
</script>
Ottimizzazione SEO delle immagini
In ultimo, ma non per importanza, l’aspetto relativo al SEO per le immagini. Anche per le immagini ci sono degli accorgimenti a livello SEO che vanno assolutamente adoperati. Sarebbe un grave errore sottovalutare l’aspetto SEO per le immagini. Per fortuna WordPress ed i suoi plugin ci vengono incontro anche in questo caso. Vediamo come.
Non mi soffermerò molto, magari scriverò un articolo interamente dedicato a questa tematica, comunque, per le immagini un ruolo molto importante lo gioca il tag ALT. ALT sta per “testo alternativo” ed indica l’elemento HTML da associare alle parti non testuali dei contenuti, le immagini, per fornirne una descrizione, nel caso in cui non potessero essere visualizzate. In pratica il contenuto del tag ALT, viene visualizzato se l’immagine che lo contiene per qualche motivo non può essere caricata.
Non mi soffermo molto sull’argomento, magari scriverò un articolo separato più dettagliato, quello che c’è da sapere sul tag ALT delle immagini è che ci da molti vantaggi:
- rafforza il contenuto testuale dell’articolo;
- viene utilizzato da Google Immagini per classificare le immagini;
- viene interpretato dai lettori vocali per non vedenti.
L’importanza di questo attributo è quindi elevatissima. Proprio per non dimenticare questo aspetto, esistono dei plugin su WordPress che completano automaticamente i tag ALT e titolo delle immagini, come ad esempio SEO Friendly Images.
Ho impiegato diverso tempo per scrivere quest’articolo, se ti è stato d’aiuto e ti è piaciuto utilizza i tasti di condivisione. Grazie.
