Che cos’è Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) è una nuova ed entusiasmante metrica sperimentale che misura la reattività di una pagina Web durante tutte le interazioni su una pagina. Una bassa interazione con Next Paint assicura che la pagina sia sempre reattiva in modo affidabile.
Per calcolare la metrica Interazione al prossimo Paint, vengono salvate tutte le differenze tra ogni interazione dell’utente e la modifica finale della presentazione sulla pagina. Il numero più alto di tutte le interazioni (o il 98° percentile) sarà la metrica Interaction to Next Paint (INP) finale.
98° percentile o peggior INP?
INP è una metrica che mira a rappresentare la latenza di interazione complessiva di una pagina selezionando una delle interazioni più lunghe che si verificano quando un utente visita una pagina. Per le pagine con meno di 50 interazioni in totale, INP è l’interazione con la latenza peggiore. Per le pagine con molte interazioni, INP è spesso il 98° percentile della latenza dell’interazione.
Come funziona esattamente Interaction to Next Paint (INP)?
Si verifica un’interazione quando un visitatore fa clic o tocca una pagina. Tale interazione potrebbe comportare un cambiamento nella presentazione sullo schermo. L’Interaction to Next Paint (INP) misura il tempo tra il clic e la presentazione.
La latenza di una singola interazione è costituita dalla singola durata più lunga di qualsiasi evento che fa parte dell’interazione, in cui la durata viene misurata dal punto in cui l’utente ha interagito con la pagina fino alla presentazione del frame successivo dopo l’esecuzione di tutti i gestori di eventi associati. La durata è la somma dei seguenti intervalli di tempo:
Il ritardo di input, che è il tempo tra l’interazione dell’utente con la pagina e l’esecuzione dei gestori di eventi.
Il tempo di elaborazione, che è il tempo totale necessario per eseguire il codice nei gestori di eventi associati.
Il ritardo di presentazione, che è il tempo che intercorre tra il termine dell’esecuzione dei gestori di eventi e il momento in cui il browser presenta il frame successivo.
Quali sono i valori buoni e cattivi dell’Interaction to Next Paint (INP)?
Per passare la metrica Core Web Vitals per la metrica Interaction to Next, il 75° percentile dei caricamenti di pagina registrati nel campo deve rimanere al di sotto dei 200 ms:
- Un INP inferiore o a 200 millisecondi significa che la tua pagina ha una buona reattività.
- Un INP compreso tra 200 e 500 millisecondi significa che la reattività della tua pagina deve essere migliorata.
- Un INP superiore a 500 millisecondi significa che la tua pagina ha una scarsa reattività.
nullo
Come misurare l’interazione con Next Paint (INP)?
L’interazione con Next Paint può essere misurata con strumenti di laboratorio e con strumenti sul campo. Il modo più semplice per misurare l’interazione con Next Paint è attraverso gli approfondimenti di PageSpeed o tramite Lighthouse in modalità ‘timespan’. Leggi di più qui: https://developer.chrome.com/en/blog/inp-tools-2022/
Come migliorare l’interazione con Next Paint?
L’interazione con Next Paint è una metrica complicata. La tua Pagina potrebbe essere molto veloce e rispondere istantaneamente per la maggior parte. Sfortunatamente, se solo un’interazione è lenta, influenzerà l’intera interazione con Next Paint.
Di solito qualsiasi pagina è meno reattiva durante la fase di avvio della pagina. Questo è il momento in cui viene eseguita la maggior parte del lavoro sui thread principali (analisi, decodifica, rendering e scripting).
Fornisci un feedback immediato per garantire che la pagina risponda direttamente all’input dell’utente
Quindi, quando un visitatore esegue un’azione come inviare un modulo o aggiungere un articolo di acquisto a un basked non attendere la conferma lato server (il tuo modulo è stato inviato, i tuoi articoli sono stati aggiunti a basked) ma fornisci un feedback immediato ( stiamo inviando il tuo modulo, aggiungendo l’articoloX al carrello)
<!-- wp:paragraph -->
<p>const formfeedbackEl = document.getElementById("formfeedback");<br>const formEl = document.getElementById("formf");</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>formEl.addEventListener("invia", (evt) => {<br>evt.preventDefault();<br>formfeedbackEl.innerText = "Invio modulo… per favore aspetta";</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>let headers = new Headers({ Accept: "application/json" });<br>let formData = new FormData(formEl);<br>fetch("/form-endpoint", { metodo: "POST", intestazioni, corpo: formData })<br>.allora(funzione (risposta) {<br>restituisce response.json();<br>})<br>.quindi(funzione (jsonData) {<br>formEl.reset();<br>formfeedbackEl.innerText = jsonData.message;<br>});<br>});</p>
<!-- /wp:paragraph -->