Come migliorare la velocità di un sito: la mia esperienza

Immagina di entrare in un negozio e di trovare un commesso che risponde prontamente a tutte le tue domande, ti guida rapidamente verso ciò che cerchi e rende la tua esperienza di acquisto veloce e piacevole. Allo stesso modo, un sito web deve essere rapido e reattivo per soddisfare i visitatori. La velocità del sito è cruciale non solo per offrire una buona esperienza utente, ma anche perché Google considera la velocità un fattore di ranking. In questo articolo, ti racconterò come ho migliorato la velocità del mio sito web www.ricciardivince.it, trasformandolo da un commesso lento a un assistente dinamico e efficiente.

Indice

• Che cos’è la velocità delle pagine
• Come definire e misurare la velocità delle pagine
• Core Web Vitals
• Cosa ho fatto per migliorare la velocità del mio sito
• Quali sono i fattori che rallentano le pagine
• Velocità del sito e ranking SEO
  • Conclusione

Che cos’è la velocità delle pagine

La velocità delle pagine è un concetto che si riferisce al tempo necessario affinché una singola pagina web sia completamente caricata e pronta per l’uso. La velocità del sito, invece, rappresenta la performance complessiva del sito web, considerata in termini di caricamento di tutte le sue pagine.

Studi e ricerche dimostrano chiaramente l’importanza della velocità del sito:

• Secondo Pingdom, il 78% dei primi 100 siti Web di vendita al dettaglio impiega meno di tre secondi per caricarsi.
• Pinterest ha ridotto i tempi di attesa percepiti del 40%, aumentando il traffico dei motori di ricerca e le iscrizioni del 15%.
• Google ha scoperto che una riduzione di 0,1 secondi nel tempo di caricamento delle pagine mobile può aumentare i tassi di conversione dell’8%.

Come definire e misurare la velocità delle pagine

Per definire e misurare la velocità delle pagine, utilizziamo diversi strumenti come Google PageSpeed Insights, GTmetrix e WebPageTest. Questi strumenti forniscono metriche dettagliate che aiutano a identificare le aree di miglioramento. La velocità di caricamento di una pagina web è misurata da vari parametri, alcuni universali e altri dipendenti da fattori specifici.

Parametri universali:

• Tempo di risposta del server: il tempo impiegato dal server per elaborare la richiesta e inviare i dati al browser. Un tempo di risposta rapido è fondamentale per un caricamento veloce.
• Dimensione delle risorse: la quantità totale di dati (HTML, CSS, JavaScript, immagini) che il browser deve scaricare per visualizzare la pagina. Ridurre le dimensioni delle risorse, ove possibile, contribuisce a un caricamento più rapido.
• Ottimizzazione delle risorse: tecniche per ridurre la dimensione effettiva dei file senza compromettere la qualità dei contenuti. Comprende compressione, caching e minificazione di risorse come immagini, CSS e JavaScript.
• Rete: la latenza e la velocità della connessione internet dell’utente influenzano il tempo di download delle risorse. In condizioni di rete lente, il caricamento della pagina può risultare più lento.

Il tempo ottimale di caricamento di una pagina è sotto i 3 secondi. Secondo Google, la probabilità che un utente abbandoni il sito aumenta del 32% se il tempo di caricamento passa da 1 a 3 secondi.

Google.it

Fattori specifici:

• Codice HTML e struttura della pagina: un codice HTML ben strutturato e ottimizzato può migliorare la velocità di caricamento.
• Numero di richieste HTTP: ogni richiesta HTTP comporta un ritardo, quindi è importante ridurne il numero il più possibile.
• Script esterni e plugin: l’utilizzo di script esterni e plugin può rallentare il caricamento della pagina, soprattutto se non ottimizzati.
• Hosting: la qualità del servizio di hosting influisce sulla velocità di risposta del server e sulle prestazioni generali del sito web.

Core Web Vitals

Per aiutare i proprietari dei siti web a comprendere e migliorare gli aspetti che incidono sulla velocità di caricamento Google ha introdotto un insieme di metriche chiamate Core Web Vitals. Queste metriche misurano elementi specifici delle prestazioni della pagina che influenzano direttamente l’esperienza utente, come la velocità di caricamento del contenuto principale, la reattività all’input dell’utente e la stabilità visiva della pagina.
I Core Web Vitals sono dunque un insieme di metriche definite da Google che misurano aspetti chiave dell’esperienza utente, come la velocità di caricamento (Largest Contentful Paint – LCP), l‘interattività (First Input Delay – FID) e la stabilità visiva (Cumulative Layout Shift – CLS).

Le principali metriche includono:

• Tempo di caricamento della pagina: Il tempo totale che una pagina impiega per caricarsi completamente.
• Time to First Byte (TTFB): Il tempo che intercorre tra la richiesta di una pagina da parte del browser e la ricezione del primo byte di dati dal server.
• Time to Interactive (TTI): Il tempo necessario affinché una pagina diventi completamente interattiva.
• Indice di velocità visiva (VSI): Una misura di quanto velocemente il contenuto visivo della pagina viene visualizzato.

Cosa ho fatto per migliorare la velocità del mio sito

Per migliorare la velocità del mio sito, quello su cui ti trovi ora :), ho adottato principalmente dei miglioramenti tecnici. In questo paragrafo ti spiegherò esattamente cosa ho fatto. Ecco i passaggi che ho seguito per ottenere risultati significativi:

1. Attivazione del plugin WP Rocket:
Ho attivato il plugin WP Rocket, noto per le sue capacità di ottimizzazione delle performance. Questo plugin offre una serie di funzionalità, tra cui:

• Memorizzazione nella cache delle pagine: riduce il tempo di caricamento delle pagine memorizzandole in cache.
• Compressione GZIP: diminuisce la dimensione dei file trasmessi dal server al browser, migliorando la velocità di caricamento.
• Caricamento differito delle risorse JavaScript: carica i file JavaScript solo quando necessario, riducendo il tempo di rendering iniziale della pagina.

Questa la configurazione attuale del plugin WP Rocket sul mio sito

Nella sezione Ottimizzazione file ho spuntato:
– Minifica i file CSS
– Ottimizza la pubblicazione del CSS + remove unused css
– Minifica i file JavaScript
– Carica il JavaScript in modalità differita
– Rimanda l’esecuzione del JavaScript (selezionando GA e Tag Manager)

Oltre a ciò ho attivato:
– lazy load per le immagini
– attivato il precaricamento della cache
– abilitato il precaricamento dei link

Per il momento non ho toccato altro, ma vorrei testare le funzionalità di ottimizzazione del database per la pulizia degli articoli e dei commenti nonché delle tabelle e dei transient. Altra cosa che ho in programma di fare e ottimizzare le dimensioni delle immagini. Per una guida esaustiva consiglio la lettura di questo articolo che descrive passo passo come configurare WP Rocket per WP.

2. Aggiornamento della versione di PHP:
Ho aggiornato la versione di PHP alla versione 8.0, assicurandomi che il mio sito utilizzi una versione più veloce e sicura. Le nuove versioni di PHP offrono miglioramenti significativi in termini di prestazioni rispetto alle versioni precedenti.

3. Aggiornamento del tema:
Ho aggiornato il tema del sito, Avante fornito da ThemeGoods alla versione 2.8.1. Questo aggiornamento ha garantito l’integrazione delle nuove ottimizzazioni e funzionalità, migliorando ulteriormente la velocità e l’efficienza del sito.

4. Ambiente di staging:
Tutte queste operazioni sono state eseguite in un ambiente di staging sul mio server di hosting Serverplan. Questo mi ha permesso di testare le modifiche senza rischiare di compromettere il sito live. Utilizzare un ambiente di staging è fondamentale per identificare e risolvere eventuali problemi prima di implementare le modifiche sul sito principale.

Grazie a queste azioni, ho notato un miglioramento significativo nella velocità del mio sito e un aumento del punteggio dei Core Web Vitals, migliorando così l’esperienza utente complessiva.

Questo il punteggio raggiunto su GTmetrix.
Sicuramente si può ancora migliorare la velocità di caricamento di alcuni decimi, ma siamo sicuramente in media con i valori di cui abbiamo parlato prima e aggiungo che i numeri restano tali e non consiglio di ‘fissarci’ sui valori singoli, vanno anche analizzate le metriche di interazione degli utenti su analytics, ad esempio oppure il miglioramento del ranking sui motori di ricerca.

Questo il punteggio su PageSpeed Insight di Google
Anche qui ci sono margini di miglioramento soprattutto sul Largest Contentful Paint.

In sintesi vi possono dire che il tempo di caricamento percepito è nettamente migliorato. Aspetto i commenti di chi leggerà questo articolo per sapere se, al netto dei valori degli strumenti, il tempo di caricamento percepito da voi visitare è buono.

Quali sono i fattori che rallentano le pagine

Dopo avervi raccontato come ho migliorato le prestazione del mio sito web ho raggruppato gli elmenti più comuni che influenzano la velocità di caricamento delle pagine.

1. Immagini non ottimizzate: immagini di grandi dimensioni e non compresse possono rallentare significativamente il caricamento della pagina. È essenziale utilizzare strumenti di compressione delle immagini e formati moderni come WebP per ridurre il peso delle immagini senza comprometterne la qualità.
   
2. Script JavaScript pesanti: troppi script o script mal ottimizzati possono influire negativamente sull’interattività della pagina. Ottimizzare il caricamento dei JavaScript, caricandoli in modo asincrono o posticipandoli, può migliorare significativamente le prestazioni.
   
3. CSS non minificato: fogli di stile CSS non ottimizzati possono aumentare il tempo di caricamento. Minificare il CSS, rimuovendo spazi vuoti e commenti inutili, può aiutare a ridurre la dimensione dei file e velocizzare il caricamento.
   
4. Hosting di bassa qualità: un server di hosting lento può influire negativamente sulle prestazioni complessive del sito. Investire in un hosting di alta qualità, possibilmente ottimizzato per WordPress, può fare una grande differenza. Come detto io personalmente uso e consiglio Serverplan.
   
5. Numero eccessivo di plugin: l’uso di troppi plugin può appesantire il sito e rallentarne il caricamento. È consigliabile mantenere solo i plugin essenziali e assicurarsi che siano sempre aggiornati e ben ottimizzati. Esistono dei plugin che permettono di verificare il consumo di risorse di ciascun plugin installato. Verificare se vi servono davvero tutti quelli presenti.

Velocità del sito e ranking SEO

Il motivo principale per cui ho deciso di ottimizzare il mio sito web è stato per migliorare il posizionamento nei motori di ricerca, dato che la velocità di caricamento è un fattore di ranking significativo. Sebbene il sito fosse già percepito come veloce, c’era margine per migliorare ulteriormente. Ora, grazie alle ottimizzazioni effettuate, il sito è ancora più veloce e l’esperienza utente ne risulta notevolmente migliorata. Adesso non resta che aspettare il miglioramento delle posizioni su google.

La velocità del sito è un fattore di ranking SEO già dal 2010, quando Google ha iniziato a utilizzarla nei suoi algoritmi di classificazione. Nel luglio 2018, Google ha introdotto il Page Speed system, rendendo la velocità delle pagine un fattore di ranking anche per la navigazione mobile. Questo aggiornamento ha segnato un cambiamento significativo, riconoscendo l’importanza di un’esperienza di navigazione veloce e fluida su dispositivi mobili.

Altra data importante è il 2021, quando Google ha lanciato il Page Experience update, dimostrando che la velocità della pagina e l’esperienza utente sono strettamente legate. Infine l’introduzione dei Core Web Vitals ha chiarito che la velocità è un fattore di ranking essenziale, fornendo metriche standard con cui i proprietari di siti possono lavorare per ottimizzare le performance.

Conclusione

È importante ricordare che il punteggio di velocità degli strumenti non è tutto. Sebbene siano utili per identificare aree di miglioramento, l’obiettivo principale deve essere sempre quello di offrire la migliore esperienza utente possibile. Investire nella velocità del sito non solo migliora il ranking SEO, ma anche la soddisfazione degli utenti, portando a un maggiore coinvolgimento e, in definitiva, al successo del sito web.