First Input Delay (FID): Definición, Reemplazado por INP

¿Qué es First Input Delay (FID)?

First Input Delay (FID) era un Core Web Vital que medía el tiempo desde la primera interacción del usuario con una página hasta cuando el navegador podía realmente responder. Capturaba la experiencia "se siente congelado" que los usuarios obtienen cuando JavaScript está busy ejecutando y la página no puede reaccionar a input.

Importante: FID fue oficialmente reemplazado por Interaction to Next Paint (INP) como Core Web Vital el 12 de marzo 2024. FID está ahora deprecated. Nuevas auditorías deberían usar INP.

Qué medía FID

¿Por qué FID fue reemplazado por INP?

• Solo primera interacción.
• Solo delay, no respuesta completa.
• Muchos usuarios tenían FID ~0ms.

INP arregla esto: samplea interacciones a lo largo del lifecycle de página.

Comparación FID vs INP

Cómo se medía FID

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const fid = entry.processingStart - entry.startTime;
    console.log('FID:', fid);
  }
}).observe({ type: 'first-input', buffered: true });

Causas FID comunes (aún aplican a INP)

• JavaScript long-running.
• Bundles grandes cargando.
• Scripts third-party.
• Hydration pesada.
• Event handlers largos.
• Layout thrashing en handlers.

Mejorando FID/INP: pasos prácticos

1. Code splitting

import('./heavy-feature').then(mod => mod.init());

2. Defer JavaScript no-crítico

<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>

3. Romper tasks largos

async function processInBatches(arr) {
  for (let i = 0; i < arr.length; i += 100) {
    arr.slice(i, i + 100).forEach(heavy);
    await new Promise(r => setTimeout(r, 0));
  }
}

4. Usar requestIdleCallback

requestIdleCallback(() => { prefetchNextPage(); });

5. Reducir impacto third-party

• <link rel="preconnect"> para domains
• Self-host fonts/scripts críticos
• Auditar + cull tags no usados

6. Optimizar hydration

• Partial hydration (Astro Islands)
• Server Components (React)
• Resumability (Qwik)

Equivalente lab: Total Blocking Time (TBT)

FAQ: First Input Delay

¿Sigue siendo FID un Core Web Vital?

No. Desde 12 marzo 2024, INP reemplazó FID.

¿Debería seguir optimizando para FID?

Las mismas optimizaciones ayudan a ambos.

¿Cómo difiere FID de TBT?

FID = field metric. TBT = lab metric.

¿Por qué Google reemplazó FID con INP?

FID solo medía la primera interacción.

¿Mi código FID-optimizado pasa automáticamente INP?

Mayormente sí — las causas subyacentes son las mismas.

¿Dónde puedo ver datos FID?

Datos históricos CrUX siguen incluyendo FID.

¿Diferencia entre FID y Time to Interactive (TTI)?

FID: delay real. TTI: heurística.

Testea responsiveness bajo carga con LoadFocus

LoadFocus corre auditorías Lighthouse desde 25+ regiones y trackea scores INP/TBT over time. Regístrate en loadfocus.com/signup.