Search Engine Optimization Beginner

Preparación para INP

Valida la preparación de INP para confirmar reacciones por debajo de 200 ms, lograr una UX más fluida, mejores puntuaciones en Core Web Vitals y rankings más sólidos.

Updated Ago 03, 2025

Quick Definition

La preparación de INP muestra si la Interacción a la Siguiente Pintura (INP) de una página —el tiempo que transcurre desde que el usuario hace clic, toca o presiona una tecla hasta la siguiente actualización visual— se sitúa por debajo del objetivo de 200 ms de Google, lo que indica que el sitio responde rápidamente a la interacción.

1. ¿Qué es la Preparación de INP?

Preparación de INP indica si la Interaction to Next Paint (INP), es decir, el retraso entre una acción del usuario (clic, toque, pulsación de tecla) y el siguiente cambio visual, se mantiene por debajo del umbral de 200 ms de Google. Si una página está “preparada”, la mayoría de las interacciones se sienten instantáneas, lo que le indica a Google que el sitio responde rápidamente a la intención del usuario.

2. Por qué es importante para el SEO

Los Core Web Vitals de Google influyen en el posicionamiento. INP se convertirá en un Core Web Vital en marzo de 2024, reemplazando a First Input Delay (FID). Las páginas que cumplen el objetivo de 200 ms obtienen dos ventajas:

  • Mayor probabilidad de alcanzar el top-10: los sitios rápidos y responsivos reducen la tasa de rebote y reciben el impulso de rendimiento de Google.
  • Mejores señales de usuario: un INP bajo se correlaciona con sesiones más largas y mayor conversión, reforzando las métricas de interacción positiva que Google monitoriza.

3. Cómo se mide el INP (nivel principiante)

  • Cuando el usuario interactúa, el navegador registra la hora del evento (p. ej., mousedown).
  • Luego espera al siguiente ciclo de pintura: el momento en que aparece un cambio visible en pantalla.
  • La diferencia entre esas dos marcas de tiempo es el INP de esa interacción.
  • Durante una sesión, Chrome recopila todas las interacciones y se queda con el valor más alto. Ese “peor caso” es el número que muestran el informe CrUX y PageSpeed Insights.

4. Mejores prácticas y consejos de implementación

  • Minimiza el trabajo en el hilo principal: divide las tareas largas de JavaScript en fragmentos más pequeños con requestIdleCallback o setTimeout.
  • Usa listeners pasivos: addEventListener('touchstart', handler, {passive: true}) mantiene el desplazamiento fluido.
  • Difiere los scripts no críticos: carga analíticas y widgets de chat después de load o mediante async/defer.
  • Evita el layout thrashing: agrupa lecturas y escrituras del DOM. Herramientas como ResizeObserver te ayudan a detectar reflows costosos.
  • Audita con Lighthouse y la extensión Web Vitals para Chrome para detectar callbacks que superen los 50 ms.

5. Ejemplos en el mundo real

  • Página de producto de e-commerce: sustituir un carrusel de jQuery por un slider ligero en CSS redujo el INP de 350 ms a 110 ms, aumentando los clics en “añadir al carrito” en un 8 %.
  • Sitio de noticias: mover los botones de compartir en redes a iframes lazy-loaded evitó un bloqueo de JavaScript de 180 ms, bajando el INP por debajo de la barrera de 200 ms.

6. Casos de uso habituales

  • Flujos de checkout: los usuarios abandonan el carrito cuando los formularios se ralentizan. Monitorizar el INP detecta cuellos de botella a tiempo.
  • Dashboards SaaS: los clics frecuentes y los cambios de filtros hacen que la capacidad de respuesta sea crítica para la calidad percibida.
  • Landing pages móviles: en dispositivos más lentos, recortar el INP suele ser la forma más rápida de cumplir con los Core Web Vitals.

Frequently Asked Questions

¿Qué significa la preparación de INP en Core Web Vitals?
La preparación de INP muestra si la Interacción con la siguiente pintura (INP) de tu sitio es lo suficientemente rápida para la mayoría de los usuarios. Google etiqueta una página como «Ready» cuando el 75 % de las interacciones reales se realizan en menos de 200 ms, lo que indica una capacidad de respuesta fluida.
¿Cómo compruebo la puntuación de preparación de INP de mi sitio?
Abre PageSpeed Insights o el informe de Core Web Vitals en Search Console y busca la métrica INP. Verás una etiqueta codificada por colores: verde indica «Bueno», amarillo «Necesita mejorar» y rojo «Deficiente».
¿En qué se diferencia INP del First Input Delay (FID)?
FID solo mide la demora antes de que el navegador empiece a procesar la primera interacción, mientras que INP captura la interacción más lenta de la página, incluido el tiempo de procesamiento y renderizado. Dado que INP abarca más etapas del recorrido del usuario, Google planea reemplazar FID por INP como señal de capacidad de respuesta.
¿Por qué mi página sigue sin cumplir la preparación de INP incluso después de optimizar las imágenes?
Los problemas de INP suelen originarse en tareas de JavaScript prolongadas, event listeners que bloquean el hilo principal o scripts de terceros pesados, no en imágenes grandes. Utiliza el panel Performance de Chrome DevTools para identificar tareas que superen los 50 ms y divídelas mediante carga asíncrona, code splitting o web workers.
¿Qué correcciones rápidas pueden mejorar la preparación para el INP en un sitio de WordPress?
Diferir o eliminar complementos no utilizados, cambiar a un tema ligero y activar la carga diferida (lazy loading) para los scripts no críticos. Añadir el atributo 'defer' a los scripts de analítica y publicidad, y servir el CSS crítico en línea también puede recortar milisegundos al tiempo de interacción.

Self-Check

¿Qué aspecto de la experiencia de usuario mide INP (Interaction to Next Paint) y por qué es importante para el SEO?

Show Answer

INP mide el tiempo transcurrido entre una interacción del usuario (toque, clic o pulsación de tecla) y el siguiente fotograma que refleja visualmente dicha interacción. Un INP bajo significa que la página se percibe como receptiva, lo que reduce la tasa de rebote e indica a los motores de búsqueda que el sitio ofrece una experiencia fluida, factores que pueden influir en el posicionamiento.

¿Qué rango de valores de INP se considera «bueno» según las directrices de Core Web Vitals de Google y qué sucede si tu sitio web excede ese rango?

Show Answer

Un INP de 200 ms o menos se clasifica como «bueno». Entre 200 ms y 500 ms se considera «necesita mejorar», y cualquier valor superior a 500 ms es «deficiente». Las páginas en el rango «deficiente» pueden frustrar a los usuarios y perder prioridad en los resultados de búsqueda frente a competidores con una capacidad de respuesta más rápida.

Un informe de Lighthouse indica que la página de inicio en móvil tiene un INP de 450 ms. ¿Cómo deberías interpretar este resultado y qué dos soluciones prácticas podrían llevar la página al rango “bueno”?

Show Answer

A 450 ms, la página se encuentra en la banda de «needs improvement», lo que significa que la mayoría de los usuarios percibe retraso. Dos quick wins: (1) divide las tareas largas de JavaScript —usa code-splitting o difiere los scripts no críticos para que el hilo principal quede libre y responda más rápido; (2) minimiza el layout thrashing agrupando las actualizaciones del DOM o utilizando CSS containment para que la retroalimentación de la interacción se pinte antes.

Menciona una fuente de datos de campo y una herramienta de laboratorio que utilizarías conjuntamente para confirmar la preparación de la página para INP antes de un lanzamiento importante.

Show Answer

Fuente de datos de campo: Chrome User Experience Report (CrUX) en el informe de Core Web Vitals de Google Search Console — muestra métricas de INP de usuarios reales. Herramienta de laboratorio: Lighthouse o WebPageTest — permite reproducir y aislar problemas de INP en un entorno controlado antes de implementar cambios.

Common Mistakes

❌ Confiar únicamente en herramientas de laboratorio (p. ej., Lighthouse) e ignorar los datos de campo reales para INP

✅ Better approach: Extrae el INP en el percentil 75 desde CrUX o tu propio RUM antes y después de cada lanzamiento. Utiliza pruebas de laboratorio para depurar, pero prioriza los datos de campo al decidir si una corrección es lo suficientemente buena.

❌ Tratar el INP como un problema exclusivo de JavaScript y pasar por alto tareas largas de widgets de terceros, animaciones CSS o renderizados pesados

✅ Better approach: Perfila con el panel Performance, ordena las tareas largas por tiempo de bloqueo y aplica carga diferida (lazy-loading), reemplazo o limitación (throttling) a las problemáticas. Establece un presupuesto de 50 ms por tarea y automatiza alertas en CI para detectar regresiones.

❌ Optimizar la página de inicio e ignorar las plantillas de páginas de alto tráfico (producto, artículo, checkout) que en realidad arrastran a la baja el INP del percentil 75 de todo el sitio

✅ Better approach: Mapea las páginas según su cuota de tráfico, prueba cada plantilla por separado y corrige primero a los peores infractores. Una sola plantilla lenta puede hundir tu puntuación INP a nivel de origen.

❌ Lanzar nuevas funcionalidades sin un presupuesto de rendimiento, provocando regresiones en INP que pasan desapercibidas hasta la siguiente actualización de Core Web Vitals

✅ Better approach: Establece presupuestos estrictos (p. ej., máximo 100 KB de JavaScript por página y máximo 200 ms de tiempo de scripting por interacción) en la canalización de compilación. Detén la compilación o marca las pull requests que superen el presupuesto.

All Keywords

Preparación para INP Preparación para la Interacción a la siguiente pintura (INP) Lista de verificación de preparación para el INP evaluación de preparación para INP mejorar la puntuación de INP Guía de optimización de INP optimizar la métrica INP auditoría de rendimiento de INP preparar el INP del sitio web Core Web Vitals INP (Interacción con la siguiente pintura) herramienta de benchmarking de INP reducir el retraso de entrada (INP)

Ready to Implement Preparación para INP?

Get expert SEO insights and automated optimizations with our platform.

Start Free Trial