Imagina que has trabajado duro para optimizar la velocidad de tu sitio. Carga rápidamente, supera todas las pruebas de rendimiento y las páginas se ven nítidas en cualquier dispositivo. Sin embargo, cuando un visitante hace clic en un elemento como un botón, la respuesta se retrasa. Entonces, ¿qué está pasando?
El retraso entre una interacción y una respuesta visible se conoce como Interaction to Next Paint (INP). Cuanto más rápido responda tu sitio, más probabilidades habrá de que los visitantes interactúen con tu contenido. Esta mejora de la experiencia de usuario se traduce en más tiempo en tu sitio web y, por tanto, en más conversiones. Así que mejorar tu INP es beneficioso para todos.
En esta guía explicaremos exactamente cómo funciona el INP, qué provoca unas puntuaciones bajas y cómo solucionarlo. También veremos cómo medir el INP de tu sitio y por qué es importante.
¿Qué es Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) es una de las métricas Core Web Vitals de Google: un conjunto de métricas diseñadas para evaluar la experiencia de usuario de un sitio web.
El INP mide el tiempo transcurrido entre la interacción de un visitante (por ejemplo, hacer clic, tocar la pantalla o pulsar una tecla) y el momento en que la página se actualiza visualmente en respuesta. Por ejemplo, si un cliente hace clic en el botón «Añadir al carrito» y el botón responde después de 300 milisegundos, ese es el INP de dicha interacción.
En esencia, el INP indica hasta qué punto tu sitio responde con rapidez. Si tienes un buen INP, tu sitio web transmite una sensación cuidada. En cambio, un INP deficiente hace que el sitio parezca lento, aunque técnicamente cargue rápido.
Por qué es importante el INP en tu sitio de WordPress
En marzo de 2024, Google sustituyó la métrica First Input Delay (FID) por el INP. La nueva métrica se introdujo porque FID solo medía el retraso antes de que comenzara a procesarse un evento. El INP recoge toda la experiencia, desde la entrada hasta la confirmación visual.
Aunque tu sitio web supere la prueba de Core Web Vitals y obtenga buenos resultados en las demás áreas, es importante dar prioridad al INP. Una buena puntuación de INP indica una interactividad más fluida, lo que normalmente se traduce en una mayor interacción y satisfacción de los visitantes.
El efecto de un buen INP se extiende al resto de tus métricas. Una mayor interacción se traduce en más tiempo en tu sitio. Pasar más tiempo en tu sitio suele mejorar las tasas de conversión. Y todo esto demuestra a Google que ofreces valor a los visitantes del sitio, que es lo que más le importa a la hora de decidir qué sitios posicionar en los resultados de búsqueda orgánica.
En otras palabras, un INP mejor suele atraer a más visitantes y conseguir que una mayor proporción de ellos se convierta en clientes, suscriptores, etc.
¿Qué puntuación de INP es buena?
Veamos qué hace que una puntuación de INP sea buena. Google clasifica esta métrica de la siguiente manera:
- Buena: menos de 200 milisegundos
- Necesita mejoras: 200–500 milisegundos
- Deficiente: más de 500 milisegundos
Esto significa que un sitio web con un INP inferior a 200 ms parece responder al instante, mientras que uno con un INP de 200–500 ms parece algo lento, aunque aceptable. Si el INP de tu sitio supera los 500 ms, puede parecer que responde con retraso y los visitantes podrían empezar a notarlo.
Para conseguir una buena puntuación, Google recomienda que al menos el 75 % de las interacciones de los usuarios se produzcan dentro del umbral de 200 ms.
Ten en cuenta que el INP varía según el dispositivo. Las puntuaciones de INP en móviles tienden a ser peores debido a procesadores más lentos y a una mayor competencia entre hilos. Por eso, prueba siempre el rendimiento tanto en ordenadores como en dispositivos móviles.
¿Qué provoca un INP deficiente en los sitios de WordPress?
Si tu puntuación de INP es alta (más de 500 milisegundos), es probable que algo impida que el navegador responda rápidamente a las interacciones. En WordPress, normalmente se trata de un tema, un plugin o un script de terceros.
Veamos más de cerca cuáles son los culpables más habituales.
1. Temas o plugins con mucho JavaScript
Muchos temas de WordPress sofisticados dependen de una gran cantidad de JavaScript para sus carruseles, animaciones, ventanas emergentes o diseños complejos. Del mismo modo, los plugins suelen poner scripts en cola en todo el sitio, incluso en páginas que no los necesitan.
Cuando hay demasiado JavaScript que cargar, el hilo principal del navegador se sobrecarga. Esto significa que cada vez que un visitante interactúa con tu sitio web, el navegador debe pausar otras tareas para ejecutar esos scripts.
Por ejemplo, un tema multipropósito con carruseles, efectos de paralaje y constructores personalizados puede poner en cola diez archivos distintos de JavaScript que ocupen más de 1 MB en total. Hacer clic en un botón sencillo podría activar una cadena de animaciones que añada cientos de milisegundos de retraso.
Es buena idea auditar tu tema activo y tus plugins con herramientas como Chrome DevTools para comprobar qué scripts se ejecutan en cada página. También querrás sustituir los plugins pesados por alternativas ligeras y desactivar los módulos que no uses en los constructores de páginas.
2. Tareas largas que bloquean el hilo principal
Una tarea larga es cualquier ejecución de JavaScript que dure más de 50 milisegundos. Durante ese tiempo, el navegador no puede responder a las entradas del usuario, lo que provoca un retraso.
Las tareas largas suelen deberse a lo siguiente:
- Bibliotecas grandes como jQuery o scripts del frontend de los constructores de páginas
- Obtención síncrona de datos (p. ej., mediante XMLHttpRequest en lugar de API asíncronas)
- Bucles complejos o manipulaciones del DOM
Si se ejecutan varias tareas largas seguidas, el navegador pone las interacciones en cola en lugar de procesarlas inmediatamente. Por ejemplo, una tienda de WooCommerce podría utilizar varios scripts de analítica que analicen los datos del carrito después de cada clic. Cada script se ejecuta de forma secuencial, lo que añade retraso a la respuesta.
Cuando ejecutes una prueba en PageSpeed Insights, Google te informará de si hay tareas largas en el hilo principal de tu sitio web.
La solución principal en este caso sería dividir las tareas largas en fragmentos más pequeños y asíncronos utilizando requestIdleCallback(), setTimeout() o requestAnimationFrame(). Puede que esto suene técnico para quienes no son desarrolladores, pero no te preocupes: más adelante en el artículo veremos soluciones más sencillas.
3. Recursos no optimizados (CSS, JS e imágenes)
Los recursos pesados o sin minificar añaden tiempo de procesamiento innecesario. Los archivos CSS y JS que bloquean la renderización mantienen ocupado el hilo principal, mientras que las imágenes grandes retrasan la actualización visual.
Por ejemplo, una página con varios archivos JS de 300 KB y 2 MB de imágenes sin comprimir obliga al navegador a analizar, compilar y renderizar todos esos datos antes de mostrar una respuesta visual.
Hay varias formas de solucionar este problema. Puedes minificar y comprimir JS y CSS usando un plugin de rendimiento como Jetpack Boost, y posponer los scripts no esenciales. También te conviene usar formatos de imagen modernos y eficientes, como WebP y AVIF.
4. Tamaños grandes del DOM
El DOM (modelo de objetos del documento) representa todos los elementos de tu página. Cuando crece demasiado, por ejemplo, por encima de 1.500 nodos, cada recálculo del diseño tarda más en ejecutarse.
Los sitios de WordPress suelen sobrecargar el DOM mediante constructores de páginas o shortcodes que envuelven los elementos en varios contenedores anidados. Una página puede incluir cinco divs anidados por cada bloque de contenido, lo que da lugar a miles de nodos. Un simple clic en un menú desplegable puede activar un recálculo de todo el diseño.
Una prueba en PageSpeed Insights puede revelar de nuevo si tu sitio tiene un DOM demasiado grande. Como solución, deberías simplificar las plantillas, usar menos elementos anidados y evitar duplicar contenido oculto.
5. Controladores de eventos ineficientes
Los controladores de eventos son funciones de JavaScript que se ejecutan cuando los visitantes interactúan con los elementos. Los controladores ineficientes o pesados, como los que ejecutan bucles grandes en cada desplazamiento o clic, retrasan el procesamiento.
Por ejemplo, un script personalizado que escuche el evento «mousemove» podría recalcular las posiciones del diseño cada vez que se mueve el cursor. En dispositivos más lentos, esto hace que las interacciones respondan con más retraso.
Si trabajas con un desarrollador, pídele que aplique debounce o throttle a los eventos frecuentes, como scroll o mousemove, y que se asegure de que los controladores de clic realicen el mínimo trabajo posible (idealmente, solo actualizaciones del DOM o llamadas a API gestionadas de forma asíncrona).
6. Scripts de terceros (anuncios, analítica y widgets de chat)
Los scripts de terceros cargan código externo desde otro servidor. Aunque son útiles, compiten por el ancho de banda y los recursos del hilo principal de tu sitio.
Tu sitio puede tener scripts de terceros de Google Analytics, widgets de chat, redes publicitarias, banners de afiliados y mucho más. Como estos scripts suelen ejecutarse de forma asíncrona, son impredecibles y a veces bloquean el renderizado.
Intenta limitar el número de scripts de terceros o, al menos, cargarlos después de que el usuario interactúe con la página (usando las opciones de retraso de JavaScript que veremos próximamente). También puedes alojar la analítica localmente cuando sea posible.
Cómo mejorar tu puntuación de INP en WordPress
Ya hemos explicado algunos métodos para mejorar tu puntuación de INP, pero hasta ahora estas soluciones han sido un poco técnicas.
En esta sección veremos soluciones más sencillas para principiantes, entre ellas el uso de herramientas que automatizan la optimización por ti.
1. Cambia a un hosting de alto rendimiento
La elección de tu plan de hosting influye directamente en el rendimiento de tu sitio. Si optaste por una solución económica, quizá sea el momento de cambiar a otra más potente.
Lo ideal es elegir planes optimizados específicamente para WordPress. Busca las siguientes especificaciones:
- Compatibilidad con PHP 8.1+
- Compatibilidad con HTTP/3
- Almacenamiento SSD o NVMe
- Opciones de almacenamiento en caché y CDN integradas
Los proveedores de hosting gestionado de WordPress gestionan automáticamente muchas optimizaciones por ti, ofreciendo tiempos de respuesta más rápidos que benefician al INP.
2. Elige un tema ligero
Un tema ligero minimiza el código del front-end y evita un uso excesivo de JavaScript. Temas optimizados para la velocidad te ayudarán a mejorar el rendimiento de tu sitio, incluida la puntuación de INP.
Puede resultar tentador elegir un tema repleto de elementos, pero probablemente no los necesites todos. Por eso, intenta evitar los temas multipropósito que incluyen cientos de funciones que nunca utilizarás, ya que solo perjudicarán el rendimiento de tu sitio.
Cuanto más ligero sea tu tema, menos trabajo tendrá que hacer el navegador después de cada interacción. Muchos temas afirman ser ligeros, pero la mejor forma de confirmarlo es realizar varias pruebas de velocidad con distintos temas instalados y comparar los resultados.
3. Mantén todo el software actualizado
Las actualizaciones de software suelen incluir mejoras de rendimiento y correcciones de errores que ayudarán a que tu sitio web funcione más rápido. Por eso, es fundamental mantener actualizados el núcleo de WordPress, el tema y los plugins.
A veces, un problema de rendimiento como un INP deficiente desaparece simplemente al actualizar componentes obsoletos que bloqueaban scripts o generaban consultas ineficientes.
4. Instala un plugin de optimización de Core Web Vitals
No todo el mundo tiene tiempo para optimizar manualmente su sitio web. Además, algunas de estas tareas requieren conocimientos técnicos.
Si quieres obtener resultados rápidos, instala Jetpack Boost. Desarrollado por Automattic, el equipo responsable de WordPress.com, Jetpack automatiza varias tareas de optimización.
Entre ellas se incluyen el aplazamiento de JavaScript no esencial, la minificación del código y mucho más. Además, Jetpack proporciona puntuaciones de rendimiento en tiempo real para las versiones de escritorio y móvil de tu sitio web.
Puedes empezar a utilizar Jetpack Boost gratis. Solo tienes que buscar el plugin en el panel de administración de WordPress, instalarlo y activarlo.
Ten en cuenta que necesitarás una cuenta de WordPress.com para usar Jetpack. Puedes crear una gratis.
5. Aplaza o retrasa el JavaScript no esencial
Los scripts que no sean necesarios de inmediato, como los de analítica o los widgets de chat, deberían cargarse más tarde mediante los atributos defer o async. Como alternativa, puedes aplazar o retrasar el JavaScript no esencial con Jetpack Boost.
Solo tienes que activar el ajuste correspondiente.
Esto reduce considerablemente el retraso de entrada y mantiene libre el hilo principal para acciones del usuario, como hacer clic en los botones.
6. Inserta el CSS crítico
El CSS crítico es el estilo mínimo necesario para renderizar la parte de tu página visible sin desplazarse. El contenido visible sin desplazarse es el que los visitantes pueden ver inmediatamente al acceder a una página, antes de empezar a desplazarse hacia abajo.
Insertarlo garantiza una respuesta visual instantánea mientras se aplaza el resto de tus estilos. Una vez más, Jetpack Boost puede gestionar esto automáticamente, mejorando tu INP y tu puntuación general de Core Web Vitals.
7. Concatena JS y CSS
Al combinar archivos más pequeños de JavaScript y CSS en paquetes más grandes, reduces las solicitudes al servidor cada vez que alguien visita tu sitio web. La concatenación también mejora la eficiencia de la caché y la velocidad de análisis en dispositivos móviles.
Por suerte, esta función también está disponible en Jetpack Boost.
Puedes activarlo rápidamente tanto para JavaScript como para CSS.
8. Elimina el CSS que no utilices
Los temas de WordPress y los maquetadores de páginas suelen cargar grandes cantidades de CSS que no se utiliza. El navegador tiene que analizarlo igualmente, lo que aumenta el tiempo de renderizado.
Puedes empezar eliminando los plugins o temas que ya no necesites. Si haces una prueba en PageSpeed Insights, los resultados mostrarán cualquier CSS que no se utilice en tu sitio web.
También puedes activar la función Optimizar la carga del CSS crítico en Jetpack.
Esto muestra antes los estilos más importantes, para que los visitantes no tengan que esperar a que se carguen todos los estilos, incluidos los que no se utilizan, antes de poder interactuar con tu sitio web.
9. Reduce los scripts de terceros
Otra medida eficaz consiste en reducir el número de scripts de terceros de tu sitio web. Elimina todo lo que ya no sea esencial. Por ejemplo, puede que hayas utilizado un widget de chat en la entrada o una integración de marketing por correo electrónico que ya no necesites.
Cada script de terceros que elimines puede ahorrarte decenas o incluso cientos de milisegundos en tu INP.
10. Desactiva y elimina los plugins innecesarios
Cada plugin que instalas en tu sitio web añade archivos de CSS y JavaScript. Con el tiempo, estos scripts se acumulan y ralentizan todo.
Por tanto, elimina los plugins que ya no utilices; desactivarlos no será suficiente. Después, vuelve a ejecutar una prueba de Core Web Vitals y deberías notar una diferencia en la puntuación de tu INP.
11. Limpia y optimiza tu base de datos
Una base de datos desordenada puede ralentizar la ejecución de consultas y las respuestas del servidor. Puedes utilizar un plugin de optimización de bases de datos para eliminar revisiones de entradas, borradores, spam de la sección de comentarios y otros elementos no deseados.
El mantenimiento periódico de la base de datos ayuda a mantener tu sitio ligero y reduce el tiempo que WordPress necesita para entregar las páginas y permitir la interacción.
12. Optimiza tus imágenes
Las imágenes son archivos pesados y aumentan los tiempos de carga. Por eso, te conviene comprimirlas antes de subirlas o utilizar un plugin como Jetpack que redimensione las fotos automáticamente por ti y las convierta a WebP.
Solo tienes que activar la CDN de imágenes en Jetpack.
Esto también hará que Jetpack entregue tus imágenes desde su CDN, lo que reducirá la carga de tu servidor.
13. Aprovecha la caché y una CDN
El almacenamiento en caché es el proceso de almacenar versiones de tus páginas en el navegador de los visitantes. De este modo, cuando vuelven a tu sitio web, la página se carga desde el navegador y el servidor tiene que trabajar menos. Como resultado, pueden ver e interactuar con el contenido más rápidamente.
Jetpack te permite activar la caché en tu sitio web.
Esto te proporciona un control preciso sobre qué páginas o URL quieres excluir de la caché.
También es buena idea utilizar la CDN. Se trata de una red de servidores distribuidos por todo el mundo que entrega tu contenido desde el servidor más cercano a cada visitante. Como resultado, tus páginas se cargan más rápido y cada clic parece responder con mayor rapidez.
Jetpack incluye una CDN de imágenes de forma predeterminada.
Cuando activas esta función, Jetpack sirve tus imágenes y archivos estáticos de CSS y JavaScript desde su red global segura de servidores.
14. Evita un tamaño excesivo del DOM
También puedes contratar a un desarrollador para que audite tus páginas en busca de elementos HTML innecesarios. Cada elemento nuevo aumenta el tiempo de recálculo después de una interacción.
Cuando sea posible, mantén el total de nodos por debajo de 1.500. Simplifica los div anidados y evita cargar simultáneamente varias secciones ocultas.
15. Divide las tareas largas
Si tienes conocimientos técnicos, también puedes dividir los scripts de larga ejecución en fragmentos más pequeños y asíncronos utilizando API modernas:
requestIdleCallback(() => { /* task */ });orsetTimeout(task, 0);
Esto proporciona al navegador más margen para procesar las entradas y mejora la capacidad de respuesta percibida.
Cómo medir el INP en tu sitio de WordPress
Hay tres herramientas principales que puedes utilizar para medir el INP de tu sitio de WordPress. Veamos detenidamente cada método.
Google PageSpeed Insights
Puede que ya conozcas Google PageSpeed Insights. Esta herramienta de pruebas comprueba las métricas Core Web Vitals de tu sitio, incluido el INP.
Introduce la URL de tu sitio web. Cuando el resultado esté listo, busca la métrica INP.
Si el resultado aparece en verde, todo va bien. Si aparece en amarillo o rojo, deberías trabajar para mejorar la puntuación. Por suerte, PageSpeed Insights te ofrece una lista de acciones recomendadas para mejorar el rendimiento de tu sitio.
Google Search Console
Con Google Search Console, puedes ver qué páginas de tu sitio necesitan mejoras. Inicia sesión en tu cuenta, selecciona tu sitio web y, a continuación, ve a Experiencia → Core Web Vitals.
Ahora, abre el informe de la versión móvil o de escritorio, como prefieras. Tus URL se agrupan en tres categorías: Deficiente, Necesita mejoras y Buena.
Selecciona un grupo y haz clic para ver las métricas.
Esto muestra los datos agregados de LCP, CLS e INP correspondientes a las URL de ese grupo.
Chrome DevTools
Por último, puedes utilizar el panel Rendimiento de Chrome DevTools para registrar interacciones reales.
Haz clic con el botón derecho en la página y selecciona Inspeccionar. Esto abrirá DevTools. Después, ve a la pestaña Rendimiento y verás las métricas locales, incluido el INP.
DevTools también resalta las tareas largas, lo que te ayuda a identificar qué scripts deben dividirse o aplazarse.
Comprende mejor el INP
Puede que todo lo que hemos explicado hasta ahora sea nuevo para ti. Por otro lado, si ya conoces el INP, quizá quieras profundizar un poco más para entender completamente cómo funciona.
¿Qué mide exactamente el INP?
INP analiza todas las interacciones medibles de una página y toma la más larga (o el percentil 98) como puntuación final. Eso significa que incluso un solo botón lento puede reducir tu métrica general.
Por eso, debes ser exhaustivo al optimizar tu sitio web para INP. Además de eliminar los componentes que no utilizas, también es importante revisar los archivos existentes de tu sitio web y optimizarlos utilizando la CDN de imágenes, minificando JavaScript y CSS, y aplicando las demás medidas mencionadas anteriormente.
¿Cómo se calcula tu puntuación de INP?
INP = Retraso de entrada + Tiempo de procesamiento + Retraso de presentación
Esto es lo que mide cada componente:
- Retraso de entrada: Cuánto tiempo transcurre antes de que el navegador empiece a procesar la acción de un visitante
- Tiempo de procesamiento: Cuánto se tarda en ejecutar el JavaScript correspondiente
- Retraso de presentación: Cuánto se tarda en actualizar la interfaz después del procesamiento
Lo ideal es optimizar cada componente para asegurarte de que tu INP se mantenga por debajo de 200 ms.
¿Qué interacciones de usuario cuentan para INP?
Todas las interacciones que provocan un cambio visible cuentan para el INP de tu sitio. Esto incluye hacer clic en un menú, enviar un formulario o alternar un modal.
Los eventos de pasar el cursor o desplazarse generalmente no cuentan, a menos que interfieran con otros elementos en los que se pueda hacer clic.
Las tres fases de INP
Veamos con más detalle las tres fases de INP.
Fase 1: Retraso de entrada
Esto ocurre cuando el hilo principal del navegador está ocupado con otras tareas. El código JavaScript pesado, los recálculos del diseño o las llamadas de datos síncronas suelen provocar un retraso de entrada.
Fase 2: Tiempo de procesamiento
Este es el tiempo necesario para ejecutar los controladores de eventos. Un JavaScript limpio y modular ayuda a reducir este tiempo de procesamiento. También te conviene evitar los scripts integrados que manipulan varios nodos del DOM.
Fase 3: Retraso de presentación
Una vez finalizado el procesamiento, el navegador debe pintar el cambio. Las animaciones o los reflujos complejos de CSS prolongan este retraso, por lo que deberías optar por funciones sencillas aceleradas por la GPU y transiciones simples. Un tema sólido y ligero ya incluirá estos elementos para reducir los retrasos.
Preguntas frecuentes
Por último, respondamos a algunas preguntas frecuentes sobre INP.
¿Cuál es la diferencia entre FID e INP?
Cuando todavía se utilizaba, FID solo medía el tiempo transcurrido hasta que el navegador empezaba a procesar la primera interacción. INP mide el ciclo de respuesta completo de todas las interacciones, lo que refleja con mayor precisión la experiencia del usuario.
¿Por qué mi INP es peor en dispositivos móviles que en ordenadores de sobremesa?
Los dispositivos móviles tienen procesadores más lentos y menos memoria, por lo que cada script tarda más en ejecutarse. Puedes optimizar para dispositivos móviles aplazando JavaScript y reduciendo el tamaño del DOM.
¿Mejorar mi puntuación de INP ayudará a mejorar otras métricas Core Web Vitals?
Sí. Muchas optimizaciones de INP, como reducir el tiempo de ejecución de JavaScript, optimizar CSS y activar el almacenamiento en caché, también mejoran Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS).
¿Necesito contratar a un desarrollador para solucionar los problemas de INP o puedo hacerlo yo mismo?
Puedes realizar tú mismo la mayoría de las optimizaciones de INP con Jetpack Boost. Este plugin automatiza mejoras esenciales, como la generación de CSS crítico, el aplazamiento de JavaScript y la optimización de imágenes.
En sitios muy personalizados o con muchos scripts, un desarrollador te ayudará con la gestión de eventos, la división del código y otras tareas técnicas.
¿Cuál es la forma más rápida de empezar a mejorar mi puntuación de INP?
Puedes mejorar al instante tu puntuación de INP instalando Jetpack Boost. Después, solo tienes que usar los botones de alternancia para activar funciones esenciales, como la CDN de imágenes, el aplazamiento de JavaScript no esencial, la optimización de CSS y muchas más.
Jetpack 