INP vs FID: el cambio de Core Web Vitals que nadie vio venir

En marzo de 2024, Google cambió una Core Web Vital. La mayoría de sitios web aún no se ha adaptado.

First Input Delay (FID) fue la métrica de interactividad de las Core Web Vitals desde 2020. Era relativamente fácil de pasar — el 97% de los sitios web cumplían el umbral de 100ms. Por eso Google la retiró y la reemplazó por Interaction to Next Paint (INP).

INP es una bestia completamente diferente. Y muchos sitios que tenían CWV perfectas ahora están en rojo.

Qué mide INP vs qué medía FID

FID medía solo una cosa: el tiempo entre el primer clic/toque del usuario y el momento en que el browser empezaba a procesar ese evento. Solo el primer input. Solo el delay inicial.

INP mide:

• Todas las interacciones durante la sesión completa (no solo la primera)
• El tiempo total: delay + processing time + presentation delay
• Selecciona la interacción más lenta (o el P75 si hay muchas)

En resumen: FID era un examen parcial del primer minuto de clase. INP es el examen final de todo el semestre.

Por qué INP es más difícil de pasar

El hilo principal está sobrecargado

JavaScript de terceros (analytics, tag managers, chat widgets, A/B testing) compite por tiempo de CPU. Cuando el usuario hace clic, el browser no puede responder hasta que termine la tarea JavaScript actual.

React/Vue/Next tienen re-renders costosos

En aplicaciones SPA, cada interacción puede disparar un re-render completo del componente. Si el componente es complejo, el processing time se dispara.

Event handlers con lógica pesada

Un clic que dispara una validación, una petición API y una actualización del DOM — todo síncrono — puede tardar 300ms+.

Cómo optimizar INP

• Identifica las interacciones lentas: Usa la Performance API del browser o la librería web-vitals con atribución para saber exactamente qué interacción causa el problema.
• Divide tareas largas: Usa scheduler.yield() o setTimeout(0) para dividir tareas JavaScript largas en chunks más pequeños.
• Defer scripts de terceros: Carga analytics, chat y otros scripts después del primer paint. No bloquees el hilo principal durante la interacción.
• Optimiza re-renders: En React, usa useMemo, useCallback y virtualización para listas largas. En Vue, usa v-once y computed properties.
• CSS containment: Usa contain: layout style paint para limitar el área que el browser necesita repintar.

El umbral de INP

• Bueno: menos de 200ms
• Necesita mejora: 200-500ms
• Pobre: más de 500ms

Comparado con FID (umbral: 100ms), INP parece más generoso. Pero como mide el tiempo completo de la peor interacción, es mucho más difícil de conseguir.

¿Tu sitio tiene INP en rojo? En ZDS diagnosticamos exactamente qué interacciones causan el problema y cómo solucionarlo. Auditoría técnica de CWV.