Come ottimizzare la velocità di caricamento di un sito web

Partiamo dalle basi, perché spesso diamo per scontate molte cose che però non sono così ovvie. Il caricamento di una pagina web implica varie azioni, alcune eseguite del tuo server e altre dal browser.

Come viene caricata una pagina web

Un utente qualsiasi apre il proprio browser, supponiamo Google Chrome, ed inserisce nella barra di ricerca il tuo URL (es: www.tuosito.it).
Una volta premuto il tasto “Enter” parte una richiesta DNS (Domain Name System) che punta al tuo dominio (miosito.it) e quindi al tuo server dove i file sono archiviati.

Qui è dove tutto diventa interessante e dove la nostra velocità di caricamento fa la differenza. Infatti il DOM (Document Object Model) inizia a caricare tutte le risorse HTML, i fogli di stile (CSS) e i JavaScript in maniera ordinata. Raramente però il DOM riesce ad ottenere tutte le risorse di cui ha bisogno con una sola “chiamata”, ed è qui che il caricamento del sito web inizia a rallentare.

Problematiche comuni che possono rallentare il tuo sito web

Ma quali sono le problematiche più comuni che influiscono sul rallentamento del sito web?

1. In primis le immagini. Più grande e di qualità è l’immagine, più pesante sarà e più tempo ci metterà a caricarsi;
2. Problemi con il proprio Hosting provider;
3. Plugins, app, widget o comunque script di terze parti che possono rallentare il caricamento;
4. Il Tema/template scelto può nascondere grossi file che rendono il sito web lento nel caricamento;
5. I Redirects (codice 30x) che generano latenza nel raggiungimento di un determinato URL;
6. I JavaScript.

Ovviamente tutte queste problematiche possono facilmente convivere le une con le altre e rallentare il sito web.
Tieni presente che oggi l’utente medio ti concede al massimo una decina di secondi prima di abbandonare la pagina e cercare un altra risposta alla sua domanda.

Ma andiamo ad analizzare e risolvere queste problematiche, anche grazie all’aiuto di tool che ci rendono la vita molto più semplice.

Tools per migliorare la velocità di un sito web

Ovviamente parlando di SEO non possiamo non citare Google e i tools che ci mette a disposizione gratuitamente. Perché pagare uno strumento che Big G ci mette a disposizione gratuitamente?
Le prime risorse che ti elenco qui di seguito, infatti, sono tools totalmente gratuiti e di facile comprensione.
Ciò che è veramente interessante osservare è che grazie a questi strumenti, Google ci fa capire quali sono per lui i fattori davvero importanti riguardo le performance delle nostre pagine web.

Lighthouse

Lighthouse è uno dei miei tools preferiti, soprattutto perché è nativamente integrato in Google Chrome.

Come si utilizza Lighthouse e quali dati posso ricavare?

Innanzitutto devi aver installato il browser Google Chrome (che puoi scaricare tramite questo link).
Una volta aperta una pagina web è sufficiente fare click con il tasto destro del mouse in un punto qualsiasi della pagina, selezionare dal menù a tendina l’opzione “ispeziona” e vedrai comparire una finestra nella parte destra della tua finestra.

Nella parte superiore di questa finestra clicca su “Audits” e poi “Run audits”.

I dati che ci restituisce Google sono suddivisi in quattro categorie:

• Performance
• Accessibility
• Best Practices
• SEO

La sezione Performance riguarda la velocità di caricamento del sito web e le varie metriche che la influenzano. Questa è già una grande indicazione di problematiche legate al sito web che è necessario risolvere.

La sezione Accessibility invece si concentra sull’accessibilità del tuo sito web anche da parte di persone diversamente abili. Ad esempio ci può far notare che sul nostro sito non è disponibile la funzione di zoom, che il contrasto tra i colori non è sufficiente o che i link non sono visibili.

La sezione Best Practices ci da informazioni su eventuali azioni che è necessario intraprendere per migliorare l’esperienza utente, come ad esempio l’implementazione di un certificato SSL o l’utilizzo di immagini delle dimensioni corrette.

La sezione SEO invece è un po’ superficiale dal punto di vista tecnico e ci da informazioni generiche ma molto importanti riguardo il nostro sito web. Infatti quando ho necessità di effettuare un’analisi SEO per un cliente, è il primo tool in assoluto che utilizzo.

Quello che mi piace molto di questo tool è che ci dice quali sono le problematiche legate al nostro sito web e consigli su come risolverle.

Page Speed Insights

Page Speed Insights è davvero interessante. Anche questo tool utilizza Lighthouse per determinare la velocità di caricamento del tuo sito web, ma differenzia nettamente la velocità di caricamento di un sito web da mobile e da desktop dandoci la possibilità di confrontarle.

Quale risultato ci interessa?

Ovviamente il caricamento da browser per smartphone visto che ormai la maggior parte delle ricerche su Google viene fatta da questi dispositivi. Però non sempre Google è interessato unicamente a quella. Ti consiglio di verificare se del tuo sito web viene analizzata solo la versione mobile o anche quella desktop. In questo modo possiamo controllare quale tipologia di versione del sito viene presa in considerazione dagli user agent di Google e quindi determinare il nostro punteggio finale complessivo.

Come determino in che modo viene scansionato il mio sito web?

Apri Search Console e sul menù laterale sinistro scorri in fondo alla pagina fino alla sezione “Impostazioni”. All’interno di questa pagina troverai la tab “Informazioni” con all’interno la tipologia di Googlebot utilizzata per scansionare il tuo sito web.

Semplice no?

Come viene caricato un sito web

Grazie ad alcuni tools online è possibile monitorare in maniera precisa quali file vengono utilizzati durante il caricamento del sito web e in che ordine vengono caricati (o scaricati, dipende dal punto di vista).
Questo metodo di visualizzazione si chiama “waterfall” proprio perché visualmente abbiamo un elenco verticale ordinato dei file e il tempo (in ms, millisecondi) che la risorsa impiega per essere caricata.

Tra i principali software gratuiti disponibili ti consiglio di provare Pingdom e GTmetrix.

Metriche di velocità del sito web

Dopo aver ottenuto il nostro risultato dal test di velocità del sito web dobbiamo iniziare a prendere delle contromisure, ma spesso alcune metriche risultano difficili da comprendere. Vediamo insieme le principali e cerchiamo di spiegarle in maniera semplice.

Il first paint

Il First paint è la prima cosa a comparire sul monitor. Potrebbe anche essere un semplice pixel. Questo primo cambiamento si chiama quindi first paint ed è il momento esatto in qui l’orologio del caricamento inizia a scorrere.

Il first contentful paint

Il first contentful paint, invece, è quel momento in cui è il primo contenuto ad essere mostrato. Potrebbe essere parte del menu di navigazione, la barra di ricerca o anche un testo.

Il first meaningful paint

Il first meaningful paint è il primo contenuto principale ad essere mostrato. A differenza del first paint e del first meaningful paint, riguarda contenuto testuale. È quella parte di testo che ti fa pensare “Finalmente! Sono arrivato su questo sito proprio per avere questa informazione”. Questo è il first meaningful paint.

Il tempo per interattività

Il tempo per interattività è quel lasso di tempo necessario al sito web per essere completamente utilizzabile e funzionante. È capitato a tutti di arrivare su un sito web, pensare che fosse pronto all’interazione e poi scoprire dopo aver fatto click da qualche parte che in realtà non lo era.
Quindi per semplificare il concetto, il tempo per interattività è il momento in cui la pagina web è completamente utilizzabile da parte dell’utente.

Questo dovrebbe farci riflettere su quanto user-centriche siano queste metriche.

Come migliorare la velocità di caricamento di un sito web

Usare l’HTTP/2

Questo è quasi scontato da dire ormai, ma molti siti web ormai “antichi” o non aggiornati utilizzavano il protocollo http/1.

Ma cos’è l’http/2?

• Definizione difficile: L’HTTP/2 (o Hypertext Transfer Protocol 2.0) è un protocollo binario che porta gli stream push, multiplex con controllo dei frame sul web.
  (Se ti va di approfondire leggi la documentazione ufficiale di Google).
• Definizione semplice: L’HTTP/2 è la nuova versione del protocollo HTTP. Modificando la struttura del flusso di dati tra server e client, migliora il caricamento delle pagine web sui vari browser.

Abilita il caching del browser

Abilitare il caching del browser è un fattore chiave nel miglioramento delle performance di un sito web. Permette al browser di pre-caricare risorse statiche, ovvero che non cambiano spesso.

Ad esempio il logo di un sito web è da considerarsi una risorsa statica. Abilitando il caching del browser questo logo viene scaricato dal server solo al primo accesso e poi immagazzinato nella cache locale del browser. Durante gli accessi successivi dell’utente tutte le risorse statiche saranno già presenti sul browser e di conseguenza il sito si caricherà più velocemente.

Essendo un argomento vasto e complesso, ti lascio il link ad un interessante articolo per approfondire.

Utilizza una Content Delivery Network (CDN)

Una CDN è costituita da un insieme di localizzazioni nel mondo che, fondamentalmente, replica i contenuti dei tuoi server, conservando in cache i file che non richiedono un continuo aggiornamento. Questa distribuzione globale riduce la latenza fisica di comunicazione tra il server e l’utente, velocizzando il caricamento del tuo sito web.

Immagina ad esempio che il tuo utente si trovi a Melbourne in Australia e voglia visitare il tuo sito web, ospitato in un server localizzato in Italia. Bene. La distanza fisica tra l’utente (Australia) e il tuo server (Italia) crea una latenza, un “ritardo”. Questa latenza può essere ridotta replicando il tuo sito web su vari PoP (Point of Presence) e reindirizzando l’utente a quello più vicino.

Comprimi le immagini

Ridurre il peso delle immagini di un sito web consente di risparmiare byte e di conseguenza migliorare le prestazioni: meno byte deve scaricare il browser e più rapidamente è in grado di scaricare e renderizzare i contenuti utili sullo schermo dell’utente.

Come ottimizzare le immagini di un sito web

Comprimere le immagini è la cosa più semplice ma efficace da fare per velocizzare un un sito web.

È una cosa semplice da fare ed esistono numerosi tool per comprimere le tue immagini.

Io ne utilizzo da sempre due:

TinyPng

Il famoso tool con il Panda è in grado di comprimere in maniera ottimale le tue immagini con un click. Il grande vantaggio di questo servizio è che è gratuito fino a 500 immagini al mese e che offre un’ampia documentazione per l’implementazione tramite API. Questo il link alla documentazione.

Di contro ha che non si può giocare con la personalizzazione dell’immagine.

Squoosh

Questo servizio di compressione immagini è molto completo dal punto di vista dell’immagine che otterremo come output. Offre la possibilità di scegliere il formato dell’immagine (jpeg, png e WebP per i nuovi formati consigliati da Google), di ridimensionarle e modificare molti parametri di compressione.

Di contro ha che non c’è la possibilità di integrare il servizio tramite API.

Minifica le risorse

Il caricamento di una pagina web non coinvolge solamente l’HTML, ma anche numerosi altri file esterni contenenti istruzioni legate allo stile della pagina (CSS) e codici di scripting lato-client (Javascript).

Si possono minificare le risorse sia tramite la compressione dell’output con algoritmi (come GZIP) oppure minificando il codice al fine d creare una versione minimizzata dei vari file che compongono una pagina web (HTML, CSS e Javascript).

In sostanza vengono rimossi eventuali commenti al codice, ritorni a capo, tabulazioni e spazi superflui.

Il risultato è un file ottimizzato e funzionante che si può alleggerire fino al 70% rispetto alla sua versione originale.

Come per il caching del browser ti rimando ad un approfondimento completo.

Spero che il concetto di velocità di caricamento e le tecniche per ottimizzare il tuo sito web ora ti siano più chiare.

Se incontri qualche difficoltà nel rendere il tuo sito web performante, richiedimi una Consulenza SEO e sarò felice di darti una mano.