Se hai un sito o eCommerce, dovresti considerare con molta attenzione uno dei fattori più importanti che ne determinano le performance: la velocità di caricamento delle pagine web.
Sai quanto tempo impiega il tuo sito a caricarsi?
Se ancora non sai rispondere a questa domanda, in questo articolo ti spiego come fare un test velocità di un sito web, come leggere i dati di PageSpeed Insights e come implementare alcune delle più importanti tecniche di ottimizzazione per risolvere eventuali errori o problemi.
La velocità di caricamento delle pagine del sito è una metrica molto importante sia per le persone, sia per il posizionamento su Google.
Cos’è il test di velocità del sito web
Hai mai fatto un test di velocità del tuo sito web?
Se non puoi occupartene o pensi che sia troppo complicato, e vuoi demandare, contattaci pure per appoggiarti al nostro supporto professionale, capire come sta andando il tuo sito, quali intoppi registra e come correggerli. Avrai un quadro chiaro con riferimenti spiegati e illustrati.
Se vuoi fare in autonomia, puoi benissimo partire con un test di velocità con Google PageSpeed Insights, ovvero con un’analisi per misurare il tempo di caricamento delle pagine web, individuare eventuali criticità e seguire le indicazioni per correggere gli errori.
Il test può essere eseguito con strumenti online, software specifici e gratuiti, e si basa su diversi parametri, tra cui i Core Web Vitals, la dimensione dei file (immagini, script, CSS, ecc.), la quantità di richieste HTTP, il tempo di risposta del server, il codice con cui è scritto il sito, ecc.
Test velocità con PageSpeed Insights: i dati che fornisce l’analisi
Per misurare la velocità del sito web, Google ha creato questo tool gratuito che utilizza Lighthouse (strumento open source integrato in Google Chrome DevTools).
Entriamo nel vivo. Da premettere che in genere chi testa la velocità del sito, usa più tool perché i risultati possono variare e con essi anche le specifiche di correzione che possono essere più o meno approfondite.
Infatti nel paragrafo dedicato, ti segnalo altri software gratuiti tra i più validi per misurare le performance del tuo sito.
Ciò detto, prima di avviare il test di velocità con i vari software, è bene considerare due fattori che condizionano l’output (il risultato):
- la cache: è bene testare il sito sia con la cache abilitata sia con cache disabilitata, osservando come può cambiare il risultato a un controllo incrociato con più tool
- la località: considera la vicinanza geografica al server, che condiziona i tempi di caricamento delle pagine. Per risolvere questo problema, se i contenuti vengono fruiti anche da persone di paesi lontani, si può abilitare un sistema CDN – rete di distribuzione contenuti, rete di server distribuiti.
Per avviare l’analisi con PageSpeed Insights basta inserire l’URL del tuo sito web nella barra di ricerca e premere “Analizza”.
Una volta completata l’analisi, PageSpeed Insights fa una valutazione complessiva delle prestazioni del sito, espressa con un punteggio compreso tra 0 e 100.
Il punteggio è diviso in tre categorie: scarso (0-49), medio (50-89) e buono (90-100). Ovviamente più il punteggio è alto, più il sito è performante, distinguendo tra prestazioni su Dispositivi Mobili e Desktop, prendendo l’url due volte, una con un user-agent mobile e l’altra con un desktop-user agent”.
Il consiglio è quello di non arrovellarsi troppo il cervello per raggiungere 100!
Non è tanto il numero che conta, quanto risolvere gli errori segnalati, soprattutto quelli che inficiano la navigazione su mobile.
Oltre alla valutazione complessiva, PageSpeed fornisce informazioni sull’accessibilità, le best practice e l’ottimizzazione per i motori di ricerca (SEO), e una serie di dati relativi ai parametri dei Core Web Vitals, ovvero quell’insieme di metriche di Google che misurano l’esperienza dell’utente sul sito web in base a tre fattori chiave:
- il caricamento della pagina
- l’interattività
- la stabilità visuale.
Alcune tra le metriche che prende in esame il PageSpeed Insights:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- First Contentful Paint (FCP)
- Interaction to Next Paint (INP)
- Time to First Byte (TTFB)
- Total Blocking Time
- Speed Index
Quali sono le metriche più importanti di PageSpeed Insights
Il fulcro di tutto è capire quali metriche sono le più importanti per la velocità di caricamento delle tue pagine. Tra quelle che influenzano di più la velocità di caricamento della pagina, devi considerare:
- Tempo di caricamento della pagina (Page Load Time)
Questa metrica tiene conto del tempo totale necessario per caricare completamente una pagina.
- Time To First Byte (TTFB)
Il Time To First Byte indica il tempo trascorso tra quando viene effettuata una richiesta HTTP a quando il primo byte di dati della risposta viene ricevuto dal server.
In pratica, rappresenta il tempo impiegato dal server per iniziare a inviare i dati in risposta alla richiesta.
Punteggi TTFB scadenti possono essere la spia di un sito web popolato da tanti file di grandi dimensioni oppure può essere il segnale che devi cambiare server per aumentare le prestazioni del sito.
- Numero di richieste HTTP
Il numero di richieste HTTP è un fattore chiave che può influenzare le prestazioni di un sito web. Ogni volta che una pagina viene caricata nel browser, vengono effettuate molteplici richieste HTTP per ottenere tutti gli elementi necessari tra immagini, file CSS, file JavaScript ecc.
Un alto numero di richieste HTTP può rallentare il caricamento complessivo del sito. Se ci sono troppe richieste da gestire contemporaneamente, il server e il browser possono sovraccaricarsi, causando ritardi significativi nel caricamento delle pagine.
- Core Web Vitals
Largest Contentful Paint: il tempo che impiega per caricare l’immagine o l’elemento di testo più grande di una pagina.
First Input Delay: il tempo necessario per l’interazione dell’utente con una pagina sulla quale compie delle azioni, come per esempio fare clic su un link o uno scroll.
Cumulative Layout Shift: questo parametro misura la stabilità degli elementi in pagina, ovvero se i vari elementi si spostano una volta caricata la pagina.
Attenzione!
Recentemente (al momento in cui scriviamo questo articolo siamo nel mese di maggio 2023) Google ha annunciato che una delle metriche di base delle Core Web Vitals verrà eliminata e sostituita con una nuova metrica che rappresenta meglio l’esperienza dell’utente.
La nuova metrica si chiama “Interaction to Next Paint” e al momento è passata dallo stato sperimentale allo stato di attesa.
Restiamo in attesa.
Condivido l’annuncio di Google tradotto in italiano:
INP non è più considerato sperimentale e sarà invece considerato una metrica di Core Web Vital in attesa di conferma. Questa è una nuova designazione per indicare che INP ha dimostrato la sua prontezza a sostituire FID, ma non stiamo ancora apportando il cambiamento.
Per dare il tempo all’ecosistema di adeguarsi, INP diventerà ufficialmente una metrica di Core Web Vital stabile nel marzo 2024.
Giusto per dare un’anticipazione della nuova metrica:
INP misura con più precisione il tempo necessario che una pagina impiega a diventare reattiva. Un valore scadente si verifica quando al clic su un oggetto, l’azione prevista (come per esempio l’ingrandimento di un’immagine) non avviene con rapidità.
Sappiamo che il prossimo anno ci sarà un’altra metrica sulla quale lavorare.
Quali sono gli errori che rallentano un sito web
I fattori / errori che causano il rallentamento di un sito sono diversi, tra questi:
- fattori tecnici, come la dimensione delle immagini e la compressione dei file
- fattori di hosting, come la velocità del server e la larghezza di banda
- fattori di sviluppo del sito web, come la scelta del CMS e la scrittura del codice.
Tra gli errori che possono causare un rallentamento del sito, l’uso di immagini non ottimizzate, l’eccesso di richieste HTTP, l’utilizzo di plugin e script pesanti, hosting inefficiente, l’utilizzo di font personalizzati.
1. Immagini non ottimizzate sono spesso la causa principale di siti web lenti. Se le immagini non sono ottimizzate, possono occupare troppo spazio e rallentare il tempo di caricamento della pagina. Per evitare questo problema, è importante utilizzare immagini con una risoluzione adeguata e comprimerle per ridurne le dimensioni.
2. Troppo richieste HTTP: ogni volta che un browser richiede una risorsa (immagine, file CSS o JavaScript) al server, viene effettuata una richiesta HTTP. Se ci sono troppe richieste, il tempo di caricamento della pagina aumenta. Per evitare questo problema, è importante limitare il numero di richieste HTTP combinando i file CSS e JavaScript.
3. Non è stata configurata/abilitata la cache: la cache del browser consente di conservare temporaneamente i file del sito sul dispositivo dell’utente, in modo da ridurre i tempi di caricamento delle pagine. Se la cache non è abilitata, il browser dovrà scaricare sempre tutti i file del sito, ogni volta che l’utente accede alla pagina, rallentando il tempo di caricamento.
4. Plugin e script pesanti possono affaticare e rallentare il sito. Se non strettamente necessari, consiglio di ridurli al minimo o di evitare quelli che si possono sostituire con del codice (scritto bene).
5. Hosting inefficiente: la scelta del provider è molto importante per assicurare al sito web un’ottima performance. Un hosting lento o poco performante è un fattore di criticità spesso sottovalutato. E invece rappresenta almeno il 50% delle migliori prestazioni del sito web. Non è un caso che molti siti che hanno obiettivi più grandi e lungimiranti stiano migrando dagli hosting tradizionali ai server cloud.
6. Font personalizzati: lato estetico capisco il desiderio di rendere più attraente il sito, lato prestazioni tuttavia invito a considerare che i font personalizzati rallentano il sito. Un buon compromesso sarebbe quello di usarli ma comprimerli.
Come migliorare la velocità del sito
L’altra faccia della medaglia presenta tutto ciò che può invece migliorare la performance del sito riducendo la dimensione dei file con Gzip, ottimizzando le immagini, riducendo il numero delle richieste HTTP, abilitando la cache del browser, ricorrendo all’uso di un Content Delivery Network (CDN), risolvendo le criticità messe in luce dai Core Web Vitals.
In pratica, i passi da fare per migliorare i tempi di caricamento delle pagine:
- Riduci la dimensione della pagina: cerca di ridurre la dimensione totale delle pagina web, eliminando eventuali file superflui e riducendo la risoluzione delle immagini (abilita la compressione di file e immagini grandi tramite Gzip e un plugin ad hoc se usi WordPress).
- Sfrutta la cache del browser per memorizzare e conservare temporaneamente i file statici del sito web sul dispositivo dell’utente, così che non sia necessario richiederli nuovamente a ogni visita del sito.
- Comprimi i file CSS, JavaScript, gli elementi più grandi che una pagina web deve caricare e che dovresti ridurre al minimo o eliminare quelli ridondanti, i dati duplicati, per ridurre il numero di richieste e download che un client e un server devono eseguire per caricare correttamente la pagina.
- Elimina il render-blocking JavaScript, ovvero una porzione di codice JavaScript ostacola e blocca il processo di caricamento della pagina. La responsabilità va ricercata negli script di terze parti.
- e quindi… fai caricare prima i contenuti più importanti, come il testo di una pagina ‘above the fold’, che dovrebbe essere caricato prima dei widget di terze parti.
Ciò può essere fatto specificando l’ordine di caricamento degli script o utilizzando tecniche come il prefetching e il preloading, nel rimandare il caricamento degli script; nel renderli asincroni, così che il browser possa caricare altri elementi contemporaneamente; inserire piccole risorse JavaScript esterne all’interno del documento HTML per ridurre il numero di richieste che deve fare il browser.
In pratica, per evitare che il caricamento di file JavaScript rallenti il caricamento dei contenuti principali, puoi utilizzare l’attributo “async” o “defer” nello script. In questo modo il browser continua a caricare il resto della pagina mentre il file JavaScript viene scaricato in background.
Inline CSS critico: il CSS critico o “above the fold” contiene le regole di stile essenziali per la visualizzazione iniziale della pagina. Puoi incorporare questo CSS direttamente nell’elemento <head> della pagina, in modo che venga caricato immediatamente insieme al resto della struttura HTML. Ciò evita il ritardo causato dal caricamento di un file CSS esterno.
Caricamento differito: puoi applicare il caricamento differito o anche conosciuto come lazy loading per le immagini e altri elementi non essenziali.
In questo modo ritardi il caricamento di immagini, video o script, fino a quando non diventano visibili nello spazio visivo dell’utente, e permetti di caricare prima i contenuti importanti.
- Utilizza un Content Delivery Network (CDN), ovvero la rete di server che consente di distribuire i contenuti a livello globale riducendo i tempi di latenza e di caricamento.
- Utilizza immagini ottimizzate e comprimile: immagini con una risoluzione appropriata per la navigazione web.
- Scegli un hosting di qualità, se vuoi migliorare la velocità del sito, devi investire in un web host che assicuri un tempo di risposta del server che non sia rallentato da fattori legati alla scarsa efficienza del provider. Si tratta di migrare verso un nuovo hosting.
Altri strumenti per misurare la velocità di un sito web
Non tutti i test o gli strumenti di velocità della pagina forniranno gli stessi risultati. Ecco perché è importante fare dei controlli incrociati tra più tool.
Oltre a Google PageSpeed Insights, tra gli altri strumenti gratuiti da provare:
- GTmetrix
- Pingdom
- WebPageTest
- KeyCDN
- DareBoost
- Web Page Analyzer
- YSlow
- Chrome DevTools
- Site Relic
- dotcom-monitor
Perché è importante la velocità del sito web
Da un’indagine condotta da Google è emerso che il tasso di rimbalzo dei siti web arriva fino al 31% con tempi di caricamento da uno a tre secondi. Questo significa che le persone vanno via dal sito che non si carica entro quei pochi secondi.
I tempi di caricamento lenti è uno degli errori tecnici più impattanti sulle performance del sito, soprattutto per quanto riguarda la navigazione dai dispositivi mobili.
La velocità è ormai un fattore critico per migliorare il posizionamento su Google, attirare / trattenere i visitatori e aumentare le opportunità di conversione.
Ma soprattutto in questa epoca di grandi traformazioni digitali, a cavallo di una rivoluzione che sta cambiando il mondo praticamente, un sito lento manca dei presupposti basilari per competere online.
Un sito che si carica lentamente è motivo di frustrazione per i visitatori ed è destinato a essere abbandonato prima di leggerne i contenuti, perché siamo tutti ormai abituati alla velocità e ci aspettiamo che le pagine si carichino prima di subito.
Quindi anche sei hai contenuti eccezionali, il rischio è quello che nessuno li vede. Infatti il sito viene abbandonato a causa dei tassi di rimbalzo delle pagine più lente.
Di conseguenza Google, ricevendo un segnale di abbandono da parte dell’utente, finisce col pregiudicare il sito facendolo scendere di ranking.
Questo succede perché Google, nella fattispecie, vuole garantire un’esperienza più che eccellente a chi naviga tra i risultati delle sue pagine di ricerca.
A questo proposito ha espresso chiaramente che la velocità di caricamento delle pagine web è un fattore di ranking per i risultati di ricerca su desktop e mobile.
Ecco una sintesi dei motivi per cui dovresti ottimizzare la velocità del sito o eCommerce:
- Sito lento frustra le persone = Esperienza dell’utente insoddisfacente: gli utenti si aspettano tempi rapidi di caricamento delle pagine su dispositivi mobili e desktop. Più la tua pagina è lenta, più tempo ci vuole per la prima interazione e più alto è il tasso di rimbalzo. Questo impatta in modo negativo sia sulle metriche sia sui profitti.
- Sito lento malvisto da Google: Google attribuisce importanza alla velocità della pagina nei suoi algoritmi di classifica, soprattutto su mobile, ma quanto questi condizionino le classifiche di ranking non è dato sapere.
- Sito lento = scarsa funzionalità di pagine ad alta conversione: la velocità della pagina incide anche su tutto il funzionamento del sito perché può riguardare per esempio il caricamento dei carrelli della spesa o dei post del blog, che causano tassi di rimbalzo elevati.
Sito lento = sito fatto male, poca autorevolezza e fiducia: un sito lento “a pelle” non suscita fiducia né autorevolezza, lasciando supporre che se è lento significa che soffre di problemi tecnici. È costruito male e non ha un codice scritto bene.
Per quanto la velocità del sito sia fondamentale, è altresì importante ricordare che altri elementi concorrono a rendere un sito performante: la qualità dei contenuti e la struttura del sito, la sua architettura e come vengono organizzate le informazioni all’interno delle pagine; una grafica semplice, seppur curata, ma assolutamente responsiva.
Per concludere, penso sia piuttosto evidente l’importanza del test di velocità di un sito web e la lettura dei dati di PageSpeed per qualsiasi sito web associato a un’azienda con un business online.
La velocità di caricamento del sito web ha un impatto significativo sull’esperienza degli utenti e sul posizionamento nei motori di ricerca, quindi è davvero importante offrire prestazioni elevate e tempi di caricamento veloci ai nostri clienti.
Una soluzione “one-size-fits-all” non esiste, ma con la nostra esperienza e le nostre soluzioni personalizzate, possiamo aiutare a ottimizzare le prestazioni del tuo sito web.
Contattaci se vuoi migliorare le prestazioni del tuo sito o eCommerce: possiamo supportarti con le nostre soluzioni per hosting e cloud.
