FID

Definition

FID (First Input Delay) measures the delay between a user's first interaction and when the browser begins processing it. Because it only captures the first interaction, Core Web Vitals replaced it with INP for a more complete responsiveness metric.

Why it matters

• Was the Core Web Vitals interaction metric until March 2024
• Understanding why INP replaced FID (INP better reflects real interaction quality)
• Helps diagnose main-thread blocking during page load
• Avoid optimizing only for FID while ignoring subsequent interaction delays
• FID only captures the 'first' interaction, missing most user behavior
• Requires actual user interaction to measure (pure load doesn't trigger it)
• Understanding FID helps grasp Web Vitals evolution

How to implement

• Shift optimization focus to INP: remove long tasks and reduce JS burden
• Defer non-critical scripts (async/defer), split bundles
• Reduce main-thread blocking (third-party scripts, synchronous computation)
• Use TBT (Total Blocking Time) as a lab-environment diagnostic metric
• Avoid running expensive tasks on DOMContentLoaded
• Move intensive computation to Web Workers
• Monitoring tools now focus on INP; FID data is for historical reference

Examples

// Although FID is deprecated, you can still monitor for reference
import { onFID } from 'web-vitals';

onFID((metric) => {
  console.log('FID:', metric.value, 'ms');
  // Note: Consider monitoring INP instead
});

// Use INP instead (recommended)
import { onINP } from 'web-vitals';
onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
});