Signes vitaux : maîtriser l'INP et le CWV
Les Core Web Vitals évoluent. Google se soucie de l'interaction avec Next Paint. Comment nous profilons et optimisons les tâches de blocage du thread principal.
Les Core Web Vitals (CWV) de Google constituent la mesure définitive de la santé du Web. En 2025, l’attention s’est entièrement portée sur INP (Interaction to Next Paint). Le FID (First Input Delay) est mort.
Qu’est-ce que l’INP ?
INP mesure la réactivité de votre site après son chargement. Lorsque l’utilisateur clique sur « Ouvrir le menu », combien de millisecondes s’écoulent avant que le menu ne bouge réellement ? Si le processeur est occupé à analyser un script de suivi de 2 Mo, le menu ne bougera pas. L’utilisateur ressent un « décalage ».
## Stratégies d’optimisation
1. Céder au fil conducteur
Nous divisons les tâches longues en utilisant scheduler.yield() ou setTimeout.
Au lieu de traiter 1 000 produits en une seule boucle (bloquant l’interface utilisateur pendant 500 ms), nous les traitons par blocs de 50, permettant au navigateur de peindre les cadres intermédiaires.
2. Anti-rebond et limitation
Faites défiler les écouteurs et redimensionnez les événements se déclenchent des centaines de fois par seconde. Nous les enveloppons dans des fonctions « anti-rebond » pour garantir qu’elles ne s’exécutent qu’après que l’utilisateur arrête de bouger.
3. CSS pour l’animation
Nous appliquons strictement les propriétés Compositor-Only pour les animations (transform et opacity).
Animer « hauteur » ou « gauche » oblige le navigateur à recalculer la mise en page de la page entière (Reflow), ce qui détruit les performances sur les appareils mobiles.
L’outillage
Nous utilisons Lighthouse CI dans notre pipeline GitHub Actions. Un développeur ne peut pas fusionner une Pull Request si elle dégrade le score Lighthouse en dessous de 90. Les performances sont régies par le code et non par les promesses.