Cómo mejorar el INP (Interaction to Next Paint) en tu sitio web

¿Cómo mejorar el INP de un sitio web? La respuesta corta es: debes reducir el trabajo que bloquea el hilo principal del navegador después de que el usuario hace clic, toca la pantalla o utiliza el teclado, y antes de que vea la siguiente actualización visual. Para conseguirlo, conviene dividir las tareas largas de JavaScript, eliminar scripts innecesarios, simplificar los event listeners, optimizar los recursos que bloquean el renderizado, controlar el código de terceros y medir con datos reales de usuarios. Una buena puntuación INP es de 200 ms o menos; entre 200 y 500 ms necesita mejora, y por encima de 500 ms se considera deficiente.

INP, o Interaction to Next Paint, es una de las métricas Core Web Vitals más importantes para SEO y experiencia de usuario en 2026. Google ya no se fija solo en si una página carga rápido al principio; también evalúa si, una vez abierta, la web responde de forma fluida cuando el usuario interactúa con ella. Un filtro de productos que tarda en desplegarse, un botón de “añadir al carrito” que parece congelado, un menú móvil que reacciona tarde o un campo de formulario que se atasca al escribir son señales típicas de problemas de INP.

En esta guía aprenderás cómo medir el INP, cómo detectar los cuellos de botella técnicos que provocan una mala puntuación y qué acciones concretas puedes aplicar como desarrollador, propietario de un sitio o administrador de WordPress. También veremos con ejemplos prácticos cómo la infraestructura de hosting, el uso de CDN y una conexión segura pueden influir de forma indirecta en el rendimiento. Si quieres partir de una base orientada a velocidad, puedes valorar Paquetes de alojamiento web y, para proyectos basados en WordPress, las opciones de Alojamiento WordPress.

Qué es INP y por qué es importante

INP mide la capacidad de respuesta general de una página ante las interacciones del usuario. Una persona hace clic en un botón, cambia de pestaña, abre un menú, escribe en un campo o toca un elemento desde el móvil. El navegador procesa esa interacción, ejecuta JavaScript, calcula estilos y layout, y después muestra un nuevo estado visual en pantalla. El tiempo que transcurre desde la interacción hasta esa actualización visual es lo que se evalúa en INP.

Durante años, First Input Delay, o FID, fue una métrica relevante; sin embargo, FID se centraba únicamente en el retraso de la primera interacción. INP va más allá y analiza las interacciones durante todo el ciclo de vida de la página. Por eso representa mejor la experiencia real en tiendas online, blogs, paneles SaaS, sitios corporativos, áreas privadas y plataformas con formularios o componentes interactivos.

Los umbrales recomendados por Google son los siguientes:

INP no es importante solo para SEO, sino también para la conversión. Por ejemplo, si en una página de categoría móvil el botón de filtros tarda 700 ms en abrirse, el usuario puede pensar que no ha funcionado, pulsarlo de nuevo o abandonar la página. En cambio, las interfaces que responden en torno a 150-180 ms transmiten más confianza, rapidez y profesionalidad.

Cómo medir la puntuación INP

Antes de empezar a optimizar INP, necesitas medir correctamente. Las herramientas de laboratorio ayudan a detectar problemas probables, pero los datos reales de usuarios reflejan dispositivos, conexiones, navegadores y comportamientos del mundo real. La estrategia más fiable es combinar ambos tipos de información.

1. Haz una revisión rápida con PageSpeed Insights

PageSpeed Insights muestra el valor real de INP si existe información suficiente en Chrome User Experience Report. Revisa por separado los resultados de móvil y escritorio. Da prioridad especial a los datos móviles, porque en teléfonos con procesadores modestos el hilo principal se bloquea con más facilidad. Si el INP de la página supera los 200 ms, anota las oportunidades y diagnósticos que aparecen en el informe.

2. Revisa el informe de Core Web Vitals en Search Console

El informe de Core Web Vitals de Google Search Console agrupa los problemas por conjuntos de URL. Esto permite ver si el problema afecta a una página aislada o a plantillas completas. Por ejemplo, si todas las fichas de producto tienen mal INP, lo más probable es que el origen esté en el tema, el script del carrito, un plugin de reseñas o el código que gestiona las variaciones del producto.

3. Usa el panel Performance de Chrome DevTools

El panel Performance de Chrome DevTools permite ver qué funciones JavaScript se ejecutan en el momento del clic y qué tareas superan los 50 ms, convirtiéndose en long tasks. Graba la apertura de un menú, un clic en un filtro o una acción de compra, y analiza los bloques morados, amarillos y verdes del hilo principal. Ejecuciones largas de scripts, recálculos repetidos de estilos y operaciones intensivas de layout son señales críticas para INP.

4. Implementa monitorización de usuarios reales

En proyectos con mucho tráfico, usar RUM, o Real User Monitoring, resulta especialmente valioso. Con la librería Web Vitals puedes recopilar datos de INP y analizarlos por URL, tipo de dispositivo, navegador, país y objetivo de interacción. Por ejemplo, los datos pueden revelar que solo en usuarios Android el clic del menú móvil tarda 620 ms. Esa información permite corregir con precisión, en lugar de hacer optimizaciones genéricas que quizá no ataquen el problema real.

Causas más habituales de una mala puntuación INP

La mayoría de los problemas de INP no se deben directamente a la respuesta del servidor, sino a que el navegador tiene demasiado trabajo que hacer justo cuando el usuario interactúa. Aun así, la infraestructura, la entrega de archivos, la caché y las dependencias externas pueden aumentar esa carga de manera indirecta.

Archivos JavaScript pesados

En los sitios modernos, el tema, los sliders, el chat en vivo, la publicidad, la analítica, los tests A/B, los mapas y los componentes de redes sociales suelen cargar muchos archivos JavaScript. Estos archivos no solo se descargan: el navegador debe analizarlos, compilarlos y ejecutarlos. Si ese proceso ocupa el hilo principal, la respuesta al clic o toque del usuario llega tarde.

Tareas largas

Las operaciones del hilo principal que duran más de 50 ms se consideran long tasks. Una sola tarea de 300 ms puede dejar esperando el clic del usuario. Por ejemplo, un script que recalcula en el cliente los 1000 productos de una categoría cada vez que se pulsa un filtro puede llevar el INP fácilmente por encima de los 500 ms.

DOM complejo y operaciones de layout costosas

Demasiados nodos HTML, componentes muy anidados, cambios frecuentes de estilos y el error conocido como layout thrashing —medir y escribir estilos una y otra vez— deterioran el INP. Los mega menús, las páginas de listado de productos y las aplicaciones de una sola página muy extensas suelen ser especialmente propensas a este riesgo.

Scripts de terceros

Redes publicitarias, píxeles de seguimiento, herramientas de mapas de calor, códigos de soporte en vivo y embeds de redes sociales ejecutan código que no siempre controlas. Si ese código utiliza el hilo principal durante una interacción, incluso una interfaz desarrollada de forma limpia puede sentirse lenta.

Exceso de plugins y temas pesados en WordPress

En WordPress, cada plugin puede añadir sus propios archivos CSS y JS. Si el script de un formulario de contacto solo hace falta en la página de contacto, pero se carga en todo el sitio, se genera peso innecesario. Del mismo modo, los constructores visuales, sliders y plugins de pop-up pueden perjudicar de forma notable el INP en móvil.

Cómo mejorar el INP: plan de acción paso a paso

La respuesta práctica a cómo mejorar el INP es seguir un ciclo claro: medir, aislar, reducir, dividir y volver a medir. Los siguientes pasos están ordenados según la prioridad que suelen aplicar los equipos técnicos en proyectos reales.

1. Encuentra la interacción más problemática

Primero identifica qué interacción está generando un mal INP. ¿Es el menú móvil, el botón de añadir al carrito, el panel de filtros, el buscador o el envío de un formulario? Mientras grabas con DevTools Performance, repite varias veces la acción concreta. Dentro de la grabación, revisa la sección Event Timing o Interaction para localizar el objetivo del clic y la duración.

Ejemplo realista: en una tienda online, el botón de filtros de categoría generaba un INP de 740 ms. Al analizarlo, se detectó que al pulsar el botón se renderizaban de nuevo todas las tarjetas de producto y se actualizaban 1800 nodos del DOM a la vez. Al mover el panel de filtros a un componente independiente y aplazar la actualización de la lista, el INP bajó a unos 190 ms.

2. Reduce el tamaño de los paquetes JavaScript

Eliminar código que no se utiliza es una de las acciones más eficaces para mejorar INP. Usa un bundle analyzer para ver qué librerías están inflando el archivo final. En lugar de importar una librería completa, carga solo el módulo necesario. Por ejemplo, puedes sustituir una librería de fechas muy grande por alternativas más ligeras o por la API nativa Intl cuando sea suficiente.

• Desactiva funciones del tema que no estés usando.
• No cargues sliders, galerías o scripts de animación en páginas donde no hacen falta.
• Utiliza herramientas modernas de build compatibles con tree shaking.
• No envíes código del panel de administración al frontend de los visitantes.
• Sirve polyfills antiguos solo a los navegadores que realmente los necesitan.

3. Divide las tareas largas en partes más pequeñas

Para que el navegador pueda responder a las interacciones, el hilo principal debe liberarse con regularidad. En lugar de ejecutar cálculos grandes de una sola vez, divídelos en bloques. setTimeout, scheduler.postTask, requestIdleCallback o las funciones de planificación de distintos frameworks pueden ayudar en este punto. El objetivo es sustituir una tarea única de 300 ms por varias tareas más pequeñas de 20-40 ms.

Si necesitas filtrar y volver a dibujar una tabla de 5000 filas, actualiza primero las 50 filas que el usuario ve en pantalla y procesa el resto con virtualización o tareas en segundo plano. Así el resultado del clic aparece rápido y el trabajo restante no bloquea la experiencia.

4. Simplifica los event listeners

Ejecutar funciones pesadas en cada evento click, input, scroll o keydown perjudica el INP. Un error frecuente es enviar una petición API o recalcular una lista completa en cada pulsación de teclado dentro de un buscador. Aplica técnicas de debounce y throttle para reducir la frecuencia de ejecución.

• Usa un debounce de unos 300 ms en campos de búsqueda.
• Prefiere passive listeners en eventos de scroll.
• En lugar de añadir listeners a cientos de elementos, utiliza event delegation.
• Después de un clic, muestra primero una respuesta visual y lanza el trabajo pesado después.

5. Da feedback visual inmediato al usuario

Como INP está relacionado con el siguiente paint, es importante que después de la interacción aparezca cuanto antes algún cambio visual, aunque sea pequeño. Un botón que cambia a estado activo, un indicador de carga, un skeleton o el primer fotograma de apertura de un panel indican al usuario que el sistema ha recibido la acción. En lugar de esperar a una respuesta pesada de la API para cambiar toda la interfaz de golpe, diseña feedback rápido y actualizaciones progresivas.

6. Reduce el coste de renderizado y layout

CSS y layout influyen en INP tanto como JavaScript. Cambiar el tamaño, la posición y los estilos de muchos elementos después de un clic puede ser caro. En animaciones CSS, usar transform y opacity suele ser más eficiente que animar width, height, top o left. En listas grandes, aplica virtualización y evita mantener en el DOM cientos de tarjetas que el usuario no está viendo.

Evita el layout thrashing. Es decir, no leas el ancho de un elemento, escribas un estilo, vuelvas a leer y vuelvas a escribir dentro del mismo bucle. Agrupa lecturas y escrituras. Esta simple reorganización puede ahorrar decenas de milisegundos en páginas complejas.

7. Audita el código de terceros

Para cada script externo, hazte esta pregunta: ¿contribuye directamente a la conversión o al objetivo del sitio? Si su aportación es baja, elimínalo, retrásalo o cárgalo solo en las páginas necesarias. Mantener el chat en vivo en el checkout puede tener sentido; ejecutarlo en la primera carga de todos los artículos del blog quizá no. Siempre que sea posible, carga scripts de publicidad y analítica con defer o async y evita que se interpongan antes de las interacciones críticas.

8. Mueve cálculos pesados a Web Workers

Si tareas como filtrado de productos, procesamiento de JSON grandes, cifrado, transformación de datos o cálculos complejos bloquean el hilo principal, utiliza Web Workers. Un Worker realiza ese trabajo en segundo plano, mientras el hilo principal sigue disponible para responder al usuario. No todo debe moverse a un Worker, pero las operaciones que consumen más de 100 ms de CPU pueden beneficiarse mucho.

9. Optimiza el coste de frameworks e hidratación

En proyectos con React, Vue, Angular, Next.js o Nuxt, el coste de hydration después de la primera carga puede afectar al INP. En lugar de convertir toda la página en interactiva, valora enfoques como arquitectura de islas, partial hydration o server components. Deja estático el contenido que no necesita interacción. Componentes como modales, comentarios o bloques de recomendación pueden cargarse solo cuando el usuario los necesita.

10. Reduce el peso de plugins en sitios WordPress

Si usas WordPress, crea un inventario de plugins para optimizar INP. Elimina extensiones duplicadas que hacen la misma función. Comprueba si los plugins de formularios, galerías, sliders y pop-ups cargan archivos en todas las páginas. Con plugins de rendimiento que permitan asset unload puedes desactivar CSS y JS innecesarios página por página.

Ejemplo práctico: en un sitio corporativo con WordPress, el INP móvil de la página de inicio era de 560 ms. Se eliminó el slider y se reconstruyó el hero con HTML/CSS ligero, el script del pop-up se retrasó 5 segundos y el JS del formulario de contacto se cargó solo en la página de contacto. El INP móvil bajó primero a 210 ms y, tras algunos ajustes menores, a 175 ms.

Cómo influyen el hosting y la infraestructura en INP

INP es principalmente una métrica de respuesta del lado del cliente; es decir, depende en gran parte de la carga del hilo principal en el navegador. Pero eso no significa que el hosting sea irrelevante. Una respuesta rápida del servidor, caché bien configurada, versiones modernas de PHP, soporte HTTP/2 o HTTP/3, CDN y compresión ayudan a entregar archivos con más rapidez y estabilidad. Esto contribuye a que, especialmente durante la carga inicial, el navegador trabaje de forma más ordenada.

Con una infraestructura deficiente, un TTFB alto, recursos que llegan tarde, caché inconsistente y picos de carga en el servidor degradan la experiencia. Si un WordPress sin caché ejecuta PHP pesado y consultas de base de datos en cada petición, la página tardará más en estar lista para la interacción. Por eso, la optimización de INP no debe separarse por completo de las mejoras de LCP y TTFB.

• Utiliza caché del lado del servidor.
• Trabaja con PHP 8.x y versiones actualizadas de la base de datos.
• Sirve archivos estáticos a través de una CDN.
• Activa compresión Brotli o Gzip.
• Mantén actualizada la configuración SSL/TLS; para una conexión segura revisa la página certificado SSL.
• Si vas a lanzar un nuevo proyecto o sitio de marca, usa la herramienta Consulta de dominio para elegir el dominio adecuado.

Tabla de prioridades para optimizar INP

La siguiente tabla resume qué mejoras suelen tener más sentido en un sitio web típico y cuándo conviene aplicarlas. Cada proyecto puede comportarse de forma distinta; por eso, después de cada cambio, vuelve a medir con PageSpeed Insights, Search Console y datos reales de usuarios.

Checklist técnica para desarrolladores

La mejora de INP debe convertirse en una lista de control que el equipo pueda seguir. De lo contrario, las optimizaciones puntuales pueden perderse pocos meses después por nuevos plugins, códigos de campañas o cambios de diseño.

• Define un objetivo de INP móvil inferior a 200 ms para cada plantilla crítica.
• Controla el aumento del bundle size en los procesos de pull request.
• Antes de añadir un nuevo script de terceros, prueba su impacto en rendimiento.
• Mide al menos las interacciones de menú móvil, búsqueda, formularios y compra con DevTools Performance.
• Intenta reducir las long tasks por debajo de 50 ms; si no es posible, divídelas.
• Usa transform y opacity para animaciones siempre que sea viable.
• Para listas grandes, aplica paginación, infinite scroll o virtualización.
• Reporta mensualmente los datos RUM y revisa las alertas de Search Console.

Errores frecuentes al optimizar INP

Instalar solo un plugin de caché

La caché es importante, pero no es la solución única para un mal INP. Puede acelerar la entrega de la página, pero no corrige automáticamente el JavaScript pesado que se ejecuta cuando el usuario hace clic. Por eso, la caché debe acompañarse de optimización de código.

Mirar solo la puntuación de laboratorio y olvidar al usuario real

Los tests de Lighthouse son útiles, pero no bastan por sí solos. Los usuarios reales llegan con dispositivos, redes y navegadores diferentes. En especial, los Android de gama baja pueden revelar problemas de INP que no aparecen en pruebas de escritorio.

Retrasar todos los scripts sin criterio

Las técnicas de defer y delay deben aplicarse con cuidado. Una mala configuración puede romper el menú, el carrito, los formularios o el flujo de pago. Protege los scripts de interacciones críticas y retrasa de forma controlada el código innecesario o de terceros.

Centrarse en las imágenes y descuidar la interacción

Comprimir imágenes es muy valioso para LCP, pero no siempre resuelve INP. Si el problema está en el código que se ejecuta después de un clic, la optimización visual por sí sola no será suficiente. Core Web Vitals debe abordarse de forma integral.

Estrategia SEO centrada en INP para 2026

En el SEO de 2026, el rendimiento técnico, la calidad del contenido y una infraestructura fiable se evalúan en conjunto. Google, con AI Overviews y experiencias de búsqueda cada vez más avanzadas, tiende a destacar páginas que ofrecen respuestas rápidas, útiles y satisfactorias. Por eso, optimizar INP no es solo tarea del equipo de desarrollo: también involucra a SEO, UX, contenidos e infraestructura.

En un blog, el índice de contenidos, los filtros de categoría o el formulario de comentarios deben funcionar con rapidez; en una tienda online, la selección de talla, el cambio de variaciones y el botón de añadir al carrito deben responder al instante. En sitios corporativos, el formulario de presupuesto, el menú móvil y los botones de contacto no deberían mostrar retrasos. Cuando el usuario siente que la web es rápida, permanece más tiempo, visita más páginas y aumenta la probabilidad de conversión.

Con Hostragons puedes construir una base sólida para tus acciones de SEO técnico eligiendo hosting orientado a rendimiento, tecnologías de servidor actualizadas e infraestructura segura. Gestionar dominio, hosting y seguridad desde un único lugar reduce la carga operativa y permite que tu equipo se concentre más en la experiencia de usuario y la calidad del contenido. Para soluciones relacionadas, puedes revisar Hosting Corporativo, servidor VPS y certificado SSL.

Conclusión

La clave para mejorar la puntuación INP es evitar que el navegador haga trabajo innecesario justo cuando el usuario interactúa. Empieza identificando con datos reales las interacciones más lentas; después reduce JavaScript, divide tareas largas, simplifica event listeners, baja el coste de renderizado y mantén bajo control el código de terceros. Hosting, caché, CDN y una configuración de seguridad actualizada también aportan una base sólida que facilita todo el proceso.

Si quieres que tu sitio web sea más rápido, fiable y cómodo de usar, empieza con una medición sencilla: comprueba el INP móvil de tu página más importante y aplica los tres primeros pasos de esta guía. En la parte de infraestructura, puedes revisar las soluciones de Hostragons y comparar con calma el plan de hosting que mejor se adapte a las necesidades de tu proyecto.

Preguntas frecuentes

¿Cuál debe ser una buena puntuación INP?

Una buena puntuación INP es de 200 ms o menos. Entre 200 y 500 ms indica que hay margen de mejora, y por encima de 500 ms refleja una experiencia de usuario deficiente. Los datos de usuarios móviles deben evaluarse con especial prioridad.

¿Cuál es la diferencia entre INP y FID?

FID mide únicamente el retraso de la primera interacción del usuario, mientras que INP evalúa la calidad de respuesta de las interacciones durante todo el ciclo de vida de la página. Por eso INP representa de forma más completa la experiencia real.

¿Por qué suele salir mal el INP en sitios WordPress?

Normalmente se debe a demasiados plugins, temas pesados, CSS/JS innecesario cargado en todas las páginas, sliders, scripts de pop-up y código de terceros. Limpiar plugins, desactivar archivos por página y usar un tema ligero puede generar mejoras importantes.

¿Cambiar de hosting mejora el INP?

El hosting por sí solo no corrige JavaScript pesado ni tareas largas; sin embargo, un servidor rápido, buena caché, CDN, PHP actualizado y entrega estable de recursos ayudan a la optimización de INP. Su efecto es indirecto, pero especialmente relevante en sitios WordPress.

¿Cuánto tarda en notarse una optimización de INP?

Después de corregir código y plugins, los resultados pueden verse de inmediato en pruebas de laboratorio. En Search Console y en los datos reales de Chrome, el cambio suele tardar algunas semanas en reflejarse, porque se necesita recopilar suficiente información de usuarios.