Les problèmes d'INP expliqués : causes des interactions lentes et comment les corriger
L'Interaction to Next Paint (INP) est un Core Web Vital qui mesure la rapidité avec laquelle une page répond aux clics, aux touches et aux appuis. Un INP au-dessus de 200 ms paraît lent ; au-dessus de 500 ms, il paraît cassé.
Presque tout mauvais INP se ramène à l'une de quelques causes profondes. Chaque guide ci-dessous explique une cause : comment la reconnaître, pourquoi elle survient et comment la corriger — avec du code.
Causes profondes
Un gestionnaire d'événement de longue durée bloque le thread principal et retarde le prochain rendu. Comment trouver les gestionnaires lourds et les découper avec scheduler.yield() ou des Web Workers.
Layout thrashing : reflows répétés dans un frame et comment les arrêterAlterner lectures et écritures du DOM force le navigateur à recalculer la mise en page encore et encore dans un seul frame. Comment regrouper lectures et écritures pour corriger l'INP.
Layout synchrone forcé : lire la géométrie après une écriture dans le DOMLire offsetWidth ou getBoundingClientRect juste après avoir modifié le DOM force le navigateur à recalculer la mise en page dans votre tâche JS. Comment le détecter et le corriger.
Thread principal bloqué : input delay élevé avant même l'exécution du gestionnaireQuand le thread principal est occupé par une autre tâche longue, les clics attendent dans une file avant que votre gestionnaire ne démarre. Comment trouver et découper la tâche bloquante pour corriger l'input delay de l'INP.
Scripts tiers bloquant les interactions : les diagnostiquer et les contenirL'analytique, les publicités et les widgets de chat exécutent des tâches longues sur votre thread principal et ruinent l'INP. Comment attribuer les tâches longues aux tiers et les contenir avec async, defer ou un worker.
Cascade de re-rendus React : quand un clic re-rend tout l'arbreUne mise à jour d'état haut dans l'arbre React re-rend des centaines de composants à chaque clic. Comment trouver les cascades de rendu et les corriger avec memo, useCallback et useTransition.