Fix First Input Delay

FID is deprecated. Here’s what replaced it and what to do about it.

FID → INP

Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) in March 2024. The fixes are similar, but INP is stricter.

What Causes Slow Interactions

JavaScript blocking the main thread. When JS runs, the browser can’t respond to clicks.

Find the Problem

First Input Delay measures how quickly your page responds to user interactions like clicks and taps, which directly impacts how professional and trustworthy your site feels. Users notice slow responses immediately, and Google uses this metric as a ranking factor.

Start by identifying what’s actually wrong.

1. Open Chrome DevTools → Performance tab
2. Click Record, interact with the page
3. Look for long tasks (red corners = over 50ms)

Fix It

1. Break Up Long Tasks

// Bad: one long task
processAllItems(items);

// Good: chunked processing
function processChunk(items, index) {
  const chunk = items.slice(index, index + 100);
  chunk.forEach(process);

  if (index + 100 < items.length) {
    setTimeout(() => processChunk(items, index + 100), 0);
  }
}

2. Defer Non-Critical JavaScript

3. Use requestIdleCallback

// Run when browser is idle
requestIdleCallback(() => {
  // Non-urgent work here
});

4. Move Work Off Main Thread

// Heavy computation in a Web Worker
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

Common Culprits

These are the usual causes.

• Large JavaScript bundles (split them)
• Third-party scripts (defer or remove)
• Synchronous XHR (use fetch with async)
• Complex DOM manipulation (batch updates)

Third-Party Script Audit

Third-party scripts are the most common INP killer, and most sites have no idea how many they’re loading. Run this audit:

1. Inventory every script: Open Chrome DevTools → Network tab → filter by JS. Sort by domain. Every domain that isn’t yours is a third-party script. Count them—most sites have 8-15.
2. Measure individual impact: Block each third-party domain one at a time using DevTools → Network → Block request domain. Re-run Lighthouse after each block. The TBT delta tells you exactly what each script costs.
3. Categorize by necessity: Essential (payment processing, auth), important (analytics, error tracking), nice-to-have (heatmaps, chat widgets, social embeds). Defer or remove anything in the third category that adds more than 50ms of TBT.

Framework-Specific Patterns

React: Use React.lazy() and Suspense for code splitting. Wrap non-critical state updates in startTransition() to prevent them from blocking interactions. Avoid synchronous setState in event handlers that trigger expensive re-renders.

WordPress: Dequeue unused plugin scripts with wp_dequeue_script(). Move jQuery-dependent scripts to the footer with wp_enqueue_script() using the in_footer parameter set to true. Use wp_script_add_data($handle, 'async', true) for non-critical scripts.

Vue/Nuxt: Use async components with defineAsyncComponent(). Lazy-load routes. Avoid large computed properties that run on every interaction—use shallowRef for complex objects that don’t need deep reactivity.

Check Core Web Vitals Monthly

Run PageSpeed Insights and expand the INP section. It shows exactly which interactions are slow.

Confirming INP Is Under 200ms

• INP (replaced FID) is under 200ms in PageSpeed Insights
• Long tasks in DevTools are under 50ms
• Interactions feel instant with no perceptible delay

Sources

• web.dev – First Input Delay (FID)
• web.dev – Interaction to Next Paint (INP)
• web.dev – Core Web Vitals