First Input Delay (FID) : Définition, Remplacé par INP

Qu'est-ce que First Input Delay (FID) ?

First Input Delay (FID) était un Core Web Vital qui mesurait le temps entre la première interaction d'un utilisateur avec une page et le moment où le navigateur pouvait réellement répondre. Il capturait l'expérience "feels frozen" que les utilisateurs ressentent quand JavaScript est busy executing et que la page ne peut pas réagir à l'input.

Important : FID a été officiellement remplacé par Interaction to Next Paint (INP) comme Core Web Vital le 12 mars 2024. FID est maintenant deprecated. Les nouveaux audits devraient utiliser INP.

Ce que FID mesurait

Pourquoi FID a été remplacé par INP

• Seulement première interaction.
• Seulement délai, pas réponse complète.
• Beaucoup d'utilisateurs avaient ~0ms FID.

INP corrige cela : il sample des interactions à travers le lifecycle de la page.

Comparaison FID vs INP

Comment FID était mesuré

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 });

Causes FID courantes (s'appliquent encore à INP)

• JavaScript long-running.
• Gros bundles chargeant.
• Scripts third-party.
• Hydration lourde.
• Event handlers longs.
• Layout thrashing dans handlers.

Améliorer FID/INP : étapes pratiques

1. Code splitting

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

2. Différer JavaScript non-critique

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

3. Briser long tasks

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. Utiliser requestIdleCallback

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

5. Réduire impact third-party

• <link rel="preconnect"> pour domains
• Self-host fonts/scripts critiques
• Auditer + cull tags non utilisés

6. Optimiser hydration

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

Équivalent lab : Total Blocking Time (TBT)

FAQ : First Input Delay

FID est-il toujours un Core Web Vital ?

Non. Depuis le 12 mars 2024, INP a remplacé FID.

Devrais-je encore optimiser pour FID ?

Les mêmes optimisations aident les deux.

Comment FID diffère-t-il de TBT ?

FID = field metric. TBT = lab metric.

Pourquoi Google a-t-il remplacé FID par INP ?

FID ne mesurait que la première interaction.

Mon code FID-optimisé passe-t-il INP automatiquement ?

Principalement oui — les causes sous-jacentes sont les mêmes.

Où puis-je voir les données FID ?

Les données historiques CrUX incluent encore FID.

Différence entre FID et Time to Interactive (TTI) ?

FID : délai réel. TTI : heuristique.

Testez la responsiveness sous charge avec LoadFocus

LoadFocus exécute des audits Lighthouse depuis 25+ régions et track les scores INP/TBT dans le temps. Inscrivez-vous sur loadfocus.com/signup.