Scopri come importare i dati sul campo nel laboratorio per riprodurre e identificare le cause delle interazioni lente tramite test manuali.
Data di pubblicazione: 9 maggio 2023
Una parte complessa dell'ottimizzazione dell'Interaction to Next Paint (INP) è capire cosa causa un INP basso. Esistono molte potenziali cause, come script di terze parti che pianificano molte attività nel thread principale, dimensioni DOM elevate, callback di eventi costosi e altri fattori.
Migliorare l'INP può essere difficile. Per iniziare, devi sapere quali interazioni tendono a essere responsabili dell'INP di una pagina. Se non sai quali interazioni sul tuo sito web tendono ad essere le più lente dal punto di vista di un utente reale, leggi l'articolo Trovare interazioni lente sul campo. Una volta che hai a disposizione i dati sul campo, puoi testare manualmente queste interazioni specifiche negli strumenti di laboratorio per capire perché sono lente.
Cosa succede se non hai dati sul campo?
Avere dati sul campo è fondamentale, in quanto ti fa risparmiare molto tempo nel tentativo di capire quali interazioni devono essere ottimizzate. Tuttavia, potresti non avere dati sul campo. Se la tua situazione corrisponde a questa descrizione, è comunque possibile trovare interazioni da migliorare, anche se richiede un po' più di impegno e un approccio diverso.
Il tempo di blocco totale (TBT) è una metrica di laboratorio che valuta l'adattabilità della pagina durante il caricamento e correla bene con l'INP. Se il TBT della tua pagina è elevato, è un potenziale segnale che la pagina potrebbe non essere molto reattiva alle interazioni degli utenti durante il caricamento.
Per scoprire il TBT della tua pagina, puoi utilizzare Lighthouse. Se il TBT di una pagina è elevato, è possibile che il thread principale sia troppo occupato durante il caricamento della pagina e questo può influire sulla reattività di una pagina in questo momento cruciale del ciclo di vita della pagina.
Per trovare interazioni lente dopo il caricamento della pagina, potresti aver bisogno di altri tipi di dati, ad esempio flussi utente comuni che potresti aver già identificato negli analytics del tuo sito web. Ad esempio, se lavori su un sito web di e-commerce, un flusso utente comune è costituito dalle azioni che gli utenti eseguono quando aggiungono articoli a un carrello degli acquisti online e pagano.
Indipendentemente dal fatto che tu disponga o meno di dati sul campo, il passaggio successivo consiste nel testare e riprodurre manualmente le interazioni lente, perché solo quando riesci a riprodurre un'interazione lenta puoi correggerla.
Riproduci interazioni lente nel lab
Esistono diversi modi per riprodurre interazioni lente in laboratorio tramite test manuali, ma di seguito è riportato un framework che puoi provare.
Metriche in tempo reale del riquadro Prestazioni di DevTools
Il profiler delle prestazioni di DevTools è l'approccio consigliato per diagnosticare le interazioni note per essere lente, ma può richiedere del tempo identificare le interazioni lente quando non sai quali sono quelle problematiche.
Quando apri per la prima volta il riquadro Rendimento, viene visualizzata una visualizzazione delle metriche in tempo reale. Questo strumento può essere utilizzato per provare rapidamente una serie di interazioni al fine di individuare quelle problematiche, prima di passare al profiler delle prestazioni più dettagliato. Man mano che interagisci, i dati di diagnostica vengono visualizzati nel log Interazioni (con l'interazione INP evidenziata). Queste interazioni possono essere espanse per visualizzare le suddivisioni delle fasi: