Scopri le ultime novità di PageSpeed Insights per misurare e ottimizzare meglio la qualità della tua pagina e del tuo sito.
Nel corso degli anni, PageSpeed Insights (PSI) si è evoluto in una fonte completa per i dati sul campo e i dati di laboratorio. Integra le informazioni del report sull'esperienza utente di Chrome (CrUX) e della diagnostica di Lighthouse per fornire approfondimenti che aiutano a migliorare le prestazioni del tuo sito web.
Oggi siamo lieti di annunciare una versione aggiornata di PSI. Sebbene sia un elemento fondamentale della nostra suite di strumenti di velocità, il codebase PSI risale a dieci anni fa, conteneva molto codice legacy ed era dovuto a una riprogettazione. Abbiamo sfruttato questa opportunità per risolvere problemi relativi all'interfaccia in PSI che a volte rendevano difficile per gli utenti navigare nel report. I nostri obiettivi principali erano:
- Rendi l'interfaccia utente più intuitiva differenziando chiaramente i dati provenienti da un ambiente sintetico da quelli raccolti dagli utenti sul campo.
- Comunicare in modo chiaro come viene calcolata la valutazione Segnali web essenziali nell'interfaccia utente.
- Modernizza l'aspetto di PSI sfruttando il material design.
Questo post introduce le nuove funzionalità di PSI che verranno rilasciate entro la fine dell'anno.
Novità
La riprogettazione dell'interfaccia utente di PSI mira a migliorare la presentazione dei dati dei report e ad aggiungere chiarezza e granularità ai dati disponibili nel report. La nuova UI è pensata per essere più intuitiva e aiutare gli sviluppatori a scoprire rapidamente insight sulle prestazioni di lab e campi per le loro pagine. Le modifiche fondamentali all'UI includono:
Chiara separazione dei dati sul campo e di laboratorio
Abbiamo modificato l'interfaccia utente per separare in modo distinto i dati sul campo dai dati di prova controllati. Le etichette per "Dati sul campo" e "Dati di Labs" sono state sostituite con un testo che indica il significato dei dati e il modo in cui possono essere utili. Abbiamo anche portato la sezione Dati campo in alto. Il tradizionale punteggio delle prestazioni basato sui lab, attualmente visualizzato in alto, è stato spostato nella sezione Dati di Lab per evitare ambiguità sull'origine del punteggio.
valutazione Core Web Vitals
Il risultato della valutazione di Segnali web essenziali, che in precedenza era apparso come una singola parola "superato" o "non superato" nei dati sui campi, ora viene visualizzato come una sottosezione separata con un'icona distinta.
Tieni presente che non sono state apportate modifiche al processo di valutazione di Core Web Vitals. Le metriche di Core Web Vitals FID, LCP e CLS possono essere aggregate a livello di pagina o di origine. Nel caso di aggregazioni con dati sufficienti in tutte e tre le metriche, l'aggregazione supera la valutazione Segnali web essenziali se il 75° percentile di tutte tre metriche è Buono. In caso contrario, l'aggregazione non supera la valutazione. Se l'aggregazione non dispone di dati FID sufficienti, supererà la valutazione se il 75° percentile di LCP e CLS sono Buono. Se la metrica LCP o CLS non dispone di dati sufficienti, non è possibile valutare l'aggregazione a livello di pagina o di origine.
Etichette per il rendimento su dispositivi mobili e computer
Abbiamo modificato il menu di navigazione in alto e incluso i link per dispositivi mobili e desktop al centro della pagina del report. I link sono ora facilmente visibili e indicano in modo chiaro la piattaforma per cui vengono mostrati i dati. Ciò ha contribuito anche a rendere più pulita la barra di navigazione.
Riepilogo origine
Il Riepilogo origine, che fornisce il punteggio CrUX aggregato per tutte le pagine dell'origine, viene attualmente visualizzato facendo clic su una casella di controllo. Abbiamo spostato questa sezione del report in una nuova scheda, "Origine", nella sezione Dati campo.
Ulteriori informazioni utili
Il report ora include una nuova sezione informativa nella parte inferiore di ogni campo e la scheda del lab con i seguenti dettagli sui dati campionati:
- Periodo di raccolta dei dati
- Durate delle visite
- Dispositivi
- Connessioni di rete
- Dimensione campione
- Versioni di Chrome
Queste informazioni dovrebbero migliorare la distinzione tra i dati di lab e quelli sul campo e aiutare gli utenti che in precedenza non conoscevano le differenze tra le due origini dati (lab e field).
Espandi visualizzazione
Abbiamo una nuova funzionalità "Espandi visualizzazione" che aggiunge una funzione di visualizzazione in dettaglio alla sezione dei dati del campo e consente di visualizzare dettagli granulari per le metriche di Core Web Vitals.
Immagine della pagina
Abbiamo rimosso l'immagine della pagina caricata, che appare destra accanto ai dati del campo. L'immagine e le miniature della pagina che mostra la sequenza di caricamento saranno disponibili entrambe nella sezione dei dati del lab.
Per la documentazione aggiornata del prodotto, visita la pagina https://developers.google.com/speed/docs/insights/.
Aggiornamenti a web.dev/measure
Per ridurre le incoerenze tra i diversi strumenti del nostro strumento per il rendimento, stiamo aggiornando anche web.dev/measure in modo che sia basato direttamente sull'API PageSpeed Insights.
In precedenza, gli sviluppatori eseguivano report sia tramite lo strumento PSI che tramite /measure e visualizzavano numeri di Lighthouse diversi. Uno dei motivi principali delle differenze è che /measure ha origine tutti i test dagli Stati Uniti (perché in precedenza aveva un backend cloud con base negli Stati Uniti).
Con /measure che chiama la stessa API direttamente dell'interfaccia utente di PSI, gli sviluppatori otterranno un'esperienza più coerente quando utilizzano PSI e /measure. Abbiamo anche apportato alcune modifiche a /misurare in base al modo in cui gli utenti utilizzano lo strumento. Ciò significa che l'esperienza di accesso per /measure non sarà più disponibile, ma la funzionalità più utilizzata, ovvero la visualizzazione di più categorie, continuerà a essere disponibile.
PSI oggi
Facciamo un passo indietro e diamo un'occhiata a cosa offre l'attuale report PageSpeed Insights. Il report PSI include i dati sulle prestazioni di dispositivi mobili e computer in singole schede e suggerisce come puoi migliorare una pagina. I componenti chiave del report in ciascun caso sono simili e sono costituiti dai seguenti:
Punteggio rendimento: il punteggio delle prestazioni viene visualizzato nella parte superiore del report PSI e riassume le prestazioni complessive della pagina. Questo punteggio viene determinato eseguendo Lighthouse per raccogliere e analizzare i dati del lab sulla pagina. Un punteggio pari o superiore a 90 è considerato buono, un punteggio minimo di 50-90 richiede miglioramenti e un punteggio inferiore a 50 è scarso.
Dati dei campi: i dati sul campo, ricavati dal set di dati del report CrUX, forniscono informazioni sull'esperienza utente reale. I dati includono metriche come First Contentful Paint (FCP) e misura i Segnali web essenziali (First Input Delay (FID), Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS). Insieme ai valori delle metriche, puoi anche vedere la distribuzione delle pagine in cui il valore di una determinata metrica era Buono, Richiede miglioramenti o Scadente, indicate rispettivamente da barre verdi, ambra e rosse. La distribuzione e i punteggi vengono mostrati in base ai caricamenti di pagine 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 relativi agli utenti.
Riepilogo origine: gli utenti possono fare clic sulla casella di controllo Mostra riepilogo origine per visualizzare il punteggio aggregato delle metriche per tutte le pagine pubblicate dalla stessa origine negli ultimi 28 giorni.
Dati di lab: il punteggio delle prestazioni del lab, calcolato con Lighthouse, aiuta a eseguire il debug dei problemi di prestazioni, poiché vengono raccolti in un ambiente controllato. Il report mostra il rendimento utilizzando metriche comeFirst Contentful Paint, Largest Contentful Paint, Indice di velocità, Cumulative Layout Shift, Tempo all'interattività e Tempo di blocco totale. A ogni metrica è assegnato un punteggio ed è associata a un'icona che indica Buono, Richiede miglioramenti o Scadente. Questa sezione fornisce una buona indicazione dei colli di bottiglia delle prestazioni prima del rilascio e può aiutare a diagnosticare i problemi, ma potrebbe non comprendere problemi reali.
Verifiche: in questa sezione sono elencati tutti i controlli eseguiti da Lighthouse, quelli superati insieme alle opportunità di miglioramento e a ulteriori informazioni diagnostiche.
Sfide con l'attuale design PSI
Come mostrato nello screenshot sopra, i diversi punti dati dei dati di laboratorio e sul campo non sono isolati chiaramente e gli sviluppatori che non hanno mai utilizzato PSI potrebbero non comprendere facilmente il contesto dei dati e come procedere. Questa confusione ha portato a molti post del blog "How to" sulla decifrazione del report PSI.
Con il nuovo design, speriamo di semplificare l'interpretazione del report per gli sviluppatori, in modo che passino rapidamente dalla generazione del report PSI ad agire in base alle informazioni incluse al suo interno.
Scopri di più
Per ulteriori dettagli sugli aggiornamenti degli strumenti per le prestazioni, guarda il discorso di apertura per il Chrome Dev Summit 2021. Ti aggiorneremo sulla data di uscita di PSI e sulle modifiche a web.dev/measure.
Grazie a Milica Mihajlija, Philip Walton, Brendan Kenny ed Ewa Gasperowicz per il loro feedback su questo articolo.