Aumentare la velocità del tuo sito web: 5 facili modi
Aumentare la velocità del tuo sito web è fondamentale. E’ un parametro su cui tutti i webmaster ed i possessori di siti web devono prestare molta attenzione.
Perché?
Ovviamente un sito lento offre una pessima esperienza ai visitatori. Varie statistiche e studi dimostrano che, anche solo 1 secondo di ritardo, riduce le possibilità di conversione, fa perdere followers e fa calare il numero delle pagine visitate del sito web. Insomma, una vera tragedia per chi sviluppa business sul web.
Ma alla tragedia aggiungiamo anche un altra conseguenza negativa: la lentezza di un sito web influisce negativamente anche al Ranking SEO. Ormai dal 2010 Google ha inserito nel suo algoritmo il livello di performance di un sito web. Quindi sito lento, basse probabilità di comparire in prima pagina.
Per sapere se il tuo sito web è sufficientemente veloce, ci sono molti tools online. I più famosi sono:
Aldilà dei risultati che questi siti potrebbero dare, a mio parere la cosa più importante è l’esperienza che fa l’utente sul sito web. Infatti spesso ci propongono modifiche che sicuramente migliorerebbero le performance ma che toglierebbero funzionalità interessanti per il visitatore. Insomma, vale sempre la regola del buon senso.
Cosa possiamo fare concretamente per migliorare la velocità?
Ottimizzare le immagini
Le immagini di solito sono la causa principale di una scarsa velocità.
Spesso usiamo immagini di grandi dimensioni perché la qualità è importante. Ma occorre trovare il giusto equilibrio tra dimensione e qualità.
Ci sono diversi tools online che aiutano a ridurre e comprimere le immagini, come ad esempio tinypng.com. Anche se, secondo me, per poter ottenere buoni risultati ed avere il totale controllo è necessario avere un buon programma di editing installato sul nostro PC.
Alcuni sviluppatori e webmaster caricano le immagini in formato originale, quindi molto pesanti, per poi ridurle con l’ausilio dei CSS. Ottimi i risultati visivi ma nessun miglioramento dal punto di vista delle performance.
Meglio caricare le foto sul proprio sito già ottimizzate al meglio.
Browser Caching
Abilitando il Browser Caching, consentiamo il salvataggio temporaneo di alcuni dati sul computer del visitatore, in modo che non debba scaricare nuovamente le pagine quando ritorna sul sito web.
Un interessante articolo di Patrick Sexton ci spiega brevemente come implementare questa feature:
For most people, the way to ebable caching is to add some code to a file called .htaccess on your web host/server.
This means going to the file manager (or wherever you go to add or upload files) on your webhost.
The .htaccess file controls many important things for your site. If you are not familiar with the .htaccess file, please read my working with .htaccess article to get some know how before changing it.
The code below tells browsers what to cache and how long to “remember” it. It should be added to the top of your .htaccess file.
## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg “access 1 year” ExpiresByType image/jpeg “access 1 year” ExpiresByType image/gif “access 1 year” ExpiresByType image/png “access 1 year” ExpiresByType text/css “access 1 month” ExpiresByType text/html “access 1 month” ExpiresByType application/pdf “access 1 month” ExpiresByType text/x-javascript “access 1 month” ExpiresByType application/x-shockwave-flash “access 1 month” ExpiresByType image/x-icon “access 1 year” ExpiresDefault “access 1 month” ## EXPIRES CACHING ##
Save the .htaccess file and then refresh your webpage. Vai al post originale varvy.com
Abilitare la Compressione
Questo è un aspetto molto importante per poter aumentare concretamente la velocità del sito web. Infatti può ridurre la dimensione delle pagine sino al 80%.
La compressione però è un settaggio che va fatto solitamente sul server che ospita il vostro sito web. Alcuni provider permettono con l’interfaccia di gestione di attivare questo parametro.
Vi consiglio quindi, in prima battuta, di chiedere al supporto tecnico. Per me questa è la via più pulita ed è quella che ho sempre seguito.
Per verificare se la compressione è attiva, potete utilizzare questo Test.
Ottimizzazione CSS
I CSS è l’acronimo di Cascading Style Sheets, cioè i fogli di stile.
Quindi servono per definire il layout delle pagine HTML. Fanno riferimento ai font, i colori, margini etc etc.
Essi vengono caricati prima della pagina web, quindi se sono pesanti l’esperienza del visitatore risulterà compromessa da una lunga attesa.
Per diversi motivi può capitare che il nostro sito web faccia caricare CSS che in realtà non servono. Questo tool vi permette di capire quali CSS vengono effettivamente utilizzati sulla pagina esaminata.
Dal risultato possiamo capire quali sono utili e quali invece possiamo eliminare.
Anche se non riscontrate il problema sopra descritto, è sempre buona cosa cercare di ridurre le dimensioni dei CSS. Anche per questo ci sono diversi tools online tra cui i più famosi:
refresh-sf.com e csscompressor.com
Ottimizza l’ordine dei CSS e degli Script
Quando un browser carica una pagina web, inizia a scaricare tutte le cose che servono per visualizzare il contenuto, quindi le immagini, i CSS, gli script etc etc).
Purtroppo quando scarica gli script, smette di scaricare tutto il resto finché non ha finito. Quindi se abbiamo degli script che scaricano dati dalla rete, impiegherà molto tempo prima di passare ad altro.
Il consiglio è quello di cercare di limitare al massimo il loro utilizzo. Ma se dobbiamo inserirlo nella nostra pagina, allora mettiamolo in fondo! Come?
Il posto dove i CSS e gli script sono chiamati dall’HTML è nella sezione HEAD. Quindi ricordatevi di mettere per primi i CSS e per ultimi gli script.
Ovviamente ci sono altri elementi da prendere in considerazione per aumentare la velocità del tuo sito web e ci sono tantissimi tools che possono aiutarvi nel cercare di alleggerire il vostro sito web.
In questo breve articolo ho voluto focalizzare l’attenzione su questi 5 elementi, che ritengo molto importanti e strategici per ottenere il risultato desiderato.
Featured Image from here.
