PageSpeed Insights di Google: quanto è veloce il vostro sito web?

Non solo gli utenti, ma anche Google apre con ri­lut­tan­za un sito web con tempi di ca­ri­ca­men­to lunghi. Dal 2018, la velocità di ca­ri­ca­men­to di un sito web è uno dei fattori di ranking di Google. Le pagine lente, sia in termini di vi­sua­liz­za­zio­ne mobile che in quella desktop, vengono di con­se­guen­za pe­na­liz­za­te dall’algoritmo. Ad­di­rit­tu­ra, tutte le pagine che non vengono caricate dopo più di due secondi vengono com­ple­ta­men­te ignorate dal crawler. Ma anche il 32% degli utenti abbandona un sito web se il tempo di ca­ri­ca­men­to supera i tre secondi.

A tale scopo, però, Google ha nel suo re­per­to­rio uno strumento, PageSpeed Insights, che aiuta ad ana­liz­za­re i tempi di ca­ri­ca­men­to di un sito web e a ot­ti­miz­zar­lo di con­se­guen­za, se ne­ces­sa­rio.

PageSpeed Insights è uno strumento SEO di Google che, in­nan­zi­tut­to, calcola e analizza il tempo di ca­ri­ca­men­to di un URL. Basta inserire l’indirizzo del sito nell’apposito campo e il gioco è fatto. Ne risultano i “PageSpeed Insights” (in italiano: “ap­pro­fon­di­men­ti sulla velocità della pagina”), che vengono quindi vi­sua­liz­za­ti in modo molto chiaro e suddivisi in versione mobile e desktop. È possibile passare fa­cil­men­te da una vi­sua­liz­za­zio­ne all’altra. Qualsiasi URL valido può essere inserito nello strumento per l’analisi.

Le espe­rien­ze di utenti reali tratte dal Chrome User Ex­pe­rien­ce (CrUX in breve) sono incluse nell’analisi. Google riceve questi dati dagli utenti che uti­liz­za­no il browser Chrome e con­di­vi­do­no vo­lon­ta­ria­men­te le proprie sta­ti­sti­che di utilizzo con Google.

Anche i dati di Lighthou­se sono inclusi nell’analisi. Questo strumento valuta l’accesso, le pre­sta­zio­ni e la facilità d’uso del sito web in questione.

Il risultato dell’analisi con PageSpeed Insights di Google è indicato da un valore di per­for­man­ce su una scala da 0 a 100. Ciò consente una va­lu­ta­zio­ne ap­pros­si­ma­ti­va e aiuta a com­pren­de­re le pre­sta­zio­ni del sito web in pochi secondi. In realtà, i risultati di PageSpeed Insights con­ten­go­no più di questo valore. Sono infatti co­sti­tui­ti da molte figure chiave diverse.

In alto troviamo il valore delle pre­sta­zio­ni, riportato su una scala da 0 a 100, suddiviso in tre categorie:

Seguono i dati sul campo del CrUX (degli ultimi 28 giorni), a con­di­zio­ne che siano di­spo­ni­bi­li per l’URL inserito. Se non lo sono, viene vi­sua­liz­za­to il messaggio: “Il rapporto sull’espe­rien­za utente di Chrome non contiene dati sulla velocità effettiva suf­fi­cien­ti per questa pagina”.

Se i dati sul campo sono di­spo­ni­bi­li per il sito web, la va­lu­ta­zio­ne fa ri­fe­ri­men­to ai seguenti valori:

• First Con­tent­ful Paint (FCP) indica il tempo ne­ces­sa­rio per vi­sua­liz­za­re com­ple­ta­men­te la prima immagine o testo sul sito web.
• First Input Delay (FID) misura il tempo dopo cui un utente può in­te­ra­gi­re per la prima volta con il sito web.
• Largest Con­tent­ful Paint (LCP) misura quando la parte di contenuto più grande diventa visibile sulla pagina.
• Cu­mu­la­ti­ve Layout Shift (CLS) mostra lo spo­sta­men­to ina­spet­ta­to degli elementi della pagina mentre il sito web è ancora in fase di ca­ri­ca­men­to.

Questi valori di dati sul campo sono a loro volta clas­si­fi­ca­ti in base alla velocità:

Veloce (verde):

• FCP: è compreso tra 0 e 1 secondo
• FID: è compreso tra 0 e 0,1 secondi
• LCP: è compreso tra 0 e 2,5 secondi
• CLS: lo spo­sta­men­to cu­mu­la­ti­vo del layout è compreso tra 0 e 10 percento

Medio (arancione):

• FCP: è compreso tra 1 e 3 secondi
• FID: è compreso tra 0,1 e 0,3 secondi
• LCP: è compreso tra 2,5 e 4 secondi
• CLS: lo spo­sta­men­to è compreso tra il 10 e il 25 percento

Lento (rosso):

• FCP: è superiore a 3 secondi
• FID: è superiore a 0,3 secondi
• LCP: è superiore a 4 secondi
• CLS: lo spo­sta­men­to è superiore al 25 percento

PageSpeed Insights di Google riceve i co­sid­det­ti dati di prova con­trol­la­ti at­tra­ver­so lo strumento open source Lighthou­se. Questi de­ter­mi­na­no il ren­di­men­to del sito web in termini di pre­sta­zio­ni eseguendo la scansione dell’URL.

Ri­tro­via­mo anche qui la clas­si­fi­ca­zio­ne in “veloce”, “nella media” e “lento”, così come i fattori FCP, LCP e CLS. Tuttavia, questi ultimi hanno valori di soglia diversi per i dati di prova con­trol­la­ti. Si ag­giun­go­no inoltre due nuovi valori: Time to in­te­rac­ti­ve (TTI), ovvero il tempo ne­ces­sa­rio per diventare in­te­rat­ti­vo, e la durata totale del blocco, ossia Total Blocking Time (TBT).

Il sesto valore dei dati di prova con­trol­la­ti è lo Speed Index (indice di velocità). L’indice di velocità misura quanto ve­lo­ce­men­te viene vi­sua­liz­za­to il contenuto nel momento del ca­ri­ca­men­to del sito web. Lighthou­se registra un video del processo di ca­ri­ca­men­to della pagina nel browser e calcola poi la sequenza visiva dei frame.

Di seguito un riepilogo dei criteri di va­lu­ta­zio­ne per i dati di prova con­trol­la­ti:

Veloce (verde):

• FCP: è compreso tra 0 e 2 secondi
• LCP: è compreso tra 0 e 2 secondi
• CLS: lo spo­sta­men­to è compreso tra lo 0 e il 10 percento
• TTI: è compreso tra 0 e 3,8 secondi
• TBT: è compreso tra 0 e 0,3 secondi
• Indice di velocità: è compreso tra 0 e 4,3 secondi

Medio (arancione)

• FCP: è compreso tra 2 e 4 secondi
• LCP: è compreso tra 2 e 4 secondi
• CLS: lo spo­sta­men­to è compreso tra il 10 e il 25 percento
• TTI: è compreso tra 3,9 e 7,3 secondi
• TBT: è compreso tra 0,3 e 0,6 secondi
• Indice di velocità: è compreso tra 4,4 e 5,8 secondi

Lento (rosso)

• FCP: è superiore a 4 secondi
• LCP: è superiore a 4 secondi
• CLS: la va­ria­zio­ne è superiore al 25 percento
• TTI: è superiore a 7,3 secondi
• TBT: è superiore a 0,6 secondi
• Indice di velocità: è superiore a 5,8 secondi

Una ca­rat­te­ri­sti­ca utile di Lighthou­se è la vi­sua­liz­za­zio­ne degli screen­shot, so­prat­tut­to quando si analizza lo spo­sta­men­to cu­mu­la­ti­vo del layout (CLS), che mostra l’andamento della struttura della pagina, comprese le in­for­ma­zio­ni sulle tem­pi­sti­che.

Il tempo di ca­ri­ca­men­to di un sito web è da anni un fattore im­por­tan­te nell’ot­ti­miz­za­zio­ne per i motori di ricerca. I SEO fanno ri­pe­tu­ta­men­te ri­fe­ri­men­to all’im­por­tan­za della velocità di ca­ri­ca­men­to per il po­si­zio­na­men­to. Però, la buona pre­sta­zio­ne di un sito web non viene valutata solo in termini di tempi brevi di ca­ri­ca­men­to, ma anche in termini di basso tempo di risposta, di­men­sio­ni della pagina, e velocità di download. Tutto ciò porta alla va­lu­ta­zio­ne finale di una pagina da parte di Google.

La velocità di un sito web è relativa. Come regola generale, tuttavia, al momento un tempo di ca­ri­ca­men­to da 1,5 a 3 secondi è con­si­de­ra­to medio, un tempo superiore a questi valori è con­si­de­ra­to lento, uno inferiore veloce e con­si­glia­to. Questi valori cambiano con lo sviluppo tec­no­lo­gi­co; il tempo medio di ca­ri­ca­men­to dei siti web nel 2016 era ancora superiore a 3 secondi.

Tuttavia, le tem­pi­sti­che men­zio­na­te non sono di per sé suf­fi­cien­ti perché PageSpeed Insights di Google consideri una pagina veloce. Ciò non dipende infatti dai mil­li­se­con­di del tempo di ca­ri­ca­men­to, ma dall’intera espe­rien­za dell’utente con il sito web cor­ri­spon­den­te, in par­ti­co­la­re per la versione mobile, le cui pre­sta­zio­ni sono un fattore di ranking a sé stante per Google.

Un sito web può essere clas­si­fi­ca­to come veloce nella versione desktop, ma ciò non significa che valga lo stesso per la sua versione mobile. Dal momento che sempre più utenti navigano prin­ci­pal­men­te sul proprio smart­pho­ne, non bisogna as­so­lu­ta­men­te tra­scu­ra­re il lato mobile. Le seguenti misure sono par­ti­co­lar­men­te utili per far sì che un sito web funzioni bene anche nella vi­sua­liz­za­zio­ne mobile:

• Rimuovere il codice Ja­va­Script inu­ti­liz­za­to per ridurre la quantità di dati durante le attività di rete.
• Uti­liz­za­re immagini in formati moderni. I formati immagine come JPEG 2000, JPEG XR e WebP spesso offrono una com­pres­sio­ne migliore rispetto a PNG o JPEG, il che consente download più rapidi e un minore consumo di dati.
• Ri­di­men­sio­na­re le immagini in modo ap­pro­pria­to per ri­spar­mia­re i dati mobili e mi­glio­ra­re i tempi di ca­ri­ca­men­to.
• Eliminare le risorse che bloccano il rendering. I codici Ja­va­Script e CSS im­por­tan­ti do­vreb­be­ro essere spe­ci­fi­ca­ti inline, e tutti gli script e gli stili non fon­da­men­ta­li po­sti­ci­pa­ti.
• Rimuovere il codice CSS inu­ti­liz­za­to per evitare un consumo di dati non ne­ces­sa­rio dell’attività di rete.
• Co­di­fi­ca­re le immagini in modo ef­fi­cien­te. Le immagini ot­ti­miz­za­te vengono caricate più ve­lo­ce­men­te e uti­liz­za­no meno dati mobili.
• As­si­cu­rar­si che il testo rimanga visibile durante il processo di ca­ri­ca­men­to dei font web uti­liz­zan­do la funzione “font-display” del CSS. Ciò significa che il testo è visibile agli utenti durante il ca­ri­ca­men­to dei font web.
• Ridurre al minimo l’impatto del codice di terze parti. Il codice di terze parti può in­fluen­za­re no­te­vol­men­te la velocità di ca­ri­ca­men­to.
• Offrire contenuti statici con la con­fi­gu­ra­zio­ne di una cache ef­fi­cien­te. Una durata lunga della cache può ac­ce­le­ra­re i tempi in caso di visite ripetute al proprio sito.
• Po­sti­ci­pa­re le immagini in­vi­si­bi­li.
• Com­pri­me­re il codice Ja­va­Script.
• Attivare la com­pres­sio­ne del testo.
• Stabilire la pre-con­nes­sio­ne alle origini richieste.
• Evitare rein­di­riz­za­men­ti inutili alla pagina.

In termini di po­si­zio­na­men­to, i risultati di PageSpeed Insights di Google per la versione mobile sono im­por­tan­ti tanto quanto quelli per il sito web desktop. Anche in questo caso, però, è difficile an­ti­ci­pa­re le mosse di Google. Tuttavia, poiché PageSpeed influenza for­te­men­te l’espe­rien­za dell’utente, si può presumere che anche questo fattore sia molto rilevante per il po­si­zio­na­men­to. In ogni caso, dal momento che anche la per­ti­nen­za e la qualità dei contenuti in­fluen­za­no il po­si­zio­na­men­to, è possibile ottenere un buon posto in clas­si­fi­ca anche con una velocità di pagina media. Teo­ri­ca­men­te, un sito web dev’essere ben impostato sia in termini tecnici che di contenuto.

PageSpeed Insights di Google fornisce una pa­no­ra­mi­ca iniziale delle pre­sta­zio­ni, dei problemi esistenti e delle possibili soluzioni per un URL specifico o per l’intero dominio. Nei paragrafi seguenti il­lu­stre­re­mo tre aree che giocano spesso un ruolo decisivo.

Le immagini sono spesso il fattore che consuma più risorse in un sito web. Spesso sono troppo grandi, hanno il formato sbagliato e sono anche de­no­mi­na­te in modo errato. Questo viene valutato ne­ga­ti­va­men­te non solo da Google, ma anche dai vi­si­ta­to­ri della pagina, che la chiu­de­ran­no spa­zien­ti­ti se, dopo alcuni secondi, non sarà ancora stato caricato tutto il contenuto di un’immagine.

La maggior parte delle immagini viene me­mo­riz­za­ta come JPEG o PNG. I formati JPEG 2000, JPEG XR e WebP sono molto più adatti per un sito web, dal momento che possono essere compressi più fa­cil­men­te senza com­por­ta­re alcuna perdita visibile di qualità. Ad esempio, un’immagine con una di­men­sio­ne di 440,7 kilobyte (KB) in formato .jpg può arrivare a 135,1 KB come JPEG 2000. Nel complesso, e so­prat­tut­to per i siti web con molte immagini, questa dif­fe­ren­za è molto evidente.

In un mondo fatto di immagini ad alta ri­so­lu­zio­ne, è fon­da­men­ta­le com­pri­me­re ogni singola immagine prima di caricarla su un sito web. Le immagini con di­men­sio­ni superiori a un certo numero di megabyte non do­vreb­be­ro nemmeno essere inserite su un sito web normale. I programmi di ela­bo­ra­zio­ne immagini come Photoshop offrono quindi anche funzioni come salvare in formato web, per cui l’immagine in questione viene salvata in una ri­so­lu­zio­ne inferiore, ot­ti­miz­za­ta per la vi­sua­liz­za­zio­ne web.

A volte sono i dettagli a fare la dif­fe­ren­za. La cache del browser facilita la tra­smis­sio­ne dei dati dal server al client, il che a sua volta aumenta la velocità della pagina. Il browser può uti­liz­za­re file me­mo­riz­za­ti nella cache di modo che tutti i file di un sito web non debbano essere scaricati nuo­va­men­te ogni volta che viene vi­sua­liz­za­ta una pagina.

La cache funziona in modo ottimale solo se il browser sa per quanto tempo salvare i file. I file di un sito web do­vreb­be­ro quindi avere una data di scadenza. Perciò, dal momento che il codice HTML dinamico cambia co­stan­te­men­te, di solito deve essere salvato più fre­quen­te­men­te rispetto alle immagini.

Il modo più comune per adattare la cache del browser è tramite il modulo “mod_expires”, perlomeno se il sito web utilizza un server Apache. Il comando “IfModule” può essere uti­liz­za­to per ve­ri­fi­ca­re se il modulo è già attivato. Con “Ex­pi­re­sBy­Ty­pe” si può accedere inoltre ai singoli tipi di file. Infine, è possibile definire la data di scadenza come “Access plus 7 days”, che imposta a sette giorni il periodo di ar­chi­via­zio­ne minimo dei file per il browser. Verranno scaricati nuo­va­men­te solo allo scadere di questo in­ter­val­lo di tempo. Il periodo può essere regolato a seconda delle pre­fe­ren­ze e cambia anche a seconda dei diversi tipi di file. Tuttavia, una settimana è un lasso di tempo testato e com­pro­va­to.

La cache può essere attivata anche con il seguente codice nel file .htaccess:

Grazi a questa im­po­sta­zio­ne è possibile mi­glio­ra­re no­te­vol­men­te il tempo medio di ca­ri­ca­men­to di un sito web (ipo­tiz­zan­do più visite da parte del vi­si­ta­to­re). Per quanto riguarda le im­po­sta­zio­ni spe­ci­fi­che, vale sempre la pena dare un’occhiata a PageSpeed Insights di Google per de­ter­mi­na­re il tempo di ese­cu­zio­ne ottimale per tutti i tipi di file.

In questo campo, ci sono molti elementi da tenere in con­si­de­ra­zio­ne e mi­glio­ra­re. La maggior parte dei siti si trova su piat­ta­for­me di shared hosting con risorse limitate. Ciò può ral­len­ta­re l’accesso e quindi il tempo di ca­ri­ca­men­to del singolo sito web. Si può risolvere il problema ottenendo più potenza (CPU, RAM, ecc.) o spostando il sito web su un server dedicato. In questo caso, tuttavia, l’im­po­sta­zio­ne hardware deve essere con­fi­gu­ra­ta in base al sito web. Un server di hosting calibrato in base alle proprie esigenze può aumentare mol­tis­si­mo le pre­sta­zio­ni di un sito web. Per avere ulteriori in­for­ma­zio­ni su questo argomento e con­fron­ta­re le due opzioni, leggete il nostro articolo sull’argomento “Shared hosting vs. dedicated hosting”.