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

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

Elizabeth Sweeny
Elizabeth Sweeny

Al Chrome Developer Summit, io e Paul Ireland abbiamo annunciato aggiornamenti relativi a Lighthouse: Lighthouse CI, nuova formula per il punteggio delle prestazioni e altro ancora. Insieme alle importanti novità di Lighthouse, abbiamo presentato entusiasmanti sviluppi di strumenti per le prestazioni, tra cui nuove metriche sulle prestazioni, aggiornamenti a PageSpeed Insights e Chrome User Experience Report (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 questa ha sui profitti e per monitorare miglioramenti e regressioni. Nel corso del tempo, si sono evolute nuove metriche per cogliere queste sfumature e colmare le lacune nella misurazione dell'esperienza utente. L'ultima aggiunta alla storia delle metriche sono due metriche di campo, Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS), che sono state integrate nel W3C Web Performance Working Group, e una nuova metrica lab: Tempo di blocco totale (TBT).

Largest Contentful Paint (LCP)

La metrica Largest Contentful Paint (LCP) segnala 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 Indice di velocità (SI) servivano per acquisire l'esperienza di caricamento dopo la visualizzazione iniziale, ma queste metriche sono complesse e spesso non identificano il momento in cui sono stati caricati i contenuti principali della pagina. Da una ricerca è emerso che il semplice rendering dell'elemento più grande della pagina rappresenta meglio il momento in cui vengono caricati i contenuti principali della 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 Tempo di blocco totale (TBT) misura il tempo totale tra First Contentful Paint (FCP) e Time to Interactive (TTI) in cui il thread principale è stato bloccato per un tempo sufficiente a impedire la reattività all'input.

Un'attività è considerata lunga se viene eseguita sul thread principale per più di 50 millisecondi. Ogni millisecondo oltre questo valore viene conteggiato per il tempo di blocco dell'attività.

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

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.

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

Mentre il tempo all'interattività serve a identificare il momento in cui il thread principale si cala più tardi nel caricamento, il tempo di blocco totale mira a quantificare lo sforzo del thread principale durante il caricamento. In questo modo, TTI e TBT si completano e creano un equilibrio.

Cumulative Layout Shift (CLS)

La metrica Cumulative Layout Shift (CLS) misura la stabilità visiva di una pagina e quantifica la frequenza con cui gli utenti riscontrano variazioni del layout impreviste. Lo spostamento inaspettato dei contenuti può essere molto frustrante e questa nuova metrica ti aiuta a risolvere questo problema misurando la frequenza con cui si verifica per i tuoi utenti.

Uno screencast che illustra come l'instabilità del layout può influire negativamente sugli utenti.

Consulta la guida dettagliata alla variazione cumulativa del layout per scoprire come viene calcolato e come misurarlo.

La nuova formula del punteggio delle prestazioni di Lighthouse ridurrà presto l'importanza di FMP e FCI e includerà le tre nuove metriche (LCP, TBT e CLS), in quanto consentono di acquisire meglio quando una pagina sembra utilizzabile.

In Lighthouse v6, First Contentful Paint, First Contentful Paint, Speed Index e Largest Contentful Paint sono le principali metriche sulle prestazioni del caricamento; Tempo all'interattività, First Input Delay, Max Potential First Input Delay e Tempo di blocco totale sono le principali metriche di interattività, mentre Cumulative Layout Shift è la metrica principale di prevedibilità.

Per saperne di più, consulta i punteggi delle prestazioni di Lighthouse e la nuova raccolta di metriche web.dev.

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

Nell'ultimo anno abbiamo analizzato le prestazioni web sul campo tramite i dati dell'esperienza utente di Chrome (CrUX). Sulla base degli insight ricavati da questi dati, abbiamo rivalutato le soglie che utilizziamo per etichettare un sito web come "lenta", "moderata" o "veloce" nelle prestazioni 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 per un sito, PageSpeed Insights (PSI) utilizza un determinato percentile della distribuzione totale dei dati del campo come numero aureo per il sito in questione; le soglie precedenti utilizzate erano il 90° percentile per il First Contentful Paint e il 95° percentile per il First Input Delay (FID).

Ad esempio, se un sito ha una distribuzione FCP al 50% rapida, al 30% moderata, al 20% lenta, l'FCP del 90° percentile si trova nella sezione lenta, rendendo lento il punteggio di campo complessivo per il sito.

Questa analisi è stata modificata per avere una migliore distribuzione complessiva tra i siti web e la nuova suddivisione è:

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

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

Reindirizzamenti di URL canonici in PageSpeed Insights

Per consentirti di misurare l'esperienza dell'utente con la massima precisione possibile, il team di PageSpeed Insights ha aggiunto una richiesta di nuova analisi a PSI. Per i siti che vengono reindirizzati a un nuovo URL, ti viene chiesto di eseguire nuovamente il report sull'URL di destinazione per avere un quadro più completo del rendimento effettivo.

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

CrUX nel nuovo report Velocità di Search Console

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

Report Velocità di Search Console.

Almanacco web

Dion Almaer presenta Web Almanac al CDS 2019.

Nel discorso di apertura di apertura abbiamo annunciato il lancio di Web Almanac, un progetto annuale che abbina le statistiche e le tendenze dello stato del web all'esperienza della community del web. 85 collaboratori, composti da sviluppatori di Chrome e dalla community web, si sono offerti volontari per lavorare al progetto, che analizza 20 aspetti principali relativi al web riguardanti il modo in cui i siti vengono costruiti, distribuiti ed utilizzati. Inizia a esplorare l'Almanacco web per saperne di più sullo stato del rendimento, di JavaScript e del codice di terze parti sul web.

Scopri di più

Per maggiori dettagli sugli aggiornamenti relativi agli strumenti per le prestazioni del Chrome Developer Summit, guarda l'articolo sulle evoluzioni degli strumenti per le prestazioni: