PageSpeed Insights di Google: cosa sono?
PageSpeed Insights è un tool gratuito di Google che permette a SEO expert e Webmaster di analizzare e valutare la velocità di caricamento di un sito web per dispositivi desktop e mobile. Questo strumento restituisce con precisione i risultati necessari per migliorare le pagine web in termini di upload.
Il funzionamento è semplice, una volta atterrati su PSI basta inserire nel campo, l’URL del sito che ci interessa analizzare. Premuto invio inizierà a registrare i risultati che verranno poi restituititi in 2 sezioni specifiche: Field data o dati RUM (Real User Monitoring): ossia dati che raccolgono in forma anonima le prestazioni di utenti reali. Dati di prova (Lab Data): ottenuti in laboratorio, PSI li analizza come fosse un bot. Questi dati sono passati in secondo piano per dare spazio a ciò che viene registrato dagli utenti reali durante la navigazione. Ma cosa rappresentano esattamente questi risultati? I dati forniti da PageSpeed si riferiscono ai Core Web Vitals, che sono dei parametri individuati da Google per definire la qualità dell’usabilità di una pagina web:
- Largest Contentful Paint (LCP).
- First Contentful Paint (FCP).
- First Input Delay (FID).
- Cumulative Layout Shift (CLS).
I risultati a loro volta si dividono per mobile e desktop in una scala da 0 a 100.
I risultati in rosso indicano prestazioni scarse. I risultati in arancione segnalano che ci sono cose da migliorare. I risultati in verde ottime prestazioni. Oltre a questi risultati, vengono forniti anche vari consigli da parte di Google su come migliorarli. E da questo si giunge ad un concetto fondamentale, ossia quella cerchia di proprietari e sviluppatori di siti web che cercano di ottenere sempre 100. Ma è veramente importante? No, meglio piuttosto concentrarsi su l’aspetto più importante dei risultati, ossia le raccomandazioni. Ciò che conta davvero è la velocità effettiva del sito e la performance percepita, perché ricordate, ai visitatori del vostro sito non importerà quale sia il vostro punteggio su PSI quanto piuttosto poter navigare il più rapidamente possibile. La cosa fondamentale è, individuare i punti problematici, in modo da poter intervenire per migliorare le prestazioni di velocità di caricamento.
Quali sono i valori più importanti e come ottimizzarli
Dal 2018 i punteggi di PSI vengono calcolati con Lighthouse, un tool in grado di valutare le prestazioni di ogni tipo delle pagine web simulando le condizioni di caricamento di un sito da un dispositivo di fascia media (Moto G4) su una rete mobile per dispositivi mobili e desktop. Ma nel dettaglio, quali sono queste raccomandazioni?
Eliminare le risorse bloccanti
Si sa, da sempre elementi Javascript e CSS sono tra le cause principali cause di rallentamento di caricamento delle pagine web che influenzano negativamente sulla velocità del sito. Le soluzioni possono essere: Processo di minificazione, ossia un processo che consente di ridurre le dimensioni del codice rimuovendo da esso elementi inutili come commenti, spazi bianchi, testi a capo ed altre cose di secondaria importanza che sicuramente sono serviti in fase di programmazione ma inutili al compilatore. In questo modo i file risulteranno meno pesanti e la pagina caricherà più in fretta. L’altra soluzione è aggiungere l’attributo “defer” ai file Javascript, in questo modo il file js viene scaricato in modo asincrono ed eseguito solo una volta terminato il caricamento del file HTML.
<script src="demo_defer.js" defer></script>
Riduci al minimo il numero di richieste
Alcuni elementi Js e CSS hanno bisogno di essere caricati completamente per far funzionare la pagina, ma più richieste il browser deve eseguire, maggiore sarà il tempo impiegato dal caricamento del sito. Sarà naturale quindi che Google vi chieda di ridurre al minimo il numero di richieste necessarie, fornendo un elenco con le relative dimensioni. Naturalmente non sarà possibile intervenire su tutto l’elenco, come abbiamo detto prima queste sono raccomandazioni che PSI ci suggerisce. Una cosa che però possiamo fare e che anche Google raccomanda è quella di creare un budget di performance, ossia un insieme di limiti imposti alle metriche che influiscono sulle prestazioni del sito come:
- Dimensione massima di un’immagine
- Numero massimo di web font da utilizzare
- Totale di risorse esterne da utilizzare come gli script
Ridurre il TTFB
Il Time to First Byte (TTFB) misura il tempo necessario che un server impiega per inviare il primo byte di dati al browser appena riceve la richiesta. Non si riferisce direttamente alla velocità del sito ma avere questo parametro positivo su PSI è una delle raccomandazioni che il tool vi suggerisce. Andando sul pratico quali sono le soluzioni per ridurre questo parametro?
- Scegliere un provider di web hosting di alta qualità focalizzato sulla velocità
- Utilizzo di temi e plugin leggeri
- Riduzione del numero di plugin installati sul vostro sito
- Utilizzo di una rete di distribuzione dei contenuti (CDN)
- Implementazione della cache del browser
- Scelta di un solido provider di Domain Name System (DNS)
Immagini di dimensioni adeguate
Una delle cose che maggiormente influisce sulla velocità di caricamento sono i media, specialmente se inserite con dimensioni più grandi del necessario, per ovviare a questa problematica si può aggiungere l’attributo “srcset” al tag <img> che permette di inserire dimensioni diverse della stessa immagine a seconda dello schermo di riferimento e farle leggere al browser che sceglierà a seconda delle dimensioni fornite, quella migliore da utilizzare per quel determinato dispositivo.
<img srcset="header-image-800w.jpg 800w,
Header-image-480w.jpg 480w,
Header-image-320w.jpg 320w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="header-image-800w.jpg">Rinviare l’immagine fuori schermo
Si tratta in realtà di implementare il “Lazy loading” ossia quel processo che permette di caricare le immagini in differita cioè solo quelle che l’utente visualizzerà man mano che scrolla la pagina. Utilizzare formati più moderni per le immagini Usando il formato Webp per le immagini queste avranno caratteristiche di compressione maggiori rispetto ai più diffusi PNG e JPEG. In caso di incompatibilità con queto determinato formato Google PageSpeed vi informerà.
Assicurarsi che il testo rimanga visibile
Un altro aspetto che solitamente impatta sui tempi di caricamento di una pagina web sono i font, sarà capitato a tutti di aprire un sito ed assistere a quel fastidioso effetto per il quale la pagina rimane senza testo per qualche istante fino a quando questo non compare bruscamente, si chiama FOIT (Flash of Invisible Text) e si verifica perché il browser attende di aver effettuato completamente il download del font prima di far comparire il testo. Per ovviare a questa problematica basta inserire la direttiva display: swap all’interno del foglio di stile.
Preconnect
Quando nel vostro sito sono presenti risorse da terze parti, quindi risorse esterne che hanno bisogno di stabilire una connessione con il browser, è buona regola aggiungere l’attribuito “preconnect” ai <link> per velocizzare questa procedura, questo comunicherà al browser di iniziare a precaricare subito queste risorse migliorando quindi le prestazioni.
<link rel="preconnect" href="https://esempio.com">Perché i Google PageSpeed Insights sono così importanti?
Google PageSpeed Insights non è l’unico tool che fornisce un’analisi sulla velocità di un sito, ci sono altri validi strumenti che offrono lo stesso servizio, ma quello che contraddistingue PS sono il dettaglio delle informazioni che fornisce come ad esempio: le due tipologie di dati già accennati all’inizio. Un altro aspetto importante è il Mobile-First, visto che le esigenze sono aumentate da quando la maggior parte del traffico internet avviene da mobile e dato che gli utenti dei dispositivi mobili sono diventati ancora meno pazienti rispetto a chi naviga da computer, PSI ha dato priorità proprio a questo aspetto. Non solo, la velocità di caricamento, come sappiamo, impatta anche sul posizionamento nella SERP. L’algoritmo di Google si basa sul fornire più risposte pertinenti possibili alle query, con il minimo sforzo da parte degli utenti. I fattori che possono influenzare negativamente il posizionamento di una pagina sono:
- elementi della pagina che impiegano troppo tempo a caricarsi
- tempo eccessivo che intercorre tra l’interazione con la pagina e l’effettiva risposta
- conseguente abbandono della pagina web entro pochi secondi da parte degli utenti
per queste ragioni Google PageSpeed è così fondamentale, perché è in grado appunto di identificare i fattori che rallentano una pagina web e fornire suggerimenti di miglioramento ben dettagliati, tutto finalizzato a migliorare l’esperienza utente.
Velocità della pagina: Field Data (dati RUM) e Lab Data
Le tipologie di dati restituire dall’analisi di PSI sono 2 e salterà subito all’occhio un dettaglio fondamentale, ossia che i Field Data (dati RUM) e i Dati di prova restituiscono risultati che non corrispondono esattamente e questo è normale dal momento che i secondi vengono creati in condizioni fisse, mentre i primi si basano sulla velocità di caricamento effettiva analizzata nel corso del tempo. Per avere un’idea ben precisa dei risultai di caricamento del sito, queste due tipologie vanno considerate combinandole insieme. Piccola precisazione sui Field Data: Questi valori sono dati reali registrati da Chrome User Experience Report attraverso la navigazione degli utenti e si riferiscono agli ultimi 28 giorni quindi dobbiamo tenere a mente che le migliorie che andremo ad apportare non si riferiranno all’attuale stato del sito ma appunto a quello di 28 giorni prima.
Field Data (dati RUM)
I valori che questi dati restituiscono si riferiscono a “First Input Delay (FID)”, “First Contentful Paint (FCP)”, “Largest Contentful Paint (LCP)” e “Cummulative Layout Shift (CLS)”. Queste metriche possono mostrarsi in una delle 3 colorazioni cui accennato all’inizio: Rosso (scarso)
- FID: è superiore a 0,3 secondi.
- FCP: è superiore a 3 secondi.
- LCP: è superiore a 4 secondi.
- CLS: la variazione è superiore al 25%.
Arancione (da migliorare)
- FID: compreso tra 0,1 e 0,3 secondi.
- FCP: compreso tra 1 e 3 secondi.
- LCP: compreso tra 2,5 e 4 secondi.
- CLS: la variazione è compresa tra 10% e 25%.
Verde (ottimo)
- FID: compreso tra 0 e 0,1 secondi.
- FCP: compreso tra 0 e 1 secondo.
- LCP: compreso tra 0 e 2,5 secondi.
- CLS: la variazione è compresa tra 0% e 10%.
Lab Data
Anche qui troviamo gli stessi valori dei Field Data (dati RUM), ad eccezione del FID, ma in più si aggiungono anche il tempo di interattività (TTI), l’indice di velocità (Speed Index) e il Total Blocking Time (TBT). Rosso (scarso)
- FCP: è superiore a 4 secondi.
- Speed Index: è superiore a 5,8 secondi.
- LCP: è superiore a 4 secondi.
- TTI: è superiore a 7,3 secondi.
- TBT: è superiore a 0,6 secondi.
- CLS: la variazione è superiore al 25%.
Arancione (da migliorare)
- FCP: compreso tra 2 e 4 secondi.
- Speed Index: compreso tra 4,4 e 5,8 secondi.
- LCP: compreso tra 2 e 4 secondi.
- TTI: compreso tra 3,9 e 7,3 secondi.
- TBT: compreso tra 0,3 e 0,6 secondi.
- CLS: la variazione è compresa tra 10% e 25%.
Verde (ottimo)
- FCP: compreso tra 0 e 2 secondi.
- Speed Index: compreso tra 0 e 4,3 secondi.
- LCP: compreso tra 0 e 2 secondi.
- TTI: compreso tra 0 e 3,8 secondi.
- TBT: compreso tra 0 e 0,3 secondi.
- CLS: la variazione è compresa tra 0% e 10%.
Conclusioni
In conclusione è chiaro come una migliore esperienza utente permetta a Google di classificare più in alto i siti web che appaiono nella SERP. PageSpeed Insights è un ottimo strumento per aiutarci in questo compito grazie ai suoi numerosi consigli di facile interpretazione. Abbiamo inoltre capito come un punteggio molto alto non garantirà necessariamente un buon posizionamento, quindi concentriamoci piuttosto sui consigli che PSI ci fornisce e non sottovalutiamo nessun aspetto inerente all’usabilità del sito.
