Ce billet explique le fonctionnement des Core Web Vitals (LCP, INP, CLS) et leurs pièges, en insistant sur la mécanique de mesure plutôt que sur l'optimisation elle-même. Il détaille les seuils officiels (ex. LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1) et souligne deux nuances cruciales : l'évaluation repose sur le 75e percentile des sessions réelles (et non la moyenne) et une fenêtre d'observation de 28 jours glissants, rendant les corrections lentes à refléter. Les données proviennent principalement du CrUX (Chrome User Experience Report), limité aux utilisateurs de Chrome, ce qui exclut une partie significative du trafic (comme les utilisateurs Safari ou Firefox).

React 19.2 améliore l'optimisation de l'INP (Interaction to Next Paint) avec deux nouvelles fonctionnalités clés. La première est le composant , qui permet de masquer des parties de l'UI sans perdre leur état ni surcharger le rendu React. Il préserve l'état local et DOM, et effectue les mises à jour avec une priorité basse. La seconde est le pré-rendu, qui prépare le contenu pour l'utilisateur pendant l'hydratation, accélérant ainsi la navigation et les changements d'onglets. Ces avancées aident à réduire la charge du thread principal du navigateur et à améliorer les performances globales.

Tout est dans le titre

Tout est dans le titre

Une présentation de l'INP (Interaction to Next Paint), une métrique introduite par Google. L'auteur donne quelques conseils pour l'optimiser

INP est une métrique de web (acronyme de "Interaction to Next Paint"), qui succède au FID ("First Input Delay")
L'article présente en détail son objectif, et quelles sont les pistes pour l'améliorer.