Tu interactividad es lenta. Arréglalo ya
1. El Fin de la Era FID: ¿Por qué INP es superior?
Durante años, optimizamos el First Input Delay (FID). Pero el FID tenía un truco: solo medía la primera interacción y solo medía el retraso inicial, no el tiempo que tardaba la web en pintar realmente el resultado.
En 2026, el INP es el estándar absoluto. Mide la latencia de todas las interacciones del usuario (clics, toques, teclado) durante toda la vida de la página. Si un usuario hace clic en un menú y la web tarda 500ms en mostrarlo porque el hilo principal está bloqueado, tu INP caerá en la zona roja.
🎯 Thresholds 2026
- Bueno: < 200ms
- Mejorable: 200ms - 500ms
- Pobre: > 500ms
El impacto en Negocio
Un INP superior a 500ms correlaciona con una caída del 22% en la tasa de conversión en sitios de e-commerce. La "fricción invisible" es el asesino silencioso de tus ingresos.
2. Anatomía de una Interacción: Los 3 Pilares
Para mejorar el INP, debemos entender qué sucede desde que el usuario pulsa hasta que la pantalla se actualiza:
- Input Delay: El tiempo que la interacción espera porque el Main Thread está ocupado con otra tarea (JS pesado, hidratación).
- Processing Time: El tiempo que tarda tu código JS (event handlers) en ejecutarse.
- Presentation Delay: El tiempo que tarda el navegador en recalcular el layout, pintar y componer la nueva imagen.
El Ciclo de Latencia
Retraso de Entrada
Procesamiento JS
Retraso de Presentación
3. Tácticas Avanzadas: Yielding al Main Thread
La clave para un INP de élite es no bloquear el hilo principal. En 2026, ya no basta con mover cosas a Web Workers (aunque ayuda). Debemos aprender a “ceder” (yield) el control al navegador.
La Revolución de scheduler.yield()
Hasta hace poco, usábamos setTimeout(0) para romper tareas largas. Ahora, scheduler.yield() es la API nativa diseñada específicamente para mejorar el INP. Permite que el navegador procese interacciones pendientes y renders en medio de una tarea pesada de JS.
4. Diagnóstico en el Mundo Real: RUM y Lab Data
El INP es una métrica de campo (RUM). No puedes confiar solo en Lighthouse (Lab Data) porque el INP depende de cómo interactúan los usuarios reales con dispositivos reales (y a menudo lentos).
Uso de web-vitals library
Implementa telemetría real en tu producción para capturar los attribution data. Necesitas saber exactamente qué interacción causó el pico de latencia.
Para una fluidez extrema, descubre cómo WebAssembly puede liberar tu hilo principal de tareas pesadas y cómo la Programación de Alto Rendimiento mejora la eficiencia global.
5. El Rol de las Herramientas: SEO Expert
En AldeaCode hemos integrado diagnósticos de INP predictivos en nuestro SEO Expert. No esperes a que Google Search Console te avise de un error “Pobre”. Nuestra herramienta analiza el hilo principal y detecta cuellos de botella antes de que afecten a tu ranking.
6. Preguntas Frecuentes (FAQ) sobre INP
¿Por qué mi Lighthouse da 100 pero mi INP es pobre?
Porque Lighthouse no hace clic. El INP requiere interacción humana real. Un móvil de gama baja intentando ejecutar JS mientras el usuario hace scroll rápido genera un INP que una simulación de escritorio no detecta.
¿Afectan los anuncios de terceros al INP?
Dramáticamente. Scripts de trackers y ads inyectan tareas pesadas en el Main Thread de forma impredecible. La solución es cargarlos con `requestIdleCallback` o usar herramientas como Partytown para moverlos a un Worker.
¿Qué es el "Layout Thrashing" y cómo influye?
Es cuando tu código lee y escribe propiedades del DOM (como `offsetHeight`) repetidamente de forma síncrona. Esto obliga al navegador a recalcular el estilo en medio de tu JS, disparando el Presentation Delay y arruinando el INP.