INP: cómo conseguir que tu web responda al instante

El INP (Interaction to Next Paint) mide cuánto tarda tu web en reaccionar visualmente cuando alguien hace clic, toca la pantalla o pulsa una tecla. Google lo considera bueno por debajo de 200 milisegundos y malo por encima de 500. Desde marzo de 2024 es una de las tres Core Web Vitals, en sustitución del antiguo FID. Lo más habitual es suspender por exceso de JavaScript: scripts de terceros, plugins que hacen de todo y tareas largas que bloquean el navegador. La buena noticia es que casi siempre se mejora quitando, aplazando y troceando código.

Qué mide exactamente el INP

Cuando pulsas un botón, el navegador tiene que hacer tres cosas: esperar a que quede libre (si está ocupado con otra tarea), ejecutar el código asociado a ese clic y volver a pintar la pantalla para mostrar el resultado. El INP mide ese recorrido completo en las interacciones de toda la visita y se queda con una de las peores.

A diferencia del FID, que solo miraba la primera interacción y solo el tiempo de espera, el INP es mucho más exigente. Por eso hay webs que aprobaban con holgura y de repente aparecen en rojo en Search Console sin haber cambiado nada.

Si quieres el contexto general de las tres métricas, lo tienes en Core Web Vitals explicados sin tecnicismos. Aquí vamos a lo práctico.

Cómo saber si tu web tiene un problema de INP

1. Search Console, informe de Core Web Vitals. Agrupa las URL con problemas de INP, separando móvil y ordenador. Es el mejor punto de partida porque usa datos reales de usuarios de Chrome.
2. PageSpeed Insights. En la parte de «lo que experimentan tus usuarios reales» verás el INP si tu web tiene tráfico suficiente. Ojo: la prueba de laboratorio no mide INP, porque nadie hace clic en ella.
3. Las herramientas de desarrollador de Chrome. El panel de rendimiento muestra las interacciones mientras navegas y cuánto tarda cada una. Prueba con el móvil simulado y la CPU ralentizada: tus clientes no tienen tu ordenador.

Fíjate en qué interacciones son lentas: abrir el menú, aplicar un filtro, añadir al carrito, aceptar el banner de cookies… Ahí está la pista.

Las causas más habituales

• Scripts de terceros: chats, píxeles de publicidad, mapas, herramientas de grabación de sesiones, widgets de reseñas. Cada uno ejecuta su código en el mismo hilo que tu web.
• Tareas largas: bloques de JavaScript que tardan más de 50 milisegundos en ejecutarse y, mientras tanto, el navegador no puede atender al usuario.
• Temas y constructores pesados: plantillas que cargan librerías enteras para animar un botón.
• Páginas con un DOM enorme: miles de elementos HTML que el navegador tiene que recalcular en cada cambio. Pasa mucho en listados de productos con todos los filtros desplegados o en páginas maquetadas a base de cajas dentro de cajas.
• Código que hace demasiado en cada clic: recalcular todo el carrito, volver a pintar media página o lanzar varias peticiones antes de mostrar nada.

Qué hacer para mejorarlo

1. Quita lo que no necesitas

Es la mejora más rentable. Haz inventario de scripts de terceros y pregúntate qué aporta cada uno. Una herramienta de mapas de calor que nadie consulta desde hace meses es INP perdido.

2. Carga cada cosa solo donde se usa

El formulario de contacto no tiene que cargar su código en la ficha de producto. El mapa solo en la página de contacto. Muchos plugins de WordPress cargan sus scripts en todas las páginas por defecto; se puede (y se debe) limitar.

3. Aplaza lo que no es urgente

Los scripts que no hacen falta para la primera interacción se pueden cargar de forma diferida o cuando el usuario los pida. Por ejemplo, el chat puede mostrarse como un simple botón y cargar su código solo cuando alguien lo pulsa.

4. Trocea las tareas largas

Si un proceso tarda mucho, se puede partir en trozos y devolver el control al navegador entre uno y otro para que atienda los clics. Es trabajo de desarrollo, pero marca una diferencia enorme en filtros, buscadores y carritos.

5. Da respuesta visual inmediata

Cuando alguien pulsa «Añadir al carrito», muestra algo al momento (un cambio en el botón, un indicador) y haz el trabajo pesado después. El INP mide cuándo se pinta la respuesta, no cuándo termina todo el proceso.

6. Aligera el HTML

Menos elementos anidados, menos contenido oculto que se carga igualmente, listados paginados o con carga progresiva. Un DOM más pequeño hace que cada interacción cueste menos.

El caso de WordPress y WooCommerce

En WordPress, los sospechosos habituales del INP son siempre los mismos:

• Constructores visuales que añaden mucho JavaScript y mucho HTML anidado.
• Plugins de sliders, animaciones y efectos que se ejecutan en todas las páginas.
• Fragmentos de carrito y minicarritos que se actualizan por AJAX en cada página aunque el cliente no haya comprado nada.
• Banners de cookies, popups y chats que compiten por el hilo principal justo en los primeros segundos.

A menudo, la combinación de limpiar plugins, configurar bien la carga de scripts y simplificar el tema saca la web del rojo sin rediseñarla. Si quieres profundizar en la limpieza, te lo contamos en plugins de WordPress: ¿cuántos son demasiados?.

Cuánto tarda en notarse

Los datos de Search Console y PageSpeed Insights se basan en los últimos 28 días de visitas reales, así que después de un cambio necesitas unas semanas para ver el efecto completo. Mientras tanto, mide con las herramientas de desarrollador para comprobar que vas en la buena dirección.

Lo que no conviene hacer

• Perseguir la puntuación de laboratorio de PageSpeed. El INP solo se ve en los datos reales.
• Quitar funciones que venden sin buscar antes una forma más eficiente de cargarlas.
• Instalar otro plugin de optimización para arreglar lo que estropean los demás. A veces ayuda; muchas veces solo añade complejidad.

En resumen

El INP mide si tu web responde rápido cuando la usas, no solo si carga rápido. Se mejora quitando scripts innecesarios, cargando cada cosa donde hace falta, troceando el trabajo pesado y dando respuesta visual al instante. Si tu web suspende en INP y no sabes por dónde empezar, nuestro equipo de desarrollo web a medida y de desarrollo WordPress puede analizarla y decirte qué tocar primero. Escríbenos y le echamos un ojo.

Si quieres la explicación oficial, Google la publica en web.dev.