Evoluzioni degli strumenti per la velocità: novità dal Chrome Developer Summit 2019

Nuove metriche sul rendimento, aggiornamenti a PageSpeed Insights e al Report sull'esperienza utente di Chrome (CrUX) e altro ancora.

Elizabeth Sweeny
Elizabeth Sweeny

Al Chrome Developer Summit, io e Paul Ireland abbiamo annunciato degli aggiornamenti a Lighthouse, ovvero Lighthouse CI, nuova formula del punteggio delle prestazioni e altro ancora. Oltre alle grandi novità di Lighthouse, abbiamo presentato interessanti sviluppi per gli strumenti per le prestazioni, tra cui nuove metriche sulle prestazioni, aggiornamenti a PageSpeed Insights e al Report sull'esperienza utente di Chrome (CrUX) e approfondimenti dall'analisi dell'ecosistema web di Web Almanac.

Nuove metriche sul rendimento

Misurare le sfumature dell'esperienza di un utente è fondamentale per quantificare l'impatto che ha sul tuo profitto e monitorare i miglioramenti e le regressioni. Nel tempo, sono state sviluppate nuove metriche per cogliere queste sfumature e colmare le lacune nella misurazione dell'esperienza utente. L'ultima novità in merito alle metriche è costituita da due metriche di campo, Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS), che vengono integrate nel W3C Web Performance Working Group, nonché in una nuova metrica del lab Total Block Time (TBT).

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) indica il momento in cui l'elemento di contenuti più grande diventa visibile nell'area visibile.

Prima di Largest Contentful Paint, First Meaningful Paint (FMP) e Speed Index (SI) servivano per registrare l'esperienza di caricamento dopo la pittura iniziale, ma queste metriche sono complesse e spesso non identificano quando sono stati caricati i contenuti principali della pagina. La ricerca ha dimostrato che il semplice monitoraggio del momento in cui viene visualizzato l'elemento più grande della pagina rappresenta meglio il momento in cui vengono caricati i contenuti principali di una pagina.

La nuova metrica Largest Contentful Paint sarà presto disponibile nei report Lighthouse e nel frattempo puoi misurare LCP in JavaScript.

Tempo di blocco totale (TBT)

La metrica Total Block Time (TBT) misura il tempo totale tra il First Contentful Paint (FCP) e il Time to Interactive (TTI) in cui il thread principale è stato bloccato per un tempo sufficiente a impedire la reattività dell'input.

Un'attività viene considerata lunga se viene eseguita nel thread principale per più di 50 millisecondi. Qualsiasi millisecondo superiore viene conteggiato nel tempo di blocco della relativa attività.

Un diagramma che rappresenta un'attività di 150 millisecondi con 100 millisecondi di tempo di blocco.

Il tempo di blocco totale di una pagina è la somma dei tempi di blocco di tutte le attività lunghe che si sono verificate tra FCP e TTI.

Un diagramma che rappresenta cinque attività con 60 millisecondi di tempo di blocco totale su 270 millisecondi di tempo del thread principale.

Sebbene il tempo di risposta sia utile per identificare quando il thread principale si attenua in un secondo momento durante il caricamento, la durata blocco totale mira a quantificare la sollecitazione del thread principale durante il caricamento. In questo modo, il TTI e il TBT si completano a vicenda e forniscono equilibrio.

Cumulative Layout Shift (CLS)

La metrica CLS (Cumulative Layout Shift) misura la stabilità visiva di una pagina e quantifica la frequenza con cui gli utenti riscontrano variazioni di layout impreviste. I movimenti imprevisti dei contenuti possono essere molto frustranti e questa nuova metrica ti aiuta a risolvere il problema misurando la frequenza con cui si verifica per gli utenti.

Uno screencast che mostra in che modo l'instabilità del layout può incidere negativamente sugli utenti.

Consulta la guida dettagliata al Cumulative Layout Shift per scoprire come viene calcolato e misurato.

A breve la nuova formula del punteggio delle prestazioni di Lighthouse ridurrà l'enfasi su FMP e FCI e includerà le tre nuove metriche (LCP, TBT e CLS), che migliorano meglio quando una pagina risulta utilizzabile.

In Lighthouse 6, First Contentful Paint, Speed Index e Largest Contentful Paint sono le metriche principali relative alle prestazioni di caricamento; Tempo all'interattività, First Input Delay, First Input Delay potenziale max e Tempo di blocco totale sono le metriche principali relative all'interattività; Cumulative Layout Shift è la metrica principale di prevedibilità.

Per scoprire di più, consulta la pagina relativa al punteggio del rendimento di Lighthouse e la nuova raccolta di metriche di web.dev.

Soglie dei dati dei campi (CrUX) modificate in PageSpeed Insights

Nell'ultimo anno abbiamo analizzato il rendimento web sul campo tramite i dati del Report sull'esperienza utente di Chrome (CrUX). Grazie alle informazioni ricavate da questi dati, abbiamo rivalutato le soglie che utilizziamo per etichettare un sito web come "lento", "moderato" o "veloce" in base al rendimento sul campo.

Due grafici a barre che mostrano la distribuzione della velocità lenta, veloce e moderata per FCP e FID.

Per ottenere una valutazione complessiva di un sito, PageSpeed Insights (PSI) utilizza un determinato percentile della distribuzione totale dei dati sul campo come numero ideale per quel sito; le soglie precedenti utilizzate erano il 90° percentile per il primo messaggio utile e il 95° percentile per il ritardo del primo input (FID).

Ad esempio, se un sito ha una distribuzione FCP del 50% veloce, 30% moderata, 20% lenta, il FCP del 90° percentile si trova nella sezione lenta, il che rende il punteggio complessivo del campo per il sito lento.

Questo valore è stato modificato per avere una distribuzione complessiva migliore sui siti web e la nuova suddivisione è la seguente:

Metrica Percentile complessivo Veloce (ms) Moderata (ms) Lenta (ms)
FCP 75° percentile 1000 1000-3000 3000+
FID 95° percentile 100 100-300 300+

Ad esempio, ora se un sito ha una distribuzione FCP del 50% veloce, 30% moderata, 20% lenta, il FCP del 75° percentile si trova nella sezione moderata, il che rende il punteggio complessivo del campo per il sito moderato.

Reindirizzamenti degli URL canonici in PageSpeed Insights

Per consentirti di misurare l'esperienza dell'utente nel modo più accurato possibile, il team di PageSpeed Insights ha aggiunto a PSI una richiesta di esecuzione di un'altra analisi. Per i siti reindirizzati a un nuovo URL, viene richiesto di eseguire nuovamente il report sull'URL di destinazione per avere un quadro più completo del rendimento effettivo.

Interfaccia utente di PSI che mostra il reindirizzamento dell'URL e il pulsante "Rianalizza"

CrUX nel nuovo report Velocità di Search Console

Una settimana prima del Chrome Dev Summit, Search Console ha implementato il nuovo report Velocità. Utilizza i dati del Report sull'esperienza utente di Chrome per aiutare i proprietari di siti a rilevare potenziali problemi relativi all'esperienza utente. Il report Velocità assegna automaticamente gruppi di URL simili nei bucket "Veloce", "Moderato" e "Lenta" e aiuta a dare la priorità ai miglioramenti delle prestazioni per problemi specifici.

Report Velocità di Search Console.

Almanacco web

Dion Almaer presenta l'Almanacco web al CDS 2019.

Nel keynote di apertura abbiamo annunciato il lancio del Web Almanac, un progetto annuale che associa le statistiche e le tendenze relative allo stato del web con le competenze della comunità web. 85 collaboratori, tra cui sviluppatori di Chrome e della community web, si sono offerti volontari per lavorare al progetto, che analizza 20 aspetti fondamentali del web in relazione a come i siti vengono creati, pubblicati e vissuti. Inizia a esplorare l'Almanacco web per scoprire di più sullo stato delle prestazioni, di JavaScript e del codice di terze parti sul web.

Scopri di più

Per ulteriori dettagli sugli aggiornamenti degli strumenti per il rendimento del Chrome Developer Summit, guarda il talk Evoluzione degli strumenti per la velocità: