First Input Delay (FID): De metric die Google heeft afgeschaft (en waarom)

Wat was FID (en waarom het tekortschoot)?

FID mat invoervertraging: de tijd tussen de eerste klik van een gebruiker en het moment waarop de main thread van de browser die kon beginnen te verwerken. Het mat geen rendering, visuele feedback of enige interactie na de eerste.

De fatale fout: Je kon verschrikkelijke knoppen hebben door je hele website, maar als de eerste klik snel was, slaagde je. Gebruikers ervoeren trage interacties bij elk formulierveld, elke menuklik, elke knop. Maar FID rapporteerde "Goed." Dit maakte het nutteloos voor het meten van echte responsiviteit.

Wat FID mat

User clicks button at time 0ms
↓
Main thread busy executing JavaScript
↓
Event handler starts at 150ms ← This is FID
↓
Event handler executes (not measured by FID)
↓
Browser paints visual feedback (not measured by FID)

FID only measured the delay, not the full interaction time.

Waarom Google FID heeft afgeschaft en vervangen door INP

FID had structurele beperkingen die het een slechte indicator van de werkelijke responsiviteit maakten. INP pakt al deze problemen aan.

Waarom FID belangrijk was (historisch)

Ondanks zijn beperkingen was FID de eerste interactiviteitsmetric in Core Web Vitals. Het zette JavaScript-blokkering en main thread-prestaties op de kaart.

FID meten (historische referentie)

Velddata (echte gebruikers)

FID kon alleen worden gemeten met echte gebruikersdata, omdat het echte gebruikersinteractie vereiste:

• Chrome UX Report — historische FID-data tot maart 2024
• Google Search Console — overgestapt van FID- naar INP-rapportage
• Real User Monitoring — de meeste RUM-tools tracken nu INP in plaats van FID

FID programmatisch meten (verouderde code)

npm install web-vitals

import {onFID} from 'web-vitals';

onFID((metric) => {
  console.log('FID:', metric.value);

  analytics.track('fid', {
    value: metric.value,
    rating: metric.rating
  });
});

// Modern replacement: Use INP
import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);

  analytics.track('inp', {
    value: metric.value,
    rating: metric.rating,
    interaction_type: metric.entries[0]?.name
  });
});

FID vs INP: de belangrijkste verschillen

| Aspect | FID (Afgeschaft) | INP (Huidig) | |--------|------------------|---------------| | Wat het meet | Alleen invoervertraging | Volledige interactielatentie (invoervertraging + verwerking + paint) | | Welke interacties | Alleen eerste interactie | Alle interacties (rapporteert de slechtste) | | Drempelwaarde (goed) | ≤100 ms | ≤200 ms | | Drempelwaarde (slecht) | >300 ms | >500 ms | | Bereik | Alleen paginalading | Volledige levenscyclus van de pagina | | Gebeurtenistypes | Klik, tik, toetsaanslag | Klik, tik, toetsaanslag | | Verwerkingstijd | Niet gemeten | Gemeten | | Paint-tijd | Niet gemeten | Gemeten | | Labmeting | Niet mogelijk | Niet mogelijk (alleen veld) | | Rankingfactor | Was (2021–2024) | Is (maart 2024+) |

Voorbeeld: zelfde interactie, verschillende scores

Scenario: User clicks button
Timeline:
- 0ms: User clicks
- 80ms: Main thread becomes free (FID = 80ms ✓ Good)
- 80-350ms: Event handler executes (270ms)
- 350-400ms: Browser paints update (50ms)
- 400ms: User sees visual feedback (INP = 400ms ✗ Poor)

FID score: 80ms (Good)
INP score: 400ms (Poor)

FID missed the slow handler and paint time.
INP captured the full user experience.

Migreren van FID naar INP

1. Werk je monitoring bij

// Old: Track FID
import {onFID} from 'web-vitals';

onFID((metric) => {
  sendToAnalytics({
    metric_name: 'FID',
    value: metric.value
  });
});

// New: Track INP
import {onINP} from 'web-vitals';

onINP((metric) => {
  sendToAnalytics({
    metric_name: 'INP',
    value: metric.value,
    // INP provides more context
    interaction_type: metric.entries[0]?.name,
    target_element: metric.entries[0]?.target?.tagName
  });
});

2. Pas je performance budgets aan

Old FID budgets:
- Good: ≤100ms
- Target P75: 80ms

New INP budgets:
- Good: ≤200ms
- Target P75: 150ms

INP thresholds are higher because it measures more:
- FID: Just input delay
- INP: Input delay + processing + paint

Your optimisation target is harder, but more meaningful.

3. Focus op totale interactielatentie

Optimalisaties die FID verbeterden, helpen INP nog steeds, maar je moet verder gaan:

• FID-strategie: Verminder main thread-blokkering tijdens het laden van de pagina
• INP-strategie: Verminder main thread-blokkering gedurende de hele sessie + optimaliseer event handlers + minimaliseer DOM-werk

Bekijk onze uitgebreide INP-optimalisatiegids voor:

• Lange taken opsplitsen om de browser controle te geven
• Event handler-prestaties optimaliseren
• DOM-manipulatie tijdens interacties minimaliseren
• Web workers gebruiken voor zware berekeningen
• Dure bewerkingen debouncen

4. Test verder dan het initieel laden

FID testing: Click once during page load
✓ Fast first click
✗ Didn't test scrolling, filtering, form submission

INP testing: Interact throughout the session
✓ Click all buttons
✓ Type in forms
✓ Use filters and search
✓ Navigate menus
✓ Trigger modals

Test the worst interactions, not just the first.

5. Werk je dashboards en alerts bij

• Vervang FID-grafieken door INP-grafieken in je analytics
• Werk alertnormen bij: FID <100 ms → INP <200 ms
• Track nieuwe dimensies: Interactietype, doelelement, paginastatus
• Historische vergelijking: Bewaar FID-data als referentie maar focus op INP-trends

FID-naar-INP-migratiechecklist