INP (Interaction to Next Paint): Entendiendo la Capacidad de Respuesta de la Página

Introducción

Interaction to Next Paint (INP) es uno de los Core Web Vitals de Google—un conjunto de métricas que miden la experiencia real del usuario en tu sitio web. INP reemplazó a First Input Delay (FID) en marzo de 2024 como la métrica de capacidad de respuesta porque proporciona una imagen más completa de cómo tu página responde a las interacciones del usuario.

Cuando los usuarios hacen clic en botones, tocan enlaces, o escriben en formularios, esperan retroalimentación inmediata. INP mide cuánto tiempo toma desde que un usuario interactúa con tu página hasta que el navegador puede actualizar lo que se muestra en pantalla.

¿Qué es INP?

INP mide la latencia de todas las interacciones del usuario a lo largo del ciclo de vida de la página, y luego reporta un valor que representa la peor (o casi peor) latencia de interacción. A diferencia de FID, que solo medía la primera interacción, INP captura la capacidad de respuesta de todo el viaje del usuario.

Cómo se Calcula INP

Cada interacción tiene tres fases:

Línea de Tiempo de Interacción:
Entrada Usuario → Retraso de Entrada → Tiempo de Procesamiento → Retraso de Presentación → Actualización Visual
                 └─────────────────────Duración de INP─────────────────────┘

1. Retraso de Entrada: Tiempo desde la acción del usuario hasta que comienzan los manejadores de eventos
2. Tiempo de Procesamiento: Tiempo para que los manejadores de eventos se ejecuten
3. Retraso de Presentación: Tiempo para que el navegador renderice la actualización

INP considera:

• Clics (ratón, touchpad, pantalla táctil)
• Toques (pantalla táctil)
• Pulsaciones de teclas (teclados físicos y en pantalla)

No se miden: Hover, scroll (estos no disparan manejadores de eventos)

Umbrales de INP

Según la documentación de web.dev de Google, las puntuaciones de INP se categorizan como:

✅ Bueno:           ≤ 200 milisegundos
⚠️ Necesita Mejora: 200 - 500 milisegundos
❌ Pobre:           > 500 milisegundos

Objetivo: Al menos el 75% de las visitas a la página deberían tener un INP de 200 milisegundos o menos.

INP vs FID: Diferencias Clave

INP reemplazó a FID porque es más completo:

Aspecto	FID (Antiguo)	INP (Nuevo)
Qué mide	Solo primera interacción	Todas las interacciones
Qué reporta	Solo retraso de entrada	Latencia completa (retraso + procesamiento + renderizado)
Cuándo fue Core Web Vital	2020-2024	Marzo 2024+
Umbral típico	100ms	200ms

¿Por Qué es Importante INP para el SEO?

INP impacta directamente la visibilidad de búsqueda de tu sitio web y la experiencia de usuario:

Beneficios clave de un buen INP:

• Factor de ranking: Desde marzo de 2024, INP es parte de los Core Web Vitals que influyen en los rankings
• Percepción del usuario: Las interacciones rápidas hacen que tu sitio se sienta responsivo y moderno
• Completación de tareas: Los usuarios pueden completar formularios, navegar e interactuar sin frustración
• Experiencia móvil: Especialmente crítico en móvil donde la potencia de procesamiento es limitada
• Tasas de conversión: Las páginas responsivas tienen mayor engagement y conversiones

Impacto en el Mundo Real

Un INP pobre se manifiesta como:

• Botones que no responden inmediatamente al hacer clic
• Formularios que se sienten lentos al escribir
• Navegación que tarda demasiado en responder
• Menús desplegables que se cuelgan antes de abrirse
• Sensación general de que el sitio está “lento” o “roto”

¿Qué Causa un INP Pobre?

Entender las causas te ayuda a arreglarlas:

1. JavaScript de Larga Ejecución

JavaScript pesado bloquea el hilo principal:

// ❌ Bloquea el hilo principal durante toda la duración
function processLargeDataset(data) {
    for (let i = 0; i < data.length; i++) {
        // Cálculo pesado
        complexCalculation(data[i]);
    }
}

// Usuario hace clic durante esto = respuesta retrasada

2. Tamaño Grande del DOM

Más nodos de DOM significa actualizaciones más lentas:

Impacto del Tamaño del DOM:
├── 1,500 nodos: Actualizaciones rápidas
├── 5,000 nodos: Retraso notable
├── 10,000+ nodos: Retrasos significativos
└── 25,000+ nodos: Problemas severos de rendimiento

3. Manejadores de Eventos Pesados

Trabajo complejo en manejadores de clic/entrada:

// ❌ Trabajo pesado en manejador de eventos
button.addEventListener('click', () => {
    // Trabajo pesado síncrono
    validateAllForms();
    recalculateLayout();
    updateAllComponents();
});

4. Layout Thrashing

Leer y escribir propiedades de layout repetidamente:

// ❌ Layout thrashing
elements.forEach(el => {
    el.style.width = el.offsetWidth + 10 + 'px'; // Lee, luego escribe
});

5. Scripts de Terceros

Analytics, anuncios y widgets compitiendo por tiempo del hilo principal.

Mejores Prácticas Básicas

1. Divide Tareas Largas

Mantén las tareas de JavaScript bajo 50ms:

// ✅ Cede al hilo principal entre chunks
async function processInChunks(data, chunkSize = 100) {
    for (let i = 0; i < data.length; i += chunkSize) {
        const chunk = data.slice(i, i + chunkSize);
        processChunk(chunk);

        // Cede al hilo principal
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

2. Debounce en Manejadores de Entrada

No proceses cada pulsación de tecla:

// ✅ Manejador de entrada con debounce
const handleSearch = debounce((query) => {
    searchAPI(query);
}, 300);

input.addEventListener('input', (e) => {
    handleSearch(e.target.value);
});

3. Usa Web Workers para Cálculos Pesados

Mueve el trabajo pesado fuera del hilo principal:

// ✅ Cálculo pesado en Web Worker
const worker = new Worker('heavy-calculation.js');

button.addEventListener('click', () => {
    worker.postMessage({ data: largeDataset });
});

worker.onmessage = (e) => {
    displayResults(e.data);
};

4. Optimiza Manejadores de Eventos

Mantén los manejadores ligeros:

// ✅ Manejador de eventos ligero
button.addEventListener('click', () => {
    // Retroalimentación visual rápida primero
    button.classList.add('loading');

    // Difiere trabajo pesado
    requestAnimationFrame(() => {
        performAction();
    });
});

Cómo Verificar con UXR SEO Analyzer

La extensión UXR SEO Analyzer te ayuda a monitorear INP:

1. Instala la extensión UXR SEO Analyzer en Chrome
2. Navega a cualquier página de tu sitio web
3. Abre la extensión
4. Ve a la pestaña “Performance”
5. Revisa el evaluador “INP”

La extensión mostrará:

• Valor actual de INP
• Si cumple el umbral de 200ms
• Interacciones que contribuyeron a la puntuación
• Sugerencias de mejora

Próximos Pasos

¿Quieres dominar todas las técnicas avanzadas de optimización de INP? Lee nuestra guía completa de optimización de INP donde cubrimos:

• Estrategias de optimización de JavaScript
• Implementación de Web Workers
• Scheduler API y scheduler.yield()
• Depuración de Long Animation Frames
• Real User Monitoring para INP

Artículos Relacionados:

• LCP Explicado - Fundamentos de Largest Contentful Paint
• CLS Explicado - Conceptos básicos de Cumulative Layout Shift
• FCP Explicado - Visión general de First Contentful Paint

Referencias

Este artículo cita las siguientes fuentes autorizadas:

[1] web.dev: Interaction to Next Paint (INP) https://web.dev/articles/inp Documentación oficial de Google que define INP. Explica cómo la métrica mide todas las interacciones a lo largo del ciclo de vida de una página, el umbral de 200ms, y por qué INP reemplazó a FID para proporcionar una imagen más completa de la capacidad de respuesta.

[2] Google Search Central: Documentación de Page Experience https://developers.google.com/search/docs/appearance/page-experience Documentación oficial de Google Search confirmando que INP se convirtió en parte de Core Web Vitals en marzo de 2024. Explica cómo INP, junto con LCP y CLS, contribuye a los rankings de experiencia de página.

[3] Smashing Magazine: Preparing For Interaction To Next Paint https://smashingmagazine.com/2023/12/preparing-interaction-next-paint-web-core-vital Guía de experto de la industria cubriendo las diferencias de INP con FID, técnicas prácticas de medición, y estrategias de preparación. Proporciona contexto del mundo real para entender la métrica.

Recursos Adicionales

• PageSpeed Insights - Prueba el INP de tu página y otros Core Web Vitals
• Chrome User Experience Report - Datos de INP del mundo real
• Extensión Web Vitals - Monitoreo de Core Web Vitals en tiempo real

---

Nota: Este artículo es parte de nuestra serie de análisis SEO. Explora todos los artículos en el Hub de SEO de Rendimiento.

---

Fuentes: web.dev (INP), Google Search Central (Page Experience), Smashing Magazine