Come velocizzare un sito web

come velocizzare un sito web

Ci sono almeno due ottime ragioni per velocizzare un sito web: usabilità e page rank. La prima voce è importante per chi il sito lo deve navigare. La seconda è 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.

Alla fine 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. Vogliamo vedere come si velocizza un sito internet? Let’s Go!

ANALIZZARE LA VELOCITA’ DI CARICAMENTO DELLE PAGINE DI UN 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.

PageSpeed-Insights della Search Console di Google

Schermata iniziale del Tool PageSpeed Insights

Altro strumento molto comodo, che personalmente utilizzo tantissimo, è Seorch, un tool online davvero completo per esaminare, oltre alla velocità del sito, anche altri parametri SEO. Seorch è una sorta di bussola, molto efficace per mettere in pratica le correzioni da fare su un sito web.

seorch.eu tool per analizzare la seo di un sito web

La schermata iniziale di Seorch

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

codice-htmlPer 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

immagine troppo grandeLe 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.

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

comprimereAttraverso 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 (Grazie a Karen per la segnalazione). 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.

Readers Comments (12)

  1. Ottimo, ma mi chiedo un cosa riguardo alla cache, come posso risolvere questo messaggio di Google Page Speed:

    Utilizza la memorizzazione nella cache del browser per le seguenti risorse memorizzabili nella cache:
    https://www.google-analytics.com/analytics.js (2 ore)

    Il resto lo comprimo, ma il codice analytics come faccio?!

  2. Ciao Flavio,
    applicando le istruzioni per la compressione gzip , tutto ok. Invece quando vado ad inserire nel file htaccess le righe relative all’abilitazione della cache il sito mi restituisce Server Error 500 ???

    • Ciao.
      Di solito succede se c’è un errore nella scrittura sul file htaccess o se il server non ha la funzione abilitata. Prova innanzi tutto ad inserire le istruzioni all’inizio del file (copia ed incolla). In seconda battuta senti il tuo hosting.

  3. Thanks for such a kind info now my website is lil bit faster than before
    Keep it up

  4. Ciao Flavio come al solito ottimo articolo che offre molti spunti interessanti di discussione oltrché fornire utilissimi consigli; mi piacerebbe avere una tua opinione sui “famigerati” plug-in di caching e ottimizzazione come wp-supercache e affini; francamente li trovo un arma a doppio taglio da utilizzare con parsimonia e solo se strettamente necessario; ovvero solo se il gioco vale la candela; questo perchè molto spesso danno problemi di malfunzionamento e incompatibilità con altri plug-in che fanno un uso intenso di javascript quindi nel valutare il rapporto costo/beneficio spesso decido di non utilizzarli …cosa ne pensi e cosa ne pensi di cloudflare?

    • Ciao. La penso esattamente come te. NOn sempre utilizzare un plugin per la cache è la scelta ottimale. Io sinceramente non li uso quasi mai. Cloudflare è ottimo, potendo essere attivato e gestito lato server.

  5. Ciao Flavio, ultimamente il sito internet che ho implementato è molto lento poiché, avendo inserito un plugin di facebook al suo interno (che fino a settimana fa non dava problemi di velocità), i relativi javascript e css che genera mi stanno rallentano il caricamento. E’ probabile che facebook stesso abbia fatto degli aggiornamenti per cui si crea questo problema ma non so come risolverlo…suggerimenti?

    • Ciao Fabio. Scusa se ti rispondo solo oggi.
      Ho testato il tuo sito e si…. il plugin fb causa un grande rallentamento.
      Consigli:
      Prova ad attivare compressione GZIP
      Prova a servirti di un servizio CDN
      Se non migliora, cambia plugin. Per Fb ce ne sono tantissimi.
      E’ un peccato perché per il resto andrebbe alla grandissima.
      Saluti

Leave a comment

Il tuo indirizzo email non sarà pubblicato.


*