Smart CDN OptiPic — Altro che compressione. Ottimizzazione immediata delle immagini complesse con conversione in WebP [Più]
Previous Next

Interazione successiva alla prima visualizzazione (INP)

I dati sull'utilizzo di Chrome mostrano che il 90% del tempo di utilizzo di una pagina è trascorso dopo il caricamento. Pertanto, è importante misurare attentamente la reattività durante l'intero ciclo di vita della pagina. Questo è ciò che valuta la metrica INP.

Una buona reattività significa che una pagina risponde rapidamente alle interazioni dell'utente. Quando una pagina risponde a un'interazione, il risultato è un feedback visivo, che il browser presenta nel fotogramma successivo. Il feedback visivo ti dice se, ad esempio, un elemento aggiunto al carrello degli acquisti online viene effettivamente aggiunto, se un menu di navigazione mobile si è aperto, se i contenuti di un modulo di accesso vengono autenticati dal server e così via.

Alcune interazioni richiederanno naturalmente più tempo di altre, ma per interazioni particolarmente complesse è importante presentare rapidamente un primo feedback visivo come segnale all'utente che qualcosa sta succedendo. Il tempo fino al prossimo disegno è la prima opportunità per farlo. Pertanto, l'obiettivo di INP non è misurare tutti gli effetti eventuali dell'interazione (come il recupero della rete e gli aggiornamenti dell'interfaccia utente da altre operazioni asincrone), ma il tempo in cui il successivo disegno viene bloccato. Ritardando il feedback visivo, potresti dare agli utenti l'impressione che la pagina non stia rispondendo alle loro azioni.

L'obiettivo di INP è garantire che il tempo tra l'inizio di un'interazione da parte dell'utente e il successivo disegno sia il più breve possibile, per tutte o la maggior parte delle interazioni effettuate dall'utente.

Nel video seguente, l'esempio a destra fornisce un feedback visivo immediato che un'accordion si sta aprendo. Mostra anche come una reattività scadente possa causare risposte multiple indesiderate all'input perché l'utente pensa che l'esperienza sia difettosa.

An example of poor versus good responsiveness. At left, long tasks block the accordion from opening. This causes the user to click multiple times, thinking the experience is broken. When the main thread catches up, it processes the delayed inputs, resulting in the accordion opening and closing unexpectedly.

Questo articolo spiega come funziona INP, come misurarlo e indica risorse per migliorarlo.

INP è una metrica che valuta la reattività complessiva di una pagina rispetto alle interazioni dell'utente, osservando la latenza di tutti i clic, tocchi e tasti che si verificano durante la visita di un utente a una pagina. Il valore finale di INP è l'interazione più lunga osservata, ignorando gli outliers.

Come indicato sopra, INP viene calcolato osservando tutte le interazioni effettuate su una pagina. Per la maggior parte dei siti, l'interazione con la peggiore latenza viene riportata come INP. Tuttavia, per le pagine con un elevato numero di interazioni, piccoli blocchi casuali possono causare un'interazione insolitamente alta in un sito altrimenti reattivo. Più interazioni ci sono, più probabile è che ciò accada. Per contrastare questo fenomeno e ottenere una migliore misura della reattività effettiva per quei tipi di pagine, ignoriamo la più alta interazione per ogni 50 interazioni. La stragrande maggioranza delle esperienze delle pagine non ha oltre 50 interazioni, quindi verrà riportata l'interazione peggiore. Successivamente, verrà riportato il 75° percentile di tutte le visualizzazioni delle pagine, il quale rimuove ulteriormente gli outliers per fornire un valore che la stragrande maggioranza degli utenti sperimenta o migliore.

Un'interazione è un gruppo di gestori di eventi che si verificano durante lo stesso gesto logico dell'utente. Ad esempio, le interazioni "tap" su un dispositivo touchscreen includono eventi multipli, come pointerup, pointerdown e click. Un'interazione può essere guidata da JavaScript, CSS, controlli del browser incorporati (come elementi di un modulo) o da una combinazione di questi.

La latenza di un'interazione consiste nella durata più lunga di un gruppo di gestori degli eventi che guidano l'interazione, dal momento in cui l'utente inizia l'interazione fino al momento in cui viene presentato il prossimo frame con feedback visivo.

L'assegnazione di etichette come "buono" o "scadente" a una metrica di reattività è difficile. Da un lato, si desidera incoraggiare pratiche di sviluppo che danno la priorità a una buona reattività. D'altra parte, è necessario considerare il fatto che ci sono considerevoli variabilità nelle capacità dei dispositivi utilizzati dalle persone per stabilire aspettative di sviluppo raggiungibili.

Per assicurarsi di offrire esperienze utente con una buona reattività, una buona soglia da misurare è il 75° percentile dei tempi di caricamento delle pagine registrate in campo, suddivisi tra dispositivi mobili e desktop:

  • Un INP inferiore o uguale a 200 millisecondi significa che la tua pagina ha una buona responsività.
  • Un INP superiore a 200 millisecondi e inferiore o uguale a 500 millisecondi significa che la tua pagina ha bisogno di miglioramenti nella responsività.
  • Un INP superiore a 500 millisecondi significa che la tua pagina ha una scarso responsività.


A diagram depicting an interaction on the main thread. The user makes an input while blocking tasks run. The input is delayed until those tasks complete, after which the pointerup, mouseup, and click event handlers run, then rendering and painting work is kicked off until the next frame is presented.
The life of an interaction. An input delay occurs until event handlers begin running, which may be caused by factors such as long tasks on the main thread. The interaction's event handlers then run, and a delay occurs before the next frame is presented.

Il principale elemento che influisce sull'interattività è spesso JavaScript, anche se i browser forniscono un'interattività tramite controlli non alimentati da JavaScript, come caselle di controllo, pulsanti radio e controlli alimentati da CSS.

Per quanto riguarda il FID, solo i seguenti tipi di interazione sono osservati:

  • Cliccando con un mouse.
  • Toccare su un dispositivo touch.
  • Premendo un tasto sulla tastiera fisica o virtuale.

Le interazioni avvengono nel documento principale o negli iframe incorporati nel documento, ad esempio facendo clic su play su un video incorporato. Gli utenti finali non saranno consapevoli di ciò che è contenuto in un iframe. Pertanto, è necessario misurare le INP all'interno degli iframe per valutare l'esperienza dell'utente per la pagina di primo livello. Si noti che le API Web di JavaScript non hanno accesso ai contenuti dell'iframe, quindi potrebbe non essere possibile misurare le INP all'interno di un iframe e ciò produrrà una differenza tra CrUX e RUM.

Le interazioni possono essere composte da due parti, ognuna con più eventi. Ad esempio, una pressione di un tasto consiste negli eventi keydown, keypress e keyup. Le interazioni con il tocco contengono gli eventi pointerup e pointerdown. L'evento con la durata più lunga all'interno dell'interazione viene scelto come latenza dell'interazione.

A depiction of more complex interaction containing two interactions. The first is a mousedown event, which produces a frame before the mouse button is let up, which kicks off more work until yet another frame is presented as the result.
A depiction of an interaction with multiple event handlers. The first part of the interaction receives an input when the user clicks down on a mouse button. However, before they release the mouse button, a frame is presented. When the user releases the mouse button, another series of event handlers must run before the next frame is presented.

L'INP viene calcolato quando l'utente lascia la pagina, producendo un singolo valore che rappresenta la reattività complessiva della pagina durante tutto il suo ciclo di vita. Un basso INP significa che una pagina risponde in modo affidabile all'input dell'utente.

Dove INP considera tutte le interazioni della pagina, il primo ritardo di input (FID) tiene conto solo della prima interazione. Misura anche solo il ritardo di input della prima interazione, non il tempo impiegato per eseguire gli event handler o il ritardo nella presentazione del frame successivo.

Dato che FID è anche una metrica di reattività del carico, la sua ragion d'essere è che se la prima interazione effettuata con una pagina nella fase di caricamento ha un ritardo di input poco o percepibile, la pagina ha fatto una buona prima impressione.

L'INP riguarda più delle prime impressioni. Campionando tutte le interazioni, è possibile valutare in modo esaustivo la reattività, rendendo l'INP un indicatore più affidabile della reattività complessiva rispetto al FID.

È possibile che una pagina non restituisca un valore INP. Questo può accadere per diversi motivi:

  • La pagina è stata caricata, ma l'utente non ha fatto clic, toccato o premuto un tasto sulla tastiera.
  • La pagina è stata caricata, ma l'utente ha interagito con la pagina utilizzando gesti che non implicano clic, tocco o l'utilizzo della tastiera. Ad esempio, lo scroll o il passaggio del mouse su elementi non influiscono sul calcolo dell'INP.
  • La pagina è stata acceduta da un bot come un crawler di ricerca o un browser headless che non è stato programmato per interagire con la pagina.

INP può essere misurato sia sul campo sia in laboratorio attraverso una varietà di strumenti.

Idealmente, il tuo percorso per ottimizzare INP inizierà con dati di campo. Al meglio, i dati di campo provenienti dal monitoraggio in tempo reale degli utenti (RUM) ti forniranno non solo il valore INP di una pagina, ma anche dati contestuali che evidenziano quale specifica interazione è responsabile del valore INP stesso, se l'interazione è avvenuta durante o dopo il caricamento della pagina, il tipo di interazione (clic, pressione del tasto o tocco) e altre informazioni preziose.

Se il tuo sito web è idoneo per essere incluso nel Chrome User Experience Report (CrUX), puoi ottenere velocemente i dati sul campo per INP tramite CrUX in PageSpeed Insights (e altri Core Web Vitals). Almeno, puoi ottenere un quadro a livello di origine del tuo sito web INP, ma in alcuni casi, puoi ottenere anche dati a livello di pagina.

Tuttavia, sebbene CrUX sia utile per dirti che c'è un problema a un alto livello, spesso non fornisce abbastanza dettagli per capire appieno quale sia il problema. Una soluzione RUM può aiutarti a approfondire maggiormente le pagine, gli utenti o le interazioni degli utenti che stanno vivendo interazioni lente. La capacità di attribuire l'INP a interazioni individuali evita congetture e sforzi sprecati.

Idealmente, vorrai iniziare i test in laboratorio una volta che hai dati sul campo che suggeriscono che ci sono interazioni lente. In assenza di dati sul campo, tuttavia, ci sono alcune strategie per riprodurre interazioni lente in laboratorio. Tali strategie includono seguire flussi utente comuni e testare le interazioni lungo il percorso, così come interagire con la pagina durante il caricamento, quando il thread principale è spesso più impegnato, al fine di evidenziare interazioni lente durante quella parte cruciale dell'esperienza utente.

Una collezione di guide sull'ottimizzazione di INP è disponibile per guidarti nel processo di identificazione delle interazioni lente sul campo e nell'utilizzo di dati di laboratorio per individuarle e ottimizzarle in vari modi.

?