I problemi di INP spiegati: cause delle interazioni lente e come risolverle
L'Interaction to Next Paint (INP) è un Core Web Vital che misura quanto velocemente una pagina risponde a clic, tocchi e pressioni dei tasti. Un INP sopra i 200 ms sembra lento; sopra i 500 ms sembra rotto.
Quasi ogni INP scadente si riduce a una di poche cause profonde. Ogni guida qui sotto spiega una causa: come riconoscerla, perché accade e come risolverla — con il codice.
Cause profonde
Un gestore di eventi di lunga durata blocca il main thread e ritarda il paint successivo. Come trovare i gestori pesanti e suddividerli con scheduler.yield() o Web Worker.
Layout thrashing: reflow ripetuti in un frame e come fermarliAlternare letture e scritture del DOM costringe il browser a ricalcolare il layout più volte in un singolo frame. Come raggruppare letture e scritture per correggere l'INP.
Layout sincrono forzato: leggere la geometria dopo aver scritto nel DOMLeggere offsetWidth o getBoundingClientRect subito dopo aver cambiato il DOM costringe il browser a ricalcolare il layout dentro il tuo task JS. Come rilevarlo e risolverlo.
Main thread bloccato: input delay alto prima ancora che il gestore partaQuando il main thread è occupato da un altro task lungo, i clic aspettano in coda prima che il gestore parta. Come trovare e suddividere il task bloccante per correggere l'input delay dell'INP.
Script di terze parti che bloccano le interazioni: diagnosticarli e contenerliAnalytics, annunci e widget di chat eseguono task lunghi sul tuo main thread e rovinano l'INP. Come attribuire i task lunghi a terze parti e contenerli con async, defer o un worker.
Cascata di re-render di React: quando un clic ri-renderizza l'intero alberoUn aggiornamento di stato in alto nell'albero React ri-renderizza centinaia di componenti a ogni clic. Come trovare le cascate di render e correggerle con memo, useCallback e useTransition.