Nell’anno in cui tutti quanti siamo stati invitati a dare maggior peso ai fattori tecnici che influiscono sulla soddisfazione dell’esperienza dell’utente sul sito, Google non poteva non metter mano anche allo strumento che da anni, ormai, serve proprio per misurare le prestazioni e ottimizzare le pagine. È infatti pronta la nuova versione di PageSpeed Insights, che supera i limiti fin qui riscontrati dagli utilizzatori e si propone come perfetto alleato per superare le sfide imposte dalla Page Experience, e già dal 16 novembre per utilizzare lo strumento bisogna visitare la pagina https://pagespeed.web.dev/ e non più il precedente indirizzo https://developers.google.com/speed/pagespeed/insights/.

Che cos’è PageSpeed Insights

Google PageSpeed Insights (PSI) è uno strumento che fornisce rapporti sulle prestazioni di una pagina su dispositivi mobili e desktop e suggerimenti su come migliorare tale pagina; tra l’altro, misura il tempo di caricamento di un URL, calcola un punteggio sulle prestazioni e analizza il sito Web per potenziali miglioramenti.

Nel corso degli anni, PSI si è evoluto in una fonte unica per i dati sul campo e di laboratorio, integrando le informazioni di Chrome UX Report (CrUX) e la diagnostica di Lighthouse per fornire dati che aiutano a migliorare le prestazioni del sito web.

Tuttavia, negli ultimi tempi sono diventati sempre più evidenti i problemi con questo strumento – che finora si è basato su un codice vecchio ormai di 10 anni, a cui quindi serviva una riprogettazione – in particolare rispetto al modo in cui vengono presentati i dati, perché mancava una netta separazione tra dati di laboratorio e dati sul campo.

Quindi, gli utenti che non conoscevano a sufficienza PageSpeed ​​Insights avevano difficoltà a comprendere il contesto dei dati esaminati, e di conseguenza non erano nelle condizioni di sapere cosa farne, anche a causa della confusione creata dal design del tool.

A cosa serve questo strumento e quali informazioni mostra

In precedenza, il rapporto PSI includeva i dati sulle prestazioni per dispositivi mobili e desktop in singole schede e suggerisce come migliorare una pagina.

Le componenti chiave del rapporto in ciascun caso sono simili e offrono informazioni su:

  • Performance Score – Punteggio delle prestazioni

Il Performance Score viene visualizzato nella parte superiore del rapporto PSI e riepiloga le prestazioni complessive della pagina. Questo punteggio viene determinato eseguendo Lighthouse per raccogliere e analizzare i dati di laboratorio sulla pagina. Un punteggio di 90 o superiore è considerato buono, 50-90 deve essere migliorato e inferiore a 50 è scarso.

  • Field data – Dati sul campo

I dati sul campo, provenienti dal set di dati del report CrUX, forniscono insishts sull’esperienza dell’utente nel mondo reale. I dati includono metriche come First Contentful Paint (FCP) e misurano i Core Web Vitals; insieme a tali valori, è possibile anche vedere la distribuzione delle pagine in cui il valore di una particolare metrica era Buono, Necessita di miglioramenti o Scarso (Good, Needs Improvement, Poor), indicate rispettivamente da barre verdi, ambra e rosse.

La distribuzione e i punteggi vengono visualizzati in base ai carichi di pagina per gli utenti nel set di dati CrUX. I punteggi vengono calcolati per gli ultimi 28 giorni e non sono disponibili per le nuove pagine in cui potrebbero non essere disponibili dati sufficienti sull’utente reale.

La nuova sezione Field Data

  • Origin Summary – Riepilogo origine

Gli utenti possono fare clic sulla casella di controllo Mostra riepilogo origine per visualizzare il punteggio aggregato per le metriche per tutte le pagine pubblicate dalla stessa origine negli ultimi 28 giorni.

  • Lab data – Dati di laboratorio

Il punteggio delle prestazioni del laboratorio, calcolato utilizzando Lighthouse, aiuta a eseguire il debug dei problemi di prestazioni, poiché viene raccolto in un ambiente controllato.

Il report mostra le prestazioni utilizzando metriche come First Contentful Paint, Largest Contentful Paint, Speed ​​Index, Cumulative Layout Shift, Time to Interactive e Total Blocking Time: ogni metrica viene valutata ed etichettata con un’icona che indica Buono, Necessita di miglioramenti o Scarso. Questa sezione fornisce una buona indicazione dei colli di bottiglia delle prestazioni pre-release e può aiutare a diagnosticare i problemi, ma potrebbe non catturare i problemi del mondo reale.

  • Audit

Questa sezione elenca tutti gli audit eseguiti da Lighthouse, con gli audit passati insieme alle opportunità di miglioramento e alle informazioni diagnostiche aggiuntive.

Cosa cambia con la nuova versione di PageSpeed ​​Insights

Con l’aggiornamento, che ha debuttato negli ultimi giorni, Google spera di rendere più semplice l’interpretazione del rapporto per gli sviluppatori, in modo da dare loro la possibilità di agire rapidamente sulle informazioni presentate.

Come racconta l’articolo pubblicato su web.dev, la nuova versione mira a soddisfare 3 obiettivi principali:

  • Rendere l’interfaccia utente più intuitiva, distinguendo chiaramente tra i dati derivati ​​da un ambiente sintetico e i dati raccolti dagli utenti sul campo.
  • Comunicare chiaramente come viene calcolata la valutazione Core Web Vitals nell’interfaccia utente.
  • Modernizzare il look and feel di PSI, sfruttando il Material Design.

Gli interventi di aggiornamento a PSI

La riprogettazione dell’interfaccia utente PSI mira a migliorare la presentazione dei dati del report e ad aggiungere chiarezza e granularità ai dati disponibili nel report. La nuova interfaccia utente vuole innanzitutto essere più intuitiva e aiuta gli sviluppatori a scoprire rapidamente informazioni dettagliate sulle prestazioni di laboratorio e sul campo per le loro pagine.

Le modifiche principali includono:

  • Chiara separazione tra dati di campo e di laboratorio

Il tool ora separa nettamente i dati del campo da quello dei dati del laboratorio: le precedenti etichette per “Dati sul campo” e “Dati di laboratorio” sono state sostituite con un testo che indica il significato dei dati e come possono essere d’aiuto. Inoltre, il tradizionale punteggio delle prestazioni basato sul laboratorio, che era mostrato in alto, è stato spostato nella sezione Dati di laboratorio per evitare ambiguità sull’origine del punteggio.

Esempio di scansione per i field data

Esempio di lab data

  • Valutazione dei Core Web Vitals

Il risultato della valutazione Core Web Vitals, che in precedenza appariva come una singola parola “superato” o “non superato” in Field Data, ora si distingue come una sottosezione separata con un’icona distinta, senza che questo comporti alcun cambiamento nel processo di valutazione per Core Web Vitals.

Dal punto di vista pratico, le metriche Core Web Vitals FID, LCP e CLS possono essere aggregate a livello di pagina o di origine; per le aggregazioni con dati sufficienti in tutte e tre le metriche, l’aggregazione supera la valutazione Core Web Vitals se il 75° percentile di tutte e tre le metriche è Buono. In caso contrario, l’aggregazione non supera la valutazione.

Se l’aggregazione ha dati FID insufficienti, passerà la valutazione se entrambi i 75° percentili di LCP e CLS sono buoni. Al contrario, se LCP o CLS ha dati insufficienti, la pagina o l’aggregazione a livello di origine non può essere valutata.

  • Etichette per prestazioni su dispositivi mobili e desktop

Sul versante del design, Google ha modificato il menu di navigazione in alto e incluso i collegamenti per dispositivi mobili e desktop centralmente nella pagina del report. I link risultano ora facilmente visibili e indicano chiaramente la piattaforma per la quale vengono visualizzati i dati, e questo intervento ha anche contribuito a rendere più pulita la barra di navigazione.

  • Riepilogo dell’origine

Il riepilogo dell’origine – Origin Summary fornisce il punteggio CrUX aggregato per tutte le pagine dall’origine: attualmente è visualizzato facendo clic su una casella di controllo, ma nella nuova versione di PSI questa sezione del rapporto è spostata in una nuova scheda, “Origine”, nella sezione Dati campo.

Origin Summary in PageSpeed Insights