Dimensione Core/Dash: Load State (INP)

Dimensione: Load State INP (inpls)

La dimensione Load State (INP) registra lo stato di pronto del documento nel momento esatto in cui è stata acquisita un'interazione dell'utente. Ogni evento INP nel Chrome User Experience Report porta con sé un tag relativo allo stato di caricamento: uno tra loading, dom-interactive, dom-content-loaded o complete. CoreDash espone questo tag come una dimensione filtrabile e raggruppabile, in modo da poter rispondere alla domanda che i punteggi INP grezzi non possono chiarire: in quale momento del ciclo di vita della pagina si è verificata l'interazione peggiore?

Questa domanda è la linea di demarcazione tra due soluzioni ingegneristiche completamente diverse. Un problema di INP che si raggruppa durante loading richiede una strategia di differimento (deferral) di JavaScript. Un problema di INP che si raggruppa durante complete richiede di ridurre il lavoro del gestore degli eventi (event handler), diminuire il sovraccarico (overhead) del framework o frammentare i task lunghi nel codice di runtime. Il raggruppamento per stato di caricamento ti fornisce questa suddivisione senza alcuna strumentazione manuale.

Nei dati di CoreDash, tra i siti monitorati, la distribuzione delle interazioni INP per stato di caricamento è all'incirca: loading 15%, dom-interactive 20%, dom-content-loaded 25%, complete 40%. La maggior parte delle interazioni avviene dopo che la pagina è completamente caricata, ma i punteggi INP peggiori si concentrano in modo schiacciante nei primi stati.

Screenshot

Perché il Load State è importante per l'INP

La metrica Interaction to Next Paint misura l'intera latenza di un'interazione dell'utente: ritardo di input (input delay), tempo di elaborazione del gestore degli eventi e ritardo di presentazione (presentation delay) fino al rendering del frame successivo. Di questi tre componenti, il ritardo di input è quello più direttamente controllato da ciò che il browser sta facendo nel momento in cui l'utente fa clic o tocca lo schermo.

Durante la fase iniziale di caricamento della pagina, il thread principale (main thread) è al massimo della contesa. Il browser sta analizzando l'HTML, eseguendo script sincroni, costruendo il CSSOM, caricando risorse che bloccano il parser e innescando cicli di rendering uno dietro l'altro. Ogni task lungo (long task) sul thread principale è una finestra temporale durante la quale un'interazione dell'utente viene messa in coda e attende. Quell'attesa è il ritardo di input, ed è il fattore principale che determina un INP scadente durante il caricamento della pagina.

Le interazioni che arrivano dopo che document.readyState raggiunge complete trovano un thread principale più tranquillo. Il browser ha finito di caricare. Se l'INP è ancora negativo in quella fase, la causa non è la competizione per il caricamento. È il JavaScript che la tua pagina esegue in risposta alle azioni dell'utente: gestori di eventi eccessivamente pesanti, cicli di re-rendering del framework, layout thrashing innescato dagli script o codice di terze parti non ottimizzato in esecuzione in modo sincrono durante l'interazione.

Il Load State è il filtro più veloce in assoluto per separare queste due cause profonde.

I Load States

loading

La pagina non ha finito di analizzare il documento HTML. Il thread principale sta eseguendo script sincroni, recuperando risorse che bloccano il parser e costruendo il DOM iniziale. Questo è l'ambiente più ostile per l'interazione dell'utente. Il ritardo di input è al massimo perché qualsiasi task lungo blocca direttamente il browser dall'elaborazione del clic o del tocco. Gli utenti che interagiscono durante questa finestra sono in genere i visitatori più impazienti o quelli su connessioni veloci che raggiungono il contenuto visibile prima che la pagina abbia terminato il caricamento. I loro punteggi INP sono i peggiori che raccoglierai. Se una quota significativa dei tuoi eventi INP negativi riporta lo stato loading, sposta gli script non critici su defer o async ed elimina le risorse che bloccano il parser above the fold.

dom-interactive

document.readyState raggiunge interactive quando l'HTML è completamente analizzato e il DOM è costruito, ma le sottorisorse come immagini, fogli di stile e script differiti sono ancora in fase di caricamento. Gli script differiti (deferred) iniziano l'esecuzione a questo punto, il che significa che il thread principale può essere ancora pesantemente occupato. L'idratazione (hydration) del framework inizia spesso qui. Questa è una finestra temporale pericolosa perché la pagina sembra pronta all'utente ma il thread principale è ancora occupato. Il ritardo di input rimane elevato. Se i cattivi INP si concentrano qui, la soluzione è la stessa di loading: riduci il volume del lavoro sincrono che viene eseguito immediatamente dopo il completamento dell'analisi del DOM.

dom-content-loaded

L'evento DOMContentLoaded è stato attivato. Il DOM è completo e gli script differiti sono stati eseguiti. La maggior parte dei framework JavaScript ha completato la prima fase di idratazione a questo punto. Il carico di lavoro del thread principale diminuisce e le interazioni iniziano a ottenere risposte più rapide. I punteggi INP durante questo stato sono in genere migliori rispetto ai due stati precedenti, ma ancora elevati rispetto a complete. Se noti una concentrazione di interazioni scadenti qui, osserva cosa stanno facendo i tuoi script del framework o dell'applicazione nei gestori DOMContentLoaded e verifica se il lavoro di idratazione può essere suddiviso in chunk o ceduto (yielded) per consentire l'elaborazione dell'input tra un task e l'altro.

complete

document.readyState raggiunge complete quando tutte le risorse, incluse immagini, font e iframe di terze parti, sono state caricate. Questo è lo stato stazionario in cui opera la pagina per il resto della sessione. Un INP scadente in questo stato è un puro problema di runtime. La pagina ha terminato il caricamento. Se il thread principale sta ancora bloccando le interazioni, la causa è nell'esecuzione del JavaScript durante l'interazione: gestori di eventi che compiono troppo lavoro sincrono, aggiornamenti del framework che innescano costosi ricalcoli del layout o script di terze parti che eseguono ininterrottamente task lunghi. La correzione non riguarda il rinvio. Riguarda la riduzione del costo di ciò che accade quando l'utente effettivamente fa clic.

Workflow di debug

Passaggio 1: Filtra per load state in CoreDash. Apri la tabella di scomposizione dell'INP e raggruppa per Load State. Identifica quale stato presenta la quota più alta di interazioni scadenti (sopra i 200 ms). Questo ti dice immediatamente se stai osservando un problema di caricamento o un problema di runtime.

Passaggio 2: Incrocia i dati con URL e dispositivo. Combina la dimensione Load State con la dimensione URL per scoprire quali pagine specifiche generano interazioni scadenti durante le prime fasi di caricamento. I dispositivi mobili sono colpiti in modo sproporzionato durante il caricamento perché le CPU più lente allungano ogni task lungo.

Passaggio 3: Associa la correzione allo stato. Per loading e dom-interactive, esegui un audit della tua strategia di caricamento degli script utilizzando la guida Ottimizzare l'INP. Sposta gli script su defer, elimina le risorse che bloccano il rendering e usa scheduler.yield() per frammentare i lunghi task di inizializzazione. Per complete, esegui il profiling dei tuoi gestori di eventi nei Chrome DevTools e riduci il lavoro sincrono che innescano per singola interazione.

Regola empirica per l'ingegneria

Se più del 30% delle tue interazioni INP scadenti è taggato loading o dom-interactive, il tuo problema di INP è un problema di caricamento della pagina e il rinvio di JavaScript produrrà il miglioramento maggiore. Se più del 60% delle interazioni scadenti è taggato complete, il tuo problema di INP è un problema di runtime e devi ottimizzare il costo del gestore degli eventi, non l'ordine di caricamento degli script. La dimensione Load State (INP) ti fornisce questa indicazione in un'unica visualizzazione di tabella, senza richiedere una sessione di laboratorio o una strumentazione personalizzata.