Come usare Google PageSpeed Insights, il tool per monitorare la velocità del sito web

| Web Performance

Google Pagespeed Insights - Mirko Ciesco

Parlare del PageSpeed Insights di Google vuol dire mettere in evidenza uno dei tool per misurare la velocità del sito più famosi e utilizzati. In primo luogo perché restituisce con precisione i risultati necessari per migliorare le pagine web in termini di upload. E sai bene quanto sia importante per la SEO e l’UX.

Ma non solo, qui trovi consigli e punti da ottimizzare. Inoltre PSI raccoglie il giudizio di Google, giudice incontrastato quando si parla di performance e velocità dei siti web. Sarà questo il punto di forza?

No, come sempre dobbiamo mettere in evidenza un aspetto: noi non miglioriamo le prestazioni delle pagine web per far felice Google ma per rispettare il desiderio dei nostri utenti. Mountain View è solo il tramite, il mezzo che scegliamo per migliorare il risultato grazie al Pagespeed Insights. Ma come si usa?

Cos’è il Pagespeed Insights di Google

Si tratta di un tool gratuito che permette a SEO expert e webmaster di scoprire la velocità delle pagine web. I risultati si dividono per mobile e desktop, su una scala da 0 a 100.

Guida punteggio Lighthouse

Cosa significa tutto questo?

  • Il primo range, in rosso, indica prestazioni scadenti.
  • Il secondo, in arancione, segnala che ci sono ancora alcuni problemi.
  • Il terzo, in verde, è sinonimo di un ottimo risultato.

Da qui si giunge alla classica generalizzazione per chi si cerca sempre di ottenere 100 su Pagespeed Insights di Google. Ed è veramente importante? No, meglio concentrarsi su altri punti più interessanti.

Come funziona questo strumento

Il funzionamento di questo tool per ottenere dati sulla velocità delle singole pagine web è piuttosto semplice. Basta andare sul sito web ufficiale developers.google.com e inserire nel campo l’URL che ti interessa.

Premi invio e inizia a registrare i risultati. Il primo approccio a questa utility è abbastanza intuitivo perché i risultati del test si dividono in sezioni specifiche. Si inizia con la registrazione dei dati reali:

  • Prima visualizzazione con contenuti (PVC).
  • Ritardo prima interazione (RPI).

Questi due valori sono dati reali presi attraverso la navigazione degli utenti grazie a Chrome User Experience Report negli ultimi 30 giorni e si applicano all’intero dominio, non alla singola pagina.

Subito dopo si approfondiscono le metriche più importanti per continuare, poi, con alcune delle sezioni interessanti. Vale a dire quelle delle opportunità e della diagnostica, dove puoi trovare diversi consigli per migliorare immagini, CSS, codice e cache. Qui ci sono dei suggerimenti centrali. Uno su tutti?

Elimina le risorse di blocco della visualizzazione

Il concetto è semplice: il browser deve caricare la pagina web ma Javascript e CSS possono impedire questo lavoro perché pretendono di caricarsi prima di far vedere il resto della risorsa.

Questo anche quando sono inutili. Ecco perché è importante definire ogni passaggio. Per una prima ottimizzazione puoi usare diversi plugin WordPress che servono proprio a questo. Ne segnalo due:

Un altro suggerimento di Google: assicurati che il testo rimanga visibile durante il caricamento dei caratteri web. Per questo puoi approfondire le strategie di Font Load che ho approfondito in questo articolo.

6 dati di laboratorio da osservare

Pagespeed utilizza una serie di elementi per effettuare un check e determinare le performance della pagina. In particolar modo sfrutta dati di laboratorio e registrati sul campo. I primi si dividono 6 parametri fondamentali.

dati pagespeed google

Sono metriche necessarie per determinare la velocità di caricamento della pagina. Le trovi tutte in questa schermata dei risultati. Ma cosa significano le varie voci? A cosa si riferiscono esattamente?

First Contentful Paint

Il tempo che il browser investe per mostrare i primi contenuti della pagina. Questa metrica chiave indica quanti secondi deve attendere l’utente prima di vedere un’immagine o una stringa di testo.

First Meaningful Paint

La visualizzazione dei primi contenuti utili a chi naviga. Non valuta solo la presenza fisica, l’apparizione di testo o visual: questo passaggio riguarda la presenza del contenuto principale visibile a chi naviga.

Speed Indeex

Elemento direttamente collegato alla prima e alla seconda metrica. Questa misura definisce l’indice di velocità con il quale si caricano e si mostrano alle persone che visitano la pagina web.

Time to Interactive

Il tempo che bisogna aspettare per interagire definitivamente con la pagina. Un parametro che prende in esame la risorsa in questione e non si limita a registrare semplici apparizioni di testo e immagini.

First CPU Idle

La prima inattività della CPU indica il momento in cui le persone possono interagire e interrogare gli elementi della pagina web. La quale può gestire l’input inviato da chi si trova dall’altra parte dell’interfaccia.

Estimated Input Latency

La latenza stimata dell’input (o ritardo prima interazione potenziale). A cosa serve questo dettaglio? Definisce con esattezza la velocità con la quale una pagina risponde allo stimolo esterno eseguito da un utente.

Questi valori devono essere letti in modo differente. Il tempo per interagire con la pagina ha il peso superiore mentre la visualizzazione primi contenuti utili è all’ultimo posto. Ecco la classifica ufficiale presa da Github.

  • 5X – Time to interactive.
  • 4X – Speed index.
  • 3X – First contentful paint.
  • 2X – First cpu idle.
  • 1X – First meaningful paint.
  • 0X – Estimated input latency

Ci sono altri dati da considerare? Per ora no, ma due parametri saranno disponibili a gennaio con la nuova versione di Lighthouse v6. Sto parlando del Total Blocking Time (TBT) e Largest Contentful Paint (LCP).

aggiornamento punteggio performance su lighthouse di google
Le metriche per calcolare il punteggio di Performance di Lighthouse. Fonte web.dev

La prima indica il tempo che intercorre tra First Contentful Paint e Time to Interactive (TTI) durante il quale c’è stato un blocco del thread principale abbastanza ampio da impedire la risposta. La seconda, invece, è destinata soprattutto all’utente: misura la velocità percepita dal pubblico.

Dati sul campo di Pagespeed Insight

La grande realtà che può fare la differenza con questo tool: nel momento in cui analizzi una pagina puoi contare sui dati del Chrome User Experience Report (CrUX). Vale a dire il rapporto sull’esperienza utente di Chrome che suggerisce le metriche relative a come l’utente su Chrome naviga sul tuo sito web.

Come leggere la classifica? Il Pagespeed Insight mostra i dati sul campo (chiamati anche Real User Monitoring o semplicemente RUM), quando disponibili, raccogliendo in forma anonima le prestazioni degli utenti nel mondo reale.

E li raggruppa in 3 insiemi di esperienze di navigazione: veloci, moderate o lente. Ecco come si possono valutare (dati in millisecondi).

First Contentful Paint (FCP)

  • Veloce: da 0 a 1000
  • Moderato: da 1.000 a 3.000.
  • Lento: oltre 3.000.

First Input Delay (FID)

  • Veloce: da 0 a 100.
  • Moderato: da 100 a 300.
  • Lento: oltre 300.

Come seguire i dati su WordPress?

Non vuoi analizzare ogni singola pagina, mi sembra chiaro. Per questo esistono alcune soluzioni per aggregare i dati. Ad esempio Google Analytics suggerisce un report delle pagine più lente e lo stesso fa la Search Console. Ma una delle soluzioni più interessanti è il plugin Site Kit per WordPress.

Site Kit per WordPress - plugin di Google

Questo strumento unisce i parametri dei tool per monitorare la salute del sito web. E tra i diversi tool hai Pagespeed Insights di Google. Vuoi dare uno sguardo? Ecco la pagina ufficiale: sitekit.withgoogle.com. Scarica e installa il plugin, fai il login con i servizi e goditi i dati nella dashboard di WordPress.

I dati di Pagespeed sono veritieri?

I controlli del Pagespeed di Google vengono effettuati attraverso lo strumento di diagnostica Lighthouse, una suite completa sempre di Mountain View che analizza accessibilità, elementi SEO e UX. Ed è lo stesso Google a specificare le possibilità di questa suite. Anche i suoi tool hanno dei limiti concreti:

PSI provides both lab and field data about a page. Lab data is useful for debugging performance issues, as it is collected in a controlled environment. However, it may not capture real-world bottlenecks. Field data is useful for capturing true, real-world user experience – but has a more limited set of metrics.

Google.com

Come già indicato, Pagespeed suggerisce dati di laboratorio e registrati sul campo. I primi sono utili per risolvere problemi relativi alle prestazioni ma potrebbero ignorare i colli di bottiglia che frenano il caricamento di una risorsa. Al tempo stesso i dati registrati sul campo hanno un set di metriche limitato.

Tutto questo senza dimenticare la possibilità di ottenere risultati diversi. Lo stesso John Mueller suggerisce che l’output può cambiare senza aver effettuato modifiche. Per questo è utile confrontare i dati di Pagespeed Insights di Google con altri tool (tipo Gtmetrix, Pingdom o Speed) per avere più informazioni.

Vuoi raggiungere 100/100 su PSI?

Questo è uno dei punti di massima ambizione: toccare il 100/100 su Google Page Speed Insights. Quindi ottimizzando i consigli suggeriti da Mountain View attraverso questo tool. Ma è possibile? Ed è utile?

Riprendo ancora il tweet di John Mueller: usiamo questo strumento non per toccare il 100 su 100 ma per migliorare l’esperienza degli utenti. Spesso si lavora solo per soddisfare la metrica ignorando ciò che si offre.

Questo punteggio spesso si ottiene su pagine semivuote: se è questo il tuo obiettivo va bene, ma puoi togliere ciò che ti caratterizza per toccare questo punto? Mai ragionare solo in termini di metriche.

Da leggere: come e quando fare restyling del sito

A cosa serve veramente Pagespeed

Possiamo forse dire che i dati di PSI sono errati o superflui? No, bisogna leggere i dati per quello che sono: indicazioni utili nelle mani di un esperto che ha il compito di leggere e interpretare. Per poi svolgere le attività necessarie per ottenere il miglior risultato possibile per l’utente (e non per accontentare Google).

Vuoi migliorare il rendimento web del tuo sito?

Richiedi analisi gratuita

Strumenti per il web
Mirko Ciesco

Mirko Ciesco

Web Performer

Sviluppatore web esperto in web performance. Realizza siti web, ottimizza la SEO tecnica e migliora l’usabilità dei siti internet attraverso la web analytics. Collabora con Studio Samo e tiene corsi di web design in Novel Academy a Torino.