Come migliorare i tempi di caricamento del tuo sito web.
La velocità di caricamento di un sito web è alla base per ottenere un buon punteggio da parte dei motori di ricerca. Se il tuo sito ha un tempo di caricamento superiore ai 3 secondi viene infatti penalizzato da Google in quanto non performante per la migliore User Experience possibile.
Per comprendere correttamente ciò che Google si aspetta da te, ricorda che il principale obiettivo di un motore di ricerca non è darti visibilità, ma offrire i migliori risultati possibili quando viene consultato dagli utenti, in termini di pertinenza e accessibilità.
Come misurare il tempo di caricamento di una pagina web.
Per misurare il tempo che impiega una pagina a caricarsi completamente hai a disposizione molti strumenti, ma il più semplice ed immediato è l’estensione di Google Chrome “Page Load Time” (link); dopo averla aggiunta al tuo browser apparirà l’icona di un orologio in alto a destra, tra le estensioni, e su questa icona vedrai il tempo che impiega a caricarsi la pagina web che stai visitando.
Migliorare le performance del sito.
Adesso che sai quanto tempo impiega il tuo sito web a caricarsi, vediamo come intervenire per migliorare la performance.
È importante sapere che non esiste un metodo preciso ed univoco per rendere veloce un sito, si tratta di una serie di piccoli accorgimenti che, insieme, contribuiscono a migliorarne le prestazioni.
I file media, il primo nemico del caricamento di un sito
I file media, le immagini in particolare, sono sicuramente necessari per rendere piacevole e completa l’esperienza all’interno di un sito.
Proprio questi file sono spesso la causa principale del rallentamento di una pagina web: essendo risorse più pesanti di una semplice stringa di testo, necessitano di più tempo per essere correttamente visualizzate sul nostro browser, portando così a rallentare il caricamento dell’intera pagina.
Per ovviare a questo problema possiamo prendere alcuni accorgimenti:
Ridurre la dimensione delle immagini
Più un’immagine è leggera ed ottimizzata, minore sarà il tempo che impiega per essere correttamente visualizzata: la dimensione ottimale per un’immagine per il web è di circa 100 kb, e non dovrebbe mai superare i 200 kb.
Per ridurne il peso possiamo innanzitutto assicurarci di caricare immagini delle giuste dimensioni; perché caricare un’immagine larga 5000 pixel se deve poi occupare una piccola finestra di 400 pixel?
Possiamo inoltre utilizzare l’ottimo tool gratuito TinyJPG (link), che elimina i metadati non necessari dalle immagini riducendone notevolmente il peso.
Caricare le immagini nel giusto formato.
Il formato delle immagini influisce molto sul peso:
- JPG: è il formato più comune e anche il più leggero;
- PNG: più pesante, dovrebbe essere usato solo nel caso in cui sia necessaria la trasparenza;
- SVG: formato vettoriale molto leggero, ideale in caso di immagini non complesse (ad esempio un logo);
- WEBP: formato relativamente recente, appositamente creato per ottimizzare il caricamento delle immagini sulle pagine web a discapito della qualità.
Con un buon tools per editare le foto, potrai ritagliarle e rispettare le dimensioni corrette per l’area della pagina a cui sono destinate (ricorda di verificare sempre le dimensioni desktop e mobile per una buona versione responsive della pagina) e potrai anche ridimensionarle velocemente o cambiarne il formato. Ce ne sono davvero tanti gratuiti online o da installare sul tuo dispositivo.
Non caricare direttamente i video.
Caricare un video direttamente sul proprio sito in genere è sconsigliato poiché, oltre ad occupare il limitato spazio disponibile sul server, il caricamento del video consuma la banda del server quando i visitatori lo visualizzano. La soluzione è l’embedding, cioè visualizzare un video che però è ospitato da una piattaforma esterna (Youtube, Vimeo, ecc…). I loro server sono pensati per performare al meglio, inoltre il tuo contenuto sarà disponibile anche su piattaforme esterne al tuo sito, aumentando la possibilità di intercettare utenti interessati a te.
Ottimizzare la struttura del sito
Ogni elemento del sito web richiede un certo tempo per essere visualizzato. A meno che non si tratti di un file media il tempo di caricamento è minimo, ma più elementi con un tempo di caricamento molto basso, sommati, possono arrivare a rallentare considerevolmente il nostro sito web.
Soprattutto quando si utilizza un CMS (WordPress, Prestashop, Joomla, ecc…), bisogna assicurarsi di non utilizzare plugin, moduli o elementi in generale che siano superflui, per non appesantire inutilmente le pagine del sito.
Modificare ed ottimizzare la struttura di un sito web non è qualcosa che si può improvvisare, occorre rivolgersi ad uno sviluppatore.
L'importanza della cache.
Oltre ai file media, ci sono altri elementi che possono incidere pesantemente sui tempi di caricamento di un sito web, ad esempio i fogli di stile (CSS) ed i file Javascript (JS) .
Tutti questi elementi sono necessari al corretto funzionamento del sito, non è possibile rimuoverli (anche se è possibile prendere alcuni accorgimenti per ottimizzarli), ed è per questo che esiste la memoria cache. Sul browser viene salvata una copia temporanea di quegli elementi che sono statici, immagini comprese; in questo modo, al successivo caricamento della pagina, questi elementi non verranno nuovamente scaricati dal server che ospita il sito e, trovandosi già memorizzati sul browser dell’utente, si ridurrà notevolmente il tempo di caricamento.
Il caricamento e l'esecuzione degli script Javascript.
Javascript è un linguaggio di programmazione molto utile e versatile, che permette di rendere più dinamico ed interattivo un sito web.
Gli script Javascript tuttavia possono essere una delle cause principali di rallentamento di un sito, in quanto il caricamento di una pagina può fermarsi fino alla corretta esecuzione dello script.
Anche in questo caso è possibile prendere alcuni accorgimenti, ma bisogna rivolgersi ad uno sviluppatore. Gli script, quando possibile, dovrebbero sempre essere caricati in maniera asincrona, cioè in modo non consequenziale rispetto al resto della pagina. Inoltre bisognerebbe limitare l’utilizzo di script non necessari ed utilizzare al massimo le funzioni dei fogli di stile quando possibile (anche per ragioni di sicurezza del sito).
L'ultimo ostacolo: il server web.
Hai adottati tutti questi accorgimenti ma trovi che il tuo sito sia ancora lento?
Prendi seriamente in considerazione che la causa sia riconducibile ad una scelta che in molti compiono con leggerezza ma che è determinante per le prestazioni del sito. Sto parlando del server che hai scelto quando hai deciso di avere un sito web.
Gli hosting web (come Aruba, Siteground, Netsons ecc…) offrono varie soluzioni di server, alcune molto economiche, altre più costose.
I piani più economici sono ovviamente i meno performanti, quelli che offrono risorse più limitate, che andranno ad incidere negativamente sulla velocità di caricamento di un sito.
Inoltre i piani base ospitano i siti web su server condivisi, cioè insieme a tanti altri siti che condividono le già limitate risorse offerte: una buona soluzione è quindi spostare il proprio sito su uno spazio hosting dedicato che, pur essendo molto più costoso, offre sicuramente migliori risultati in termini di prestazioni.

Ciao sono Marco, mi definiscono un programmatore ed io mi fido.
Mi piace isolarmi ed immergermi nella scrittura del codice, cimentandomi in sfide sempre nuove… il tutto con un bel pezzo di pizza in mano.
Datemi del cibo ed un computer e non avrò bisogno d’altro.
I Web Vitals. La nuova iniziativa di Google per valutare la User Experience di un sito web.
I Web Vitals sono nuove metriche introdotte nell’algoritmo di valutazione di Google che spostano l’attenzione non più sui contenuti di un sito, bensì sull’esperienza di navigazione dell’utente. Non conterà più solo la qualità del risultato che Google può offrire ma l’accessibilità e la credibilità del sito che lo ospita.
Tre nuovi fattori costringeranno noi programmatori a fare ancora più attenzione all’user experience. I Web Vitals riscriveranno letteralmente la serp di Google, modificando le gerarchie dei risultati (ad esclusione degli annunci a pagamento) e migliorando lo score di quei siti che mettono l’utente e la sua esperienza al centro delle loro scelte.
I fattori principali, definiti Core Web Vitals, con cui si potranno valutare le pagine web sono LCP (Largest Contentful Paint), FID (First Input Delay) e CLS (Cumlative Layout Shift); vediamoli nel dettaglio cercando di evitare tecnicismi.
LCP (Largest Contentful Paint)
Il Largest Contentful Paint è il tempo di rendering dell’elemento più pesante all’interno della finestra di visualizzazione.
La pesantezza di immagini e video all’interno di una pagina web è sempre stata una delle cause principali delle cattive performance di un sito; con questo nuovo parametro non viene valutato il tempo complessivo di caricamento di una pagina (che continua comunque a rivestire un ruolo importante nella valutazione), ma solo il tempo che impiega a caricarsi l’elemento più pesante (molto probabilmente un’immagine o un video) tra quelli immediatamente visibili sullo schermo.
Il tempo di caricamento ideale è al di sotto dei 2.5 secondi.
FID (First Input Delay)
Il First Input Delay è un parametro che non si calcola immediatamente al caricamento di una pagina, ma dal momento in cui l’utente compie la prima azione sul sito (ad esempio il click su un pulsante o l’attivazione di uno script); dall’input dell’utente viene poi calcolato il tempo di elaborazione del server.
Se prendiamo ad esempio un menù a tendina che si espande al click dell’utente, il FID è il tempo che intercorre tra il click dell’utente sulla voce del menù e il completamento dell’apertura del sottomenù.
Il FID scoraggia quindi l’esecuzione di script eccessivamente pesanti, favorendo una navigazione fluida ed immediata.
Per valutarlo positivamente, il First Input Delay deve mantenersi al di sotto dei 100 millisecondi.
CLS (Cumlative Layout Shift)
Il Cumlative Layout Shift infine valuta la stabilità di una pagina web.
Se un elemento della pagina è molto pesante, o si carica in maniera asincrona, o si aggiunge dinamicamente tramite uno script in seguito al corretto caricamento della pagina, capita che la pagina possa “muoversi” o subire variazioni durante la navigazione a causa dell’introduzione dell’elemento in questione.
Questo fa sì che l’esperienza dell’utente ne risenta: immaginiamo di voler cliccare sul pulsante “annulla ordine” di un e-commerce, ma a causa del caricamento asincrono di un elemento il pulsante si sposta qualche centimetro più in basso nel momento in cui facciamo click, e finiamo per selezionare “conferma ordine”.
Il CLS si calcola quindi in base al numero di modifiche inattese che accadono in seguito al corretto caricamento della pagina, e idealmente dovrebbe essere pari a 0, ma viene fornita – generosamente – da Google una tolleranza di 0,1.
Strumenti Utili per verificare il tuo sito
Se vuoi verificare che il tuo sito sia in linea con i nuovi parametri di Google, Chrome mette a disposizione un’estensione apposita a questo link
Una volta installata clicca sull’icona in alto a destra nel browser (il quadrato colorato rosso o verde) e otterrai un punteggio per ognuno dei tre parametri rispetto alla pagina attualmente visualizzata.
Altri articoli che potrebbero interessarti:
“Sito Web per il tuo ristorante: ecco come progettarlo“: leggi qui

Ciao sono Marco, mi definiscono un programmatore ed io mi fido.
Mi piace isolarmi ed immergermi nella scrittura del codice, cimentandomi in sfide sempre nuove… il tutto con un bel pezzo di pizza in mano.
Datemi del cibo ed un computer e non avrò bisogno d’altro.