Lo sapevi che il 50% dei visitatori del tuo sito desidera visualizzare l’intero contenuto della pagina selezionata in meno di 2 secondi? Se poi consideri che la maggior parte di essi in genere abbandona i siti che impiegano 3 o più secondi a caricare le proprie pagine ti rendi conto di quanto sia importante la velocità di caricamento.
Per fortuna è possibile evitare la fuga di potenziali clienti semplicemente ottimizzando il proprio sito e rendendolo più veloce.
Per raggiungere questo obiettivo è imperativo agire sulle immagini ottimizzandole. Seguono alcuni consigli su come procedere e su quali strumenti utilizzare.
Comprimi le immagini
La prima cosa da fare è ridurre le dimensioni delle immagini utilizzando un editor prima che esse vengano caricate. Come fare se non si dispone del software adatto o se le immagini sono state già caricate sul sito WordPress?
Basta semplicemente utilizzare un plug-in di compressione che ne riduca il peso senza, però, intaccarne la qualità. Un ottimo plug-in è EWWW Image Optimizer.
Una volta attivato potrai ottimizzare le immagini in fase di upload in maniera del tutto automatica. EWWW può ottimizzare anche quelle già caricate in precedenza.
Lazy Load (Caricamento pigro)
Per Lazy load si intende il download delle immagini solo quando necessario.
Se il tuo sito ha molte immagini, la sola ottimizzazione può non essere sufficiente. La soluzione che prospettiamo contempla l’uso di uno script che mostri (i.e. scarichi) le immagini solo quando necessario, magari quando si continua a scorrere la pagina verso il basso. Anche in questo caso esiste un utile plug-in chiamato Lazy Load.
Utilizza il formato giusto
In fase di editing delle immagini occorre spesso trovare un compromesso tra la qualità dell’immagine ed il suo peso. Scegliere il formato giusto può aiutarti a creare immagini di alta qualità dal peso contenuto.
Ecco una lista dei formati più utilizzati:
- Jpeg adotta un metodo di compressione delle immagini che non comporta la perdita delle informazioni (i.e. lossless). La scelta giusta per foto caratterizzate da molteplici differenze cromatiche.
- PNG è consigliato per immagini semplici con aree trasparenti
- GIF ideale per immagini molto piccole con pochi colori; Ad esempio clip art, grafici, ecc.
Ecco una serie di strumenti online gratuiti che possono aiutarti ad ottimizzare le immagini senza comprometterne la qualità:
Previeni l’hotlinking
Cos’è l’hotlinking? L’hotlinking è l’inserimento di link di grosse dimensioni provenienti da altri siti web. Una procedura che comporta lo sfruttamento (in termini di banda) del server che ospita le immagini. Ogni qualvolta, quindi, che qualcuno inserisce un link sul proprio sito/blog che richiama le immagini caricate sul tuo server, il server perde banda utile e la velocità di caricamento del tuo sito ne risente.
Per prevenire l’hotlinking occorre aggiungere il seguente codice al file .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?iltuositoweb.it [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]
Ricordarsi di cambiare iltuositoweb.it con il nome del tuo sito/blog.
Utilizza fogli di stile a cascata (i.e. CSS) al posto delle immagini
E’ possibile creare alcune forme come, ad esempio, rettangoli con gli angoli arrotondati con effetto ombra utilizzando il ben più leggero codice CSS.
L’importante è controllare la compatibilità con i vari browser.
