WordPress: ottimizzare il caricamento delle immagini

Ottimizzare le immagini per il proprio sito web è una necessità tutt'oggi irrinunciabile, nonostante la diffusione di connessioni sempre più veloci. I comuni formati, infatti, sono i principali responsabili del rallentamento nel caricamento delle pagine. Di norma, l'utente attende tra i 3 e i 6 secondi prima di abbandonare il sito e recarsi sui lidi più performanti della concorrenza. Non è però tutto, poiché la fruizione oggi diviene sempre più mobile: per quanto potenti possano risultare smartphone e tablet, la maggior parte dei consumatori ricorre ad abbonamenti con monte traffico mensilmente limitato, la presenza di file troppo pesanti potrebbe quindi rappresentare un deterrente alla navigazione. Quali pratiche possono essere adottate, di conseguenza, su un CMS tanto diffuso quanto WordPress?

Non esiste una ricetta che possa essere universalmente utile agli utenti WordPress, poiché molto dipende dagli scopi e dalle necessità del proprio sito. Di seguito, qualche consiglio utile.

Ottimizzare prima dell'upload

L'errore più frequente, in termini di riduzione del peso delle immagini, è caricare formati e file non ottimizzati sul server, pensando di poter poi procedere con i classici comandi inclusi in WordPress. Alcuni utilizzatori (e si spera che la cosa non valga anche per parte degli sviluppatori) credono immotivatamente che ridurre larghezza e altezza tramite i valori associati a "width" e "height" - inseriti nelle finestre di dialogo di WordPress o direttamente via "img src" nell'HTML - sia sufficiente per abbassare anche il peso dell'immagine.

In realtà, questa soluzione influisce semplicemente sulla visualizzazione, ma il file che viene richiamato è quello originale. La soluzione più intelligente, di conseguenza, è ritagliare e alleggerire i file prima del caricamento, impostandoli con un comune editor fotografico alla risoluzione necessaria.

Rimuovere le informazioni inutili

Le immagini digitali, in qualsiasi formato vengano salvate, incorporano solitamente un gran numero di informazioni aggiuntive, non immediatamente visibili né utili all'utente. Oltre ai classici dati exif, che permettono di riconoscere la macchina fotografica o il software impiegato per la creazione dell'immagine, la gran parte delle applicazioni di editing aggiungono dei metadati, che contribuiscono ad aumentare il peso finale dello scatto.

Rimuoverli permetterà di recuperare KB preziosi e, per farlo, si può procedere sia manualmente che usando dei plugin per WordPress. Uno dei più famosi è Smush, pensato sia per eliminare informazioni non volute salvate nell'immagine che per aumentarne la compressione senza perdere in termini di qualità.

Attenzione anche alla scelta del formato per le immagini rasterizzate: si evitino quelli che comportano una minima o assente compressione, preferendo sempre i classici JPG e PNG, ma anche il nuovo e versatile HEIF.

CDN e Lazy Loading

Quando si parla di caricamento delle immagini, a influire sulle prestazioni non è soltanto il peso dei singoli file, ma anche il modo con cui questi vengono raggiunti e distribuiti in rete. Per ottenere maggiori performance dalla propria installazione WordPress è ideale ricorrere a un CDN. I Content Delivery Network conservano una cache dei propri file multimediali, affinché questi siano raggiungibili all'utente dalla postazione geograficamente più vicina. Questa soluzione riduce i tempi d'attesa, la latenza e, naturalmente, evita che le immagini pesino eccessivamente sui contenuti ospitati sul server principale.

Un altra alternativa può essere rappresentata dalle tecniche di lazy loading, una strategia di progettazione basata sul caricamento progressivo delle immagini, solo quando l'utente ne ha effettivamente bisogno a seconda della porzione di sito visualizzata nella finestra del browser. I file immagine non verranno quindi tutti richiamati all'apertura del sito, bensì man mano che l'utente effettua lo scrolling della pagina verso il basso. WordPress offre numerosi plugin a questo scopo, tra cui BJ Lazy Load.