Interaction jusqu’au prochain affichage (INP)
Comprenez l’INP, l’indicateur essentiel des performances Web qui mesure la réactivité réelle, son calcul pendant une visite et les techniques permettant de conserver des interactions rapides.
Interaction jusqu’au prochain affichage (INP) est une leçon Web Performance Optimization & Lighthouse gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Performance Optimization & Lighthouse, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Responsiveness as a Vital
Interaction to Next Paint (INP) measures how quickly the page visually responds to user input across the whole visit. It became a Core Web Vital, replacing First Input Delay.
INP vs FID
FID only measured the first interaction's input delay. INP is broader: it considers all interactions and the full latency through event handling and rendering, not just the initial delay.
What an Interaction Includes
Each interaction's latency spans three parts: input delay (waiting for the main thread), processing time (event handlers), and presentation delay (rendering the next frame).
How INP Is Reported
Across a visit, INP reports roughly the worst interaction latency (with an allowance for outliers on pages with many interactions), so it reflects the user's worst-case responsiveness.
The Thresholds
- Good: 200ms or less
- Needs improvement: 200-500ms
- Poor: over 500ms
The Main Thread Is the Bottleneck
Long tasks block the main thread so input cannot be handled promptly. Breaking up long JavaScript tasks is the single biggest lever for improving INP.
Yielding to the Main Thread
Break long work into chunks and yield so the browser can handle input between them. scheduler.yield() or a setTimeout based yield helps.
async function process(items) {
for (const item of items) {
handle(item);
await new Promise(r => setTimeout(r, 0));
}
}Defer Non-Urgent Work
Update the UI immediately for feedback, then run heavy work afterward. Patterns like requestAnimationFrame for visual updates and deferring analytics keep handlers short.
button.addEventListener('click', () => {
showSpinner();
setTimeout(doHeavyWork, 0);
});Reduce Rendering Cost
The presentation phase suffers from large DOM updates and expensive layout. Use content-visibility, virtualization, and minimal DOM changes to render the next frame faster.
Measuring INP
Capture INP in the field with the web-vitals library, and use the DevTools Performance panel's interaction track to see input delay, processing, and presentation for each event.
import { onINP } from 'web-vitals';
onINP(metric => console.log('INP', metric.value));Improvement Checklist
- Break up long tasks and yield.
- Defer non-urgent work after paint.
- Trim event handler work.
- Reduce DOM size and rendering cost.
Quick Check
How does INP differ fundamentally from the metric it replaced, FID?
Recap
You learned INP measures whole-visit responsiveness across input delay, processing, and presentation, with a good threshold of 200ms. Improve it by breaking up long tasks, yielding to the main thread, deferring non-urgent work, and reducing rendering cost.
Apprends Web Performance Optimization & Lighthouse avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 12
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Interaction jusqu’au prochain affichage (INP) » est-elle gratuite ?
Oui — le texte complet de « Interaction jusqu’au prochain affichage (INP) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Performance Optimization & Lighthouse, passe à CoddyKit PRO. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Interaction jusqu’au prochain affichage (INP) » ?
Comprenez l’INP, l’indicateur essentiel des performances Web qui mesure la réactivité réelle, son calcul pendant une visite et les techniques permettant de conserver des interactions rapides. Tu pratiques Web Performance Optimization & Lighthouse avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Performance Optimization & Lighthouse ?
Aucune expérience préalable n'est requise. Web Performance Optimization & Lighthouse sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Interaction jusqu’au prochain affichage (INP) » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Performance Optimization & Lighthouse ?
Oui. Chaque leçon Web Performance Optimization & Lighthouse inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Introduction aux Core Web Vitals
- Analyse approfondie de LCP, FID et CLS
- Améliorer les indicateurs d’interaction utilisateur
- Interaction jusqu’au prochain affichage (INP)