Problemas de INP explicados: causas de interacciones lentas y cómo solucionarlas
Interaction to Next Paint (INP) es un Core Web Vital que mide la rapidez con que una página responde a clics, toques y pulsaciones de teclas. Un INP por encima de 200 ms se siente lento; por encima de 500 ms parece roto.
Casi todo INP malo se reduce a una de unas pocas causas raíz. Cada guía a continuación explica una causa: cómo reconocerla, por qué ocurre y cómo solucionarla — con código.
Causas raíz
Un manejador de eventos de larga duración bloquea el hilo principal y retrasa el siguiente repintado. Cómo encontrar manejadores pesados y dividirlos con scheduler.yield() o Web Workers.
Layout thrashing: reflows repetidos en un frame y cómo detenerlosAlternar lecturas y escrituras del DOM obliga al navegador a recalcular el layout una y otra vez en un solo frame. Cómo agrupar lecturas y escrituras para corregir el INP.
Layout síncrono forzado: leer geometría después de escribir en el DOMLeer offsetWidth o getBoundingClientRect justo después de cambiar el DOM obliga al navegador a recalcular el layout dentro de tu tarea JS. Cómo detectarlo y solucionarlo.
Hilo principal bloqueado: input delay alto antes de que tu manejador se ejecuteCuando el hilo principal está ocupado con otra tarea larga, los clics esperan en cola antes de que tu manejador empiece. Cómo encontrar y dividir la tarea que bloquea para corregir el input delay del INP.
Scripts de terceros que bloquean interacciones: diagnosticarlos y contenerlosAnalítica, anuncios y widgets de chat ejecutan tareas largas en tu hilo principal y arruinan el INP. Cómo atribuir tareas largas a terceros y contenerlas con async, defer o un worker.
Cascada de re-renders de React: cuando un clic vuelve a renderizar todo el árbolUna actualización de estado alta en el árbol de React vuelve a renderizar cientos de componentes en cada clic. Cómo encontrar cascadas de render y corregirlas con memo, useCallback y useTransition.