Come migliorare la velocità dei siti web

6 aprile 2017

Come migliorare la velocità dei siti web

Questo articolo è rivolto a chi è curioso di verificare lo stato del proprio sito web e migliorarlo. Alcune delle soluzioni consigliate sono accorgimenti utili per chi si occupa di inserire i contenuti nel sito web (testo e immagini) mentre altre richiedono una conoscenza più tecnica.

Con l’avvento delle connessioni ad alta velocità, come la fibra ottica per la rete fissa o il 4G per le reti mobili, parlare di come migliorare la velocità di caricamento dei siti web può sembrare un problema secondario. Ma una cosa è poter scaricare velocemente grandi quantità di dati (es. file, video o foto ad alta risoluzione) un’altra è far sì che il browser visualizzi velocemente la pagina web dal momento in cui viene chiamata.

La velocità di caricamento delle pagine continua ad essere una delle caratteristiche salienti per la realizzazione dei siti web ed è fondamentale per il SEO (search engine optimization).

Perché un sito web deve essere veloce?

  • un caricamento veloce delle pagine permette una migliore fruibilità del sito web, mentre le lunghe attese per la visualizzazione dei contenuti allontanano gli utenti;
  • i motori di ricerca, in particolare Google, richiedono che i siti web siano veloci altrimenti li penalizzano, facendo perdere loro la visibilità all’interno della SERP e quindi nei confronti dei siti concorrenti;
  • una pagina web leggera (intesa come dimensione in KB) permette all’utente che naviga il sito web di risparmiare sul consumo della banda internet, in particolare quando navigano con tariffe internet mobili, che prevedono un limite massimo mensile di traffico.

L’ottimizzazione del sito web è importante quanto il design e i contenuti.

Da cosa è composta una pagina web?

Per capire quali sono i fattori che influenzano la velocità del sito, bisogna conoscere gli elementi che compongono una classica pagina web. Ci sono:

  • il codice HTML che definisce la struttura (gabbia) della pagina,
  • il CSS che definisce il design,
  • il contenuto testuale,
  • le immagini e i video,
  • il javascript che permette di aggiungere delle funzionalità dinamiche (es. la condivisione sui social).

Cosa rallenta un sito web?

Il CSS, il javascript e le immagini o i video.
Sono file esterni che vengono incorporati nella pagina quando viene caricata dal browser. Spesso alcuni di essi non risiedono nello stesso server del sito web.

Maggiore è il numero di chiamate esterne, maggiore sarà il tempo richiesto per il caricamento.

Le immagini e i video.
Sono gli elementi che incidono maggiormente sulla dimensione della pagina (in KB) e rappresentano, solitamente, più del 50% del peso totale della pagina e di tutti i file caricati.

I componenti javascript.
Elementi presenti per aggiungere funzionalità al sito ma che possono rallentare il rendering della pagina e quindi ritardare la visualizzazione dei contenuti.

Il server.
Dove è situato l’hosting del sito web. Se le risorse sono limitate, possono influire sui tempi di risposta e quindi sulla velocità di caricamento della pagina.

Come verificare la velocità di un sito web?

Esistono vari strumenti che ci permettono di analizzare le nostre pagine web e che ci suggeriscono gli interventi che possiamo effettuare al sito per ottimizzarne i contenuti e diminuire, di conseguenza, i tempi di caricamento. Sono dei servizi online, gratuiti o a pagamento, molto semplici da utilizzare in quanto è sufficiente inserire la URL della pagina da ottimizzare ed attendere che il sistema completi l’analisi.

Io faccio uso di tre di questi strumenti:

Ma il riferimento principale è PageSpeed Insight di Google, per ovvi motivi: se si ha un alto punteggio nel test ci assicuriamo che Google non penalizzi la nostra pagina nei risultati della SERP per colpa della velocità di caricamento. Ovviamente essere nelle prime posizioni tra i risultati è dipeso da diversi fattori e la velocità del sito è solo uno di questi.

Ora vedremo quali sono le caratteristiche analizzate da Google PageSpeed Insight e come rispettare (quando possibile) i parametri richiesti.

Migliorare la velocità della pagina web

Una volta inserito la URL della pagina che vogliamo testare, Google PageSpeed Insight ci presenta un riepilogo dei suggerimenti e assegna un punteggio da 0 a 100 alla pagina. Un punteggio superiore a 80 è già un buon compromesso, perché vedremo che ottenere 100 risulterà molto difficile. Questo è un esempio di una pagina web del mio sito:

I 10 suggerimenti che Google PageSpeed Insight propone sono:

  1. Ottimizza immagini
  2. Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
  3. Dai la priorità ai contenuti visibili
  4. Sfrutta il caching del browser
  5. Minimizza HTML
  6. Minimizza CSS
  7. Minimizza JavaScript
  8. Abilita la compressione
  9. Evita reindirizzamenti delle pagine di destinazione
  10. Riduci tempo di risposta del server

1. Ottimizza immagini

Come anticipato in precedenza, le immagini sono generalmente gli elementi che contribuiscono ad aumentare considerevolmente il peso della pagina web. Negli attuali siti web si fa un grande uso di immagini, spesso di grandi dimensioni, quindi è importante ottimizzarle.

Non inserite foto o immagini troppo grandi: per esempio se il sito utilizza delle JPG con un formato massimo di 1280 pixel di larghezza, rispettatelo.

Imparate a comprimerle: tutti i programmi di fotoritocco permettono, durante la fase di salvataggio, di selezionare la percentuale di compressione. Si può diminuire il peso dell’immagine anche del 30-40% senza perdere la qualità della foto. Fate delle prove.

2. Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Il browser inizia a visualizzare la pagina web una volta scaricati i contenuti principali ma, se viene data priorità prima ai file javascript e css, attende il caricamento di questi file ritardandone la visualizzazione. Google consiglia di “rimandare” il caricamento dei file esterni dando la precedenza ai contenuti.

Per effettuare questa ottimizzazione si possono spostare le chiamate dei file CSS e del Javascript in fondo alla pagina, come indicato nel punto 3. Potrebbe non essere sufficiente ed in alcuni casi si devono fare interventi mirati in base agli script utilizzati (google analyitcs, adwords, facebook, etc.).

3. Dai la priorità ai contenuti visibili

Questa soluzione è legata all’argomento del punto 2 e possiamo attuarla senza particolari interventi di programmazione, perché si devono spostare le chiamate ai file javascript in fondo alla pagina, prima della chiusura del tag </body>, invece di effettuarle all’interno del tag <head>.

Un esempio di chiamata javascript è questa:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

4. Sfrutta il caching del browser

Il browser, una volta scaricate tutte le informazioni della pagina, salva tutti i file (css, javascript, immagini, etc.) nella sua cache. Se entro breve tempo visualizziamo nuovamente quella stessa pagina o se visualizziamo delle pagine con dei file comuni (come le immagini, i CSS o i file Javascript), il browser evita di riscaricare tutti i contenuti andando a recuperare quelli presenti nella cache, risparmiando del tempo nel caricamento. Quando la cache viene svuotata, nell’accesso successivo vengono riscaricati tutti i file.

Tramite delle regole, che possiamo andare ad inserire nel file .htaccess presente nella root del sito (nel caso di hosting Linux), si possono gestire i tempi di mantenimento dei file nella cache del browser. Assegnando dei limiti medio lunghi, renderemo più veloce il caricamento del sito per tutti quegli utenti che lo visitano frequentemente.

Per questa operazione è necessario avere una conoscenza dell’uso dei software FTP per accedere all’hosting del sito web. Il file .htaccess è un file di testo ma degli errori commessi in fase di modifica possono portare al malfunzionamento del sito web, quindi è importante eseguire sempre un backup del sito prima di qualsiasi intervento.

Queste sono le regole da inserire in fondo al file .htaccess:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault “access plus 1 month”
</IfModule>

# Set up caching on media files
<FilesMatch “\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$”>
ExpiresDefault A29030400
Header append Cache-Control “public”
</FilesMatch>

# Set up caching on media files
<FilesMatch “\.(gif|jpg|jpeg|png|swf)$”>
ExpiresDefault A604800
Header append Cache-Control “public”
</FilesMatch>

# Set caching on commonly updated files
<FilesMatch “\.(xml|txt|html|js|css)$”>
ExpiresDefault A604800
Header append Cache-Control “proxy-revalidate”
</FilesMatch>

# Force no caching for dynamic files
<FilesMatch “\.(php|cgi|pl|htm)$”>
ExpiresActive Off
Header set Cache-Control “private, no-cache, no-store, proxy-revalidate, no-transform”
Header set Pragma “no-cache”
</FilesMatch>

Il tempo di validità dei file nella cache è espresso in secondi ed è il numero presente dopo “ExpiresDefault A…”). Come si può intuire dal codice, sono stati espressi tempi differenti per le varie tipologie di file, in base alla loro frequenza di aggiornamento. Questo perché se un file viene aggiornato spesso e il tempo di validità della cache è alto, si rischia che l’utente veda la versione precedente.

5. Minimizza HTML

Questa operazione può essere fatta da chi realizza il sito web e consiste nel minimizzare il codice HTML togliendo tutti i contenuti inutili, come gli spazi bianchi utilizzati per gli allineamenti del codice e i commenti HTML.

Esistono degli strumenti che permettono di minimizzare il codice e che sono adatti per minimizzare anche i file CSS o Javascript, con un risparmio medio del 30-40% del peso di ogni file: https://htmlcompressor.com/compressor/

6. Minimizza CSS

Anche in questo caso vale l’operazione eseguita nel punto 5, cioè minimizzare i file. Inoltre si possono accorpare i vari CSS in un unico file, in modo da diminuire le chiamate ai file esterni che il browser deve effettuare durante il caricamento della pagina.

7. Minimizza Javascript

Per i file Javascript possiamo effettuare la stessa operazione indicata per i CSS: minimizzazione e accorpamento dei file. Nel caso di alcune librerie, come il file jquery.min.js, che sono utilizzate da molti siti web, si preferisci caricarle separatamente perché possono essere già presenti nella cache del browser, evitando quindi di riscaricarlo.

8. Abilita la compressione

L’abilitazione della compressione forza il server a comprimere tutti i file – come uno zip – prima di inviarli al browser, che li scompatterà una volta ricevuti. Ciò permette di ridurre i KB trasmessi e il tempo necessario nel caricamento della pagina web. Anche in questo caso si possono aggiungere delle regole al file .htaccess, elencate qui sotto:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

9. Evita reindirizzamenti delle pagine di destinazione

I reindirizzamenti vengono usati quando si vuole forzare il passaggio da una URL di una pagina ad un’altra. Usato per questioni di SEO, nel caso di pagine a cui è stato cambiata la URL, o per reindirizzare gli utenti alla versione mobile del sito web (in quei casi in cui i siti web non fanno uso di Responsive Web Design, quindi non sono ottimizzati per essere fruibili da tutti i dispositivi). Ovviamente i reindirizzamenti allungano i tempi di caricamento delle pagine.

10. Riduci il tempo di risposta del server

Se il server in cui è posizionato il sito non è sufficientemente performante, o se il sito stesso non è stato ottimizzato ed esegue molte operazioni inutili durante la preparazione delle pagine, allora si possono generare dei rallentamenti importanti. Le soluzioni per risolvere il problema possono essere diverse:

  • quando possibile, ottimizzare il sito web;
  • appoggiare alcuni dei file esterni, come le librerie Javascript, su dei server ad alte prestazioni (CDN), per diminuire il tempo di caricamento;
  • passare ad un server più performante.

Come abbiamo visto le possibilità di migliorare le prestazioni del nostro sito web sono diverse. Alcune regole sono applicabili totalmente, altre solo parzialmente perché sono strettamente legate al CMS utilizzato e alla struttura delle pagina generata. Comunque si possono ottenere ottimi risultati anche da una combinazione ridotta di interventi.

Il tuo sito che punteggio ha?

Contattami per informazioni