Perchè velocizzare un sito web?
Per l’usabilità, caratteristica importante per chi il sito lo deve navigare e per il page rank, importante per il posizionamento sui motori di ricerca.
Un sito che carica la proprie pagine lentamente, costringe l’utente ad aspettare parecchi secondi, un lasso di tempo che induce la maggior parte delle persone a chiuderlo prima che venga visualizzato completamente, con la conseguente perdita di una possibile conversione del soggetto, da visitatore a cliente.
La velocità di caricamento di un sito inoltre, è anche un fattore di ranking per Google, il motore di ricerca più usato del mondo. Perdere preziosi punti di ranking a causa della lentezza del sito, vuol dire perdere la possibilità di migliorare la proprie posizione sui risultati di ricerca e, conseguentemente, perdere possibili clienti.
Le ragioni per velocizzare il caricamento di un sito web possono essere diverse ma l’obiettivo è sempre lo stesso: non perdere le opportunità di conversione.
ANALISI VELOCITÀ DELLE PAGINE DEL SITO
Attraverso l’uso della Search Console di Google, possiamo verificare se il nostro sito ha dei margini di miglioramento in termini di velocità di caricamento delle sue pagine. Il tool “Page Speed Insights“, ci permette anche di vedere su quali parametri possiamo agire per velocizzare un sito web, sia in versione desktop che in versione “mobile”. Basterà inserire la URL della pagina da analizzare e lo strumento ci restituirà un punteggio in base alla velocità del sito, insieme a preziosi suggerimenti su come velocizzarlo ulteriormente.
COME VELOCIZZARE IL SITO
Una volta analizzata la velocità del sito web, bisogna andare a migliorarla utilizzando i suggerimenti del tool utilizzato. Di solito i principali fattori che causano la lentezza di un sito sono:
- Codice sporco o disordinato
- Immagini non ottimizzate
- Compressione Gzip disabilitata
- Cache disabilitata
- Files Js e Css esterni che rallentano il caricamento della pagina
CODICE “PESANTE” O DISORDINATO
Per codice pesante, intendo del codice html in cui siano presenti al suo interno elementi Java Script e Css che potrebbero essere scritti in un file esterno a parte. Se rientrate in questa casistica, provvedete a spostare le istruzioni css e Js sui file specifici (es. style.css e script.js), facendo attenzione anche ad assegnare correttamente i selettori. Aprite il codice html delle vostre pagine ed inserite il richiamo a questi files nella seguente maniera:
- <link rel=”stylesheet” href=”style.css”> PER I CSS
- <script type=”text/javascript” src=”script.js”> PER I JAVA SCRIPT
Una volta fatto questo, “minimizziamo” il codice css e Js attraverso degli strumenti appositi. Io utilizzo CSS Compressor e Minifyjs. Inserisco il codice nell’apposita casella e, una volta minimizzato, lo copio e lo sovrascrivo ai files css e js esistenti.
Minimizzare il codice comporta una maggiore velocità di lettura dei files da parte del browser e quindi una minore attesa del caricamento della pagina sullo schermo.
LE IMMAGINI NON OTTIMIZZATE
Le immagini caricate su un sito dovrebbero essere sempre leggere, ovvero di pochi kb e delle dimensioni necessarie. Inutile andare a caricare una foto larga 1200 px quando poi lo spazio per visualizzarla sul sito è di 640 px. Il lavoro che dovrebbe fare il browser è quello di caricare la foto a 1200 px e poi ridurla a 640, prima di visualizzarla, con conseguente spreco di risorse che va a svantaggio della velocità di caricamento della pagina. Prima di inserire un’immagine, provvediamo a ridurla alle dimensioni necessarie con un software di grafica apposito, tipo Gimp o Photoshop (oppure consiglio per i utentii meno esperti il prodotto Caesium, per comprimere e ottimizzare le immagini in modo massivo).
Il peso dell’immagine deve essere più basso possibile, cercando sempre un punto di incontro tra questo elemento e la nitidezza. Per ridurre il peso delle immagini in Jpg può essere utile il software Jpeg mini che comprime le foto fino a 5 volte, senza alterarne eccessivamente la leggibilità. Questo software è un trial che si può utilizzare gratuitamente per 20 foto al giorno. Per quanto possibile infine, cercate di delegare la visualizzazione delle immagini al vostro foglio di stile cercando di evitare di inserirle direttamente nel vostro file html.
COMPRESSIONE GZIP
Attraverso la compressione gzip è possibile migliorare notevolmente la velocità di caricamento delle pagine di un sito web. La compressione gzip riduce il “peso” delle pagine da caricare e per questo, è uno degli accorgimenti più efficaci da mettere in pratica per raggiungere il nostro scopo. Il funzionamento è uguale a quello del famoso programma winzip o altri simili. Il file viene compresso e poi dato in pasto al browser, il quale lo decomprime e ne restituisce il contenuto.
Per mettere in pratica la compressione gzip si deve avere un hosting che la renda disponibile nei suoi servizi. Verificato questo, bisogna andare a mettere mano al file .htaccess e implementarlo con queste istruzioni:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
In pratica ordiniamo di comprimere tutti i files html, xml, css, rss e Js presenti sul sito. Una volta caricato sul server il files .htaccess così modificato, andiamo a controllare se la compressione gzip è attivata tramite questo tool di verifica online. L’esito è positivo? Complimenti, il vostro sito da ora è più veloce. Il test è negativo? Contattate il vostro hosting e verificate se la compressione gzip è supportata ed attivata.
ABILITARE LA CACHE
Abilitando la cache del browser, facciamo in modo che i contenuti del nostro sito web, una volta visualizzati, vengano memorizzati dal browser e siano pronti per essere restituiti rapidamente in occasione di una nuova visita. La cache però deve essere abilitata tramite delle istruzioni sul solito file .htaccess.
Innanzi tutto verifichiamo che l’hosting che ospita il sito abbia abilitati i moduli mod_headers (che specifica le impostazioni di controllo della cache e su quali tipi di file agiscono) e mod_expires (che specifica il tempo di scadenza della cache per alcuni tipi di file specifici). Poi apriamo con un editor di testo il file .htaccess e aggiungiamo queste istruzioni:
#Cache su mod_header
<IfModule mod_headers.c>
# durata della memoria cache 1 mese
<FilesMatch “\.(js|css|pdf|txt|html|htm|jpg|jpeg|png|gif|ico)$”>
Header set Cache-Control “max-age=2419200″
</FilesMatch>
</IfModule># Cache su mod_expires
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A604800
ExpiresByType image/x-icon A29030400
ExpiresByType application/pdf A2419200
ExpiresByType image/gif A2419200
ExpiresByType image/png A2419200
ExpiresByType image/jpg A2419200
ExpiresByType image/jpeg A2419200
ExpiresByType text/css A2419200
ExpiresByType application/x-javascript A216000
ExpiresByType text/javascript A216000
ExpiresByType text/plain A216000
ExpiresByType text/html A300
<FilesMatch “\.(pl|php|cgi|spl|scgi|fcgi)$”>
ExpiresActive Off
</FilesMatch>
</IfModule>
Cosa abbiamo fatto? Semplicemente abbiamo detto al browser di conservare le informazioni circa le pagine del nostro sito per un mese ( 2419200 secondi, ma avremmo potuto indicare anche 1 anno). Al termine del periodo indicato la cache viene svuotata automaticamente. Durante quel mese il browser conserva tutte le informazioni necessarie per restituire a video le pagine del nostro sito, non dovendole ricaricarsele ogni volta da capo. Il tutto a vantaggio della tanto ricercata velocità.
Se il vostro sito è stato realizzato con WordPress o Joomla! e non volete mettere mano al codice sul file .htaccess potete sfruttare gli strumenti atti allo scopo messi a disposizione da questi due CMS. Per WordPress il plugin più performante ed utilizzato è WP Supercache. Per Joomla invece è sufficiente sfruttare i comandi di impostazione della cache incorporati nativamente nel CMS.
FILES JSS E CSS ESTERNI CHE RALLENTANO IL CARICAMENTO DELLA PAGINA
Quando il browser visualizza una pagina web, deve caricare tutta una serie di files che ne regolano la grafica ed il funzionamento. Le chiamate ai social per far comparire i widget ad esempio, sono uno di questi casi. Per quel che li riguarda, cercate di minimizzare al massimo la presenza di questi elementi, riducendoli all’indispensabile. Anche il caricamento dei nostri files css e Js esterni di cui abbiamo parlato sopra, comportano un rallentamento nei tempi di visualizzazione delle pagine. Per questo si consiglia di ridurne al minimo il numero, cercando di accorpare più codice possibile in un unico file.
Ora che abbiamo acquisito tutte le informazioni necessarie per aumentare la velocità di un sito web, possiamo migliorare la qualità dell’esperienza “utente” e aumentare il nostro punteggio di page rank.
VELOCIZZARE WORDPRESS
La strada più facile, è utilizzare degli appositi plugin WordPress per velocizzare i siti web. Sappiamo anche però che per molti versi, sono loro stessi, con il loro codice ricco di css e javascript che rallentano i tempi di caricamento delle pagine. Tuttavia in questo caso il gioco vale la candela. Per chi invece vuole divertirsi a smanettare con il file .htaccess, e fare a meno dei plugin può guardare quanto scritto sopra.
Ecco i plugin che consiglio:
- W3 Total Cache
- WP Smush (o altro plugin per diminuire il peso delle immagini)
- Async JS and CSS
Consiglio di attenervi alle relative guide per la configurazione adeguata al vostro sito WordPress.