Core/Dash Comprendere le Dashboard di Scomposizione delle Metriche

Comprendere la Dashboard di Scomposizione delle Metriche

Le metriche composite come LCP e INP aggregano molteplici eventi temporali distinti. L'ottimizzazione del punteggio totale richiede l'isolamento di questi componenti sottostanti. La dashboard di Scomposizione delle Metriche disseziona le performance in fasi granulari per identificare lo specifico collo di bottiglia.

Questo strumento sostituisce l'ottimizzazione generica con obiettivi ingegneristici precisi. Attribuisce la latenza al server, alla rete o all'esecuzione del client.

Anatomia della Dashboard di Scomposizione

La dashboard fornisce tre viste sincronizzate per isolare la causa radice della latenza:

• Contribution Donut: Visualizza il peso relativo di ogni sotto-parte. Risponde alla domanda "Qual è il fattore più grande?". Se il `Time to First Byte` occupa il 70% del grafico, sai che il problema è legato al backend.
• Historical Timeline: Mostra l'andamento dei valori assoluti di ogni componente nel tempo. Usala per correlare le variazioni di performance con eventi specifici come i deployment.
• Segmented Data Table: Scompone la metrica per dimensione (URL, Dispositivo, ecc.). Ogni riga include una barra di distribuzione che rivela il profilo unico di quel segmento, aiutandoti a individuare gli outlier.

Componenti dell'LCP (Largest Contentful Paint)

LCP misura le performance di caricamento. Dividiamo questa metrica in quattro fasi:

• TTFB (Time to First Byte): Il tempo di risposta del server. Un TTFB elevato indica query lente al database o la mancanza di edge caching.
• Load Delay: L'intervallo tra la risposta iniziale dell'HTML e l'inizio del download della risorsa dell'LCP. Questo misura la latenza di scoperta della risorsa.
• Load Time: La durata necessaria per scaricare l'asset dell'LCP (immagine o font) tramite la rete. Questo è correlato alla dimensione del file e alla larghezza di banda.
• Render Delay: Il tempo che intercorre tra il completamento del download della risorsa e il painting sullo schermo. Un Render Delay elevato spesso indica il blocco del main thread da parte di JavaScript.

Componenti del TTFB (Time to First Byte)

Il TTFB funge da proxy per la reattività del server. Questa scomposizione isola le fasi di connessione di rete:

• Waiting: Il tempo che il browser trascorre in attesa che il server generi una risposta (elaborazione del backend).
• Cache: Il tempo impiegato per controllare le cache locali o intermedie.
• DNS: La durata della ricerca nel Domain Name System.
• Connection: Il tempo impiegato per stabilire la connessione TCP.
• Request: Il tempo impiegato per inviare gli header della richiesta HTTP.

Componenti dell'INP (Interaction to Next Paint)

L'INP misura l'interattività. Segmentiamo il ciclo di vita dell'interazione per individuare il blocco del main thread:

• Input Delay: Il tempo tra l'interazione dell'utente e l'esecuzione dell'event handler. Un Input Delay elevato significa che il main thread era occupato.
• Processing: Il tempo impiegato per eseguire le callback degli eventi. Questo rappresenta l'efficienza della tua logica JavaScript.
• Presentation: Il tempo impiegato dal browser per calcolare il layout e fare il paint del frame successivo.

Flusso di Lavoro Diagnostico

Segui questa sequenza per diagnosticare una regressione:

• Quantifica il Collo di Bottiglia: Osserva il grafico a ciambella (Donut) per trovare la sotto-parte dominante. Se il `TTFB` è alto, controlla il tuo server. Se il `Resource Load Delay` è alto, controlla la priorità dei tuoi asset.
• Stabilisci la Causalità: Controlla la Timeline per correlare il picco a uno specifico deployment o aggiornamento dei contenuti.
• Isola il Contesto: Usa la Data Table per vedere se questo schema è valido in tutte le pagine o se è specifico di un determinato template. Trovare lo schema è fondamentale per implementare una correzione scalabile.

Ottimizzare i Core Web Vitals

Usa queste scomposizioni per instradare i ticket al corretto team di ingegneria. Assegna i problemi di TTFB al Backend. Assegna il Load Delay e il Render Delay al Frontend. Assegna la latenza DNS/Connection all'Infrastruttura. Questo processo di triage ottimizzato riduce il tempo di indagine e accelera la risoluzione.