Il tuo sito web è pronto ad accogliere i tuoi visitatori?
Per ottimizzare un sito dal punto dell’efficienza sono sicuramente necessarie delle competenze tecniche abbastanza spinte, ma quello che vi condivido oggi è un piccolo trick che a volte riesce a far risparmiare anche 1 o 2 secondi sul caricamento medio di una pagina.
Una ricerca Google/SOASTA del 2017 riporta come il tasso di Bounce Rate, ovvero il numero di persone che arrivate sul sito lo abbandonano senza interagire in nessun modo, cresce a dismisura già a partire da un tempo di caricamento superiore ai tre secondi. Arrivati a 5, 6 secondi, il tasso di abbandono sale addirittura del 120/130% rispetto a un sito che carica in 1 secondo, quindi parliamo effettivamente di percentuali altissime.
Chi abbandona un sito per una cattiva esperienza, inoltre, è molto difficile che ci ritorni in futuro.
E allora come fare?
La scelta migliore è sicuramente quella di rivolgersi ad un’agenzia digitale con forti compete in SEO tecnica, che possa occuparsi anche dell’analisi dei problemi di efficienza e nella loro risoluzione.
Tuttavia, ci sono dei piccoli adeguamenti che possono influire anche fortemente sulle prestazioni del tuo sito web, con uno sforzo nemmeno troppo gravoso, e quello che voglio condividerti oggi è uno di questi:
L’ottimizzazione delle immagini per le prestazioni
Un’immagine vale più di mille parole, ma pesa anche più di mille parole! Le immagini oggi rappresentano, in media, circa un quarto del peso di una pagina web, e sono numerosissime, tanto che a volte, con la sola ottimizzazione delle immagini, si riesce a diminuire di diversi secondi il caricamento di una pagina.
Ma cosa intendiamo con ottimizzazione delle immagini?
In verità, molteplici cose, alcune delle quali molto facili e veloci, ma a cui non facilmente si pensa, vediamole una per una:
1. Carica immagini con la risoluzione giusta
Questo è uno degli aspetti più sottovalutati nella creazione di contenuti per il web, ma che ha, è il caso di dirlo, un peso enorme in termini di prestazioni. Siamo abituati scattare le nostre foto, oppure a scaricarle dal sito Stock di turno, e caricarle direttamente nel nostro articolo, saltando una domanda fondamentale: che risoluzione avrà questa immagine nella pagina definitiva? Questo unico momento di ragionamento dovrebbe essere sufficiente a farci rendere conto che è inutile caricare la nostra foto di Doug the Pug a 5120 pixel per lato, se poi sarà mostrata a 800px nell’articolo: quell’immagine peserà molto più del dovuto, per portare con sé informazioni di colore che non servono all’utilizzo finale.
2. Carica immagini con l’estensione giusta e la giusta compressione
Hai mai pensato all’impatto del formato delle immagini? Esistono diverse estensioni che possiamo utilizzare per diversi scopi. Per non andare troppo nel difficile non parlerò dei formati di nuova generazione come Webp, avif e jpeg2000, concentriamoci invece sui classici formati tradizionali: jpeg, png e gif.
GIF
Chi come me ha vissuto internet negli anni ‘90, ricorderà come era composto al 90% di GIF animate. E l’uso migliore che si può fare delle GIF è proprio quello: tra i tre formati più diffusi è l’unico che supporta le animazioni. Le GIF sono immagini a 8 bit, quindi supportano un massimo di 256 colori, supportano la trasparenza, e utilizzano una compressione lossless, cioè senza perdita di dati.
PNG
Come le GIF, sono pensate per supportare una compressione Lossless, ma oggi possono sfruttare anche degli algoritmi Lossy. Il formato supporta la trasparenza e può essere a 8 o 24 bit, quindi supportare 256 oppure 16 milioni di colori. È il formato ideale quando si vuole tutelare l’integrità dei dettagli, o mostrare immagini trasparenti senza limitazioni nell’uso dei colori, al costo però di immagini mediamente molto pesanti.
JPEG
Jpeg o jpg, è sicuramente ancora il re indiscusso delle estensioni per le immagini. Pensato per compressioni Lossy, e quindi con perdita di dati, permette delle riduzioni di peso anche estreme, ma al costo della qualità dell’immagine. Il segreto sta nel trovare il giusto bilanciamento tra qualità e peso. Spesso con una compressione media togliamo una serie di informazioni colore che l’occhio umano a malapena riesce a percepire, ma con il risultato di dimezzare il peso delle immagini.
Come avrai capito, nella scelta del formato, è compresa anche la scelta del tipo di compressione, questione non di poco conto, e che all’inizio può sembrare ostica, ma in genere in pochi tentativi si riesce a trovare la strada giusta per noi.
3. Rimuovi le informazioni superflue
Le immagini possono portare con sé dei metadati [Exif, Xmp, Iptc], dati non presenti visivamente sull’immagine stessa, ma come informazioni testuali inserite nel file immagine. Possono essere creati dalla fotocamere, dal programma di grafica, o inseriti con dei programmi appositi, e servono per dare informazioni aggiuntive sul file che solitamente sono inutili nell’utilizzo che si fa delle immagini sul web.
Ok la teoria, ma come si fa ad ottimizzare le immagini?
Se devi ritagliare una foto, scegliere l’algoritmo di compressione, rimuovere i metadati, è sufficiente qualunque programma di elaborazione immagini, o addirittura un semplice visualizzatore di immagini come IrfanView [che ti consiglio vivamente di sostituire al visualizzatore immagini standard del tuo computer]. Se però hai necessità di compiere le stesse azioni su molte immagini allo stesso tempo, farlo manualmente potrebbe richiedere tempi impossibili: non di rado in agenzia ci troviamo a dover ottimizzare migliaia di immagini per siti presenti su internet da molti anni. In questi casi cosa si fa?
Si usa un editor batch. Personalmente ti consiglio XnConvert, che ti permette di fare azioni di massa su qualunque tipo di file immagine: basta dargli in pasto tutte le immagini da modificare, selezionare le operazioni da effettuare, il formato di output [e le impostazioni di compressione], e infine dargli in pasto tutte le immagini da modificare. Fatto.
Il tuo sito ringrazierà!
Per oggi è tutto, alla prossima!