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. Muchos sitios que tenían CWV perfectas ahora están en rojo. Este cambio, aunque anunciado con antelación, pilló a muchas empresas desprevenidas, especialmente a aquellas con infraestructuras web complejas o dependientes de terceros.

En nuestra experiencia trabajando con clientes en 2024, el porcentaje de sitios web con un INP «Bueno» ha caído drásticamente. Antes era común ver casi el 100% de los sitios pasar FID, ahora solo un 30-40% alcanza un INP óptimo sin intervenciones. Esto subraya la importancia de abordar esta métrica con seriedad, ya que impacta directamente en la experiencia del usuario y, por ende, en el posicionamiento SEO.

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. Era una métrica que ofrecía una visión muy limitada de la interactividad, similar a juzgar un libro por su primera frase.

INP mide:

• Todas las interacciones durante la sesión completa (no solo la primera), incluyendo clics, toques y pulsaciones de teclado.
• El tiempo total: delay de entrada + tiempo de procesamiento (cuánto tarda el navegador en ejecutar los manejadores de eventos) + delay de presentación (cuánto tarda el navegador en pintar los cambios visuales en la pantalla).
• Selecciona la interacción más lenta (o el percentil 75 si hay muchas interacciones, para sitios con mucho tráfico). Esto significa que un solo punto de fricción puede arrastrar la puntuación general.

FID era un examen parcial del primer minuto de clase. INP es el examen final de todo el semestre. Este cambio refleja el enfoque de Google en la experiencia real del usuario, donde la interactividad no se limita al primer contacto, sino a toda la jornada del visitante en el sitio.

En 2023, Google ya avisaba de la necesidad de métricas más robustas. La introducción de INP en 2024 se alinea con la evolución de los estándares web y las expectativas de los usuarios, que demandan sitios cada vez más responsivos y fluidos. Un estudio de Google de 2022 ya indicaba que un retraso de solo 100ms en la interactividad podía reducir las conversiones en un 7%. Con INP, este impacto podría ser aún mayor si las interacciones clave son lentas.

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. Herramientas como Google Tag Manager, si no están optimizadas, pueden inyectar scripts que bloquean el hilo principal. En 2024, con la creciente adopción de GA4 y la necesidad de tracking más granular, este problema se ha acentuado. Es crucial auditar regularmente los scripts de terceros.

Un error común es cargar múltiples scripts de terceros de forma síncrona al inicio de la página. Esto no solo afecta el INP, sino también otras métricas como Largest Contentful Paint (LCP). La priorización y el aplazamiento inteligente de estos scripts son vitales.

React/Vue/Next tienen re-renders costosos

En aplicaciones SPA (Single Page Applications) construidas con frameworks como React, Vue o Next.js, cada interacción puede disparar un re-render completo o parcial del componente. Si el componente es complejo, el processing time se dispara. Esto es especialmente cierto en componentes con grandes listas de datos, gráficos interactivos o formularios con mucha lógica.

En nuestra experiencia, muchos desarrolladores se centran en la velocidad inicial de carga y descuidan la optimización de los re-renders. Un componente que se actualiza innecesariamente o que recalcula valores complejos en cada render puede ser un cuello de botella significativo para el INP. La depuración de estos problemas requiere un conocimiento profundo del ciclo de vida del framework y de técnicas de optimización específicas.

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+. Si esta secuencia de eventos ocurre en el hilo principal sin interrupciones, el navegador se bloqueará y no podrá responder a otras interacciones del usuario. Esto es particularmente problemático en formularios complejos o en interfaces de usuario altamente interactivas.

Un ejemplo práctico que hemos visto es un botón de «Añadir al carrito» que, al ser clicado, realiza varias validaciones en el cliente, envía una petición AJAX al servidor, espera la respuesta y luego actualiza múltiples elementos del DOM. Si alguna de estas operaciones es lenta o bloqueante, el INP de esa interacción será pobre.

Cómo optimizar INP

La optimización de INP requiere un enfoque holístico, combinando mejoras en el código, la arquitectura y la gestión de recursos.

• Identifica las interacciones lentas: Usa la Performance API del browser (performance.measure()) o la librería web-vitals con atribución para saber exactamente qué interacción causa el problema. Las DevTools de Chrome, en particular la pestaña «Performance», son una herramienta invaluable para visualizar el hilo principal y detectar tareas largas. En 2024, herramientas como Lighthouse y PageSpeed Insights ya ofrecen diagnósticos específicos de INP, señalando las interacciones problemáticas.
• Divide tareas largas: Usa scheduler.yield() (una API experimental pero prometedora) o setTimeout(0) para dividir tareas JavaScript largas en chunks más pequeños. Esto permite que el navegador responda a otras interacciones mientras procesa el código. Otra técnica es el uso de Web Workers para delegar tareas computacionalmente intensivas a un hilo separado, liberando el hilo principal.
• Defer scripts de terceros: Carga analytics, chat y otros scripts después del primer paint, o utiliza atributos como defer o async. No bloquees el hilo principal durante la interacción. Prioriza lo que el usuario necesita ver y con lo que necesita interactuar primero. Para scripts críticos, considera el uso de .
• Optimiza re-renders: En React, usa useMemo, useCallback y virtualización para listas largas para evitar renders innecesarios. En Vue, usa v-once y computed properties. Comprender cuándo y por qué un componente se renderiza es clave. Herramientas como React DevTools o Vue Devtools pueden ayudarte a identificar componentes que se renderizan con demasiada frecuencia.
• CSS containment: Usa contain: layout style paint para limitar el área que el browser necesita repintar. Esto reduce el trabajo de renderizado del navegador, especialmente en componentes dinámicos. También es útil optimizar el CSS, eliminando estilos no utilizados (PurgeCSS) y minimizando la complejidad de los selectores.
• Minimiza el trabajo del hilo principal: Reduce la cantidad de JavaScript ejecutado. ¿Realmente necesitas esa librería? ¿Se puede hacer de forma más eficiente? El «Tree Shaking» y la «Code Splitting» son técnicas esenciales para reducir el tamaño del bundle de JavaScript.
• Optimiza peticiones de red: Si una interacción depende de una petición API, asegúrate de que sea lo más rápida posible. Usa cachés, HTTP/2 o HTTP/3, y considera el pre-fetching de datos.
• Uso de Server-Side Rendering (SSR) o Static Site Generation (SSG): Para sitios con mucho contenido estático o que necesitan una primera carga muy rápida, SSR o SSG pueden reducir la cantidad de JavaScript necesaria en el cliente y mejorar la interactividad inicial.

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. Un solo pico de lentitud puede arruinar tu puntuación, incluso si el resto del sitio es rápido.

Estos umbrales son dinámicos y Google los ajusta periódicamente. Mantenerse por debajo de los 200ms es el objetivo para asegurar una experiencia de usuario fluida y un buen rendimiento SEO. En 2024, con la creciente importancia de la experiencia de usuario en los algoritmos de Google (especialmente tras el Helpful Content Update), un buen INP es más crucial que nunca.

INP y su impacto en SEO en 2024-2026

La introducción de INP como Core Web Vital reafirma el compromiso de Google con la experiencia del usuario como factor de clasificación. Un INP deficiente puede llevar a tasas de rebote más altas, menor tiempo en la página y, a un peor posicionamiento en los resultados de búsqueda.

E-E-A-T y la experiencia de usuario

Aunque INP no está directamente relacionado con E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness), una buena experiencia de usuario, facilitada por un INP óptimo, contribuye indirectamente a la «Experience» (Experiencia) del usuario en el sitio. Un sitio lento y poco interactivo genera frustración y reduce la confianza, lo que puede afectar la percepción general de la marca.

Impacto en la búsqueda conversacional (AI Search)

Con el auge de la IA generativa en la búsqueda (ChatGPT, Perplexity AI, Google SGE), la velocidad y la interactividad de un sitio web se vuelven aún más críticas. Si un usuario llega a tu sitio a través de una respuesta de IA, esperará una experiencia fluida. Un INP pobre podría hacer que el usuario regrese rápidamente a la interfaz de IA en busca de una fuente más rápida y eficiente, reduciendo el tráfico cualificado y las conversiones.

GA4 y la monitorización de INP

Con la transición completa a Google Analytics 4 (GA4), configurar la monitorización de métricas de rendimiento, incluyendo INP, es fundamental. Aunque GA4 no tiene un informe de Core Web Vitals nativo como Universal Analytics, se pueden configurar eventos personalizados para rastrear el rendimiento de INP y otras métricas de interacción. Esto permite a los equipos de marketing y desarrollo tener una visión más completa del impacto del rendimiento en el comportamiento del usuario.

En ZDS, implementamos dashboards personalizados en GA4 y Looker Studio (ahora Google Looker Studio) para nuestros clientes, combinando datos de INP con métricas de negocio como la tasa de conversión y el tiempo en la página. Esto nos permite identificar correlaciones y priorizar optimizaciones con el mayor impacto.

Errores comunes al optimizar INP

En nuestra experiencia, estos son algunos de los errores más frecuentes que cometen las empresas al intentar mejorar su INP:

• Ignorar el problema hasta que es demasiado tarde: Muchas empresas solo actúan cuando ven una caída significativa en su ranking o tráfico, en lugar de monitorizar proactivamente.
• Centrarse solo en la carga inicial: Optimizar LCP o FCP no garantiza un buen INP. La interactividad es una fase diferente del ciclo de vida de la página.
• Sobrecargar el DOM: Un DOM excesivamente complejo o con muchos elementos ocultos puede ralentizar las actualizaciones y el repintado, afectando el INP.
• No probar en dispositivos reales: Las pruebas en un entorno de desarrollo o con conexiones de alta velocidad no siempre reflejan la experiencia del usuario real. Es crucial probar en dispositivos móviles de gama media y con conexiones 3G/4G simuladas.
• Uso excesivo de animaciones CSS/JS: Las animaciones complejas o mal optimizadas pueden bloquear el hilo principal y afectar la interactividad.
• Falta de comunicación entre equipos: Los equipos de desarrollo, diseño y marketing deben colaborar para garantizar que las optimizaciones de rendimiento sean una prioridad desde el inicio del proyecto.

Herramientas recomendadas para el diagnóstico y la optimización de INP (2026)

Para abordar eficazmente los desafíos de INP, recomendamos las siguientes herramientas:

• Google Chrome DevTools: La pestaña «Performance» es indispensable para analizar el hilo principal, identificar tareas largas, y visualizar los eventos de interacción. La función «Performance Insights» ofrece un análisis guiado.
• PageSpeed Insights: Proporciona datos de campo (CrUX) y de laboratorio para INP, junto con recomendaciones específicas. Es la herramienta de referencia de Google.
• Lighthouse: Integrado en Chrome DevTools y PageSpeed Insights, ofrece una auditoría completa de rendimiento, incluyendo métricas de interactividad.
• Web-vitals JavaScript library: Para la monitorización de INP en tiempo real (RUM – Real User Monitoring) en tu sitio web. Permite recopilar datos de INP de usuarios reales y enviarlos a tu herramienta de analítica (GA4, por ejemplo).
• Sentry o Bugsnag: Para la monitorización de errores y rendimiento en producción, que pueden impactar en la interactividad.
• Webpack Bundle Analyzer: Para visualizar el contenido de tus bundles de JavaScript y CSS, identificando librerías pesadas o código no utilizado.
• Cloudflare o Akamai: Para optimización de la red de entrega de contenido (CDN), que puede acelerar la carga de recursos y reducir el tiempo de respuesta del servidor, impactando indirectamente en INP.

¿Tu sitio tiene INP en rojo? En ZDS diagnosticamos exactamente qué interacciones causan el problema y cómo solucionarlo. Nuestro enfoque se basa en datos reales y las últimas directrices de Google, asegurando que tu sitio no solo cumpla con los estándares actuales, sino que esté preparado para las futuras tendencias de la web. Auditoría técnica de CWV.

La adaptación a INP es una inversión en la experiencia del usuario y en el futuro de tu presencia online. En ZDS, estamos listos para ayudarte a navegar por este cambio y asegurar que tu sitio web brille de 2026 y más allá.