Le CLS et l'INP sont des Core Web Vitals qui mesurent d'autres aspects de l'expérience utilisateur que la vitesse.
Le CLS mesure la stabilité visuelle. Un décalage de mise en page survient quand le contenu bouge après le chargement. L'utilisateur lit un article. Une publicité se charge. L'article descend. L'utilisateur perd sa place. Le CLS chiffre cette gêne.
L'INP mesure la réactivité. L'utilisateur clique sur un bouton. Le système répond. Combien de temps dure la réponse ? L'INP chiffre le retard de réactivité.
Cumulative Layout Shift (CLS) en détail
Ce qui cause le CLS
Des publicités se chargent et prennent de la place. Des contenus intégrés se chargent et prennent de la place. Des images se chargent sans hauteur définie. Des polices changent et le texte se réorganise. Du contenu est injecté par JavaScript.
Exemple concret
La mise en page est stable. L'utilisateur commence à lire. Une publicité se charge. Elle mesure trois cents pixels de haut. Le contenu sous la publicité descend de trois cents pixels. L'utilisateur perd sa place. C'est frustrant.
Mesure
Le CLS se mesure comme le pourcentage de la fenêtre d'affichage qui se décale. Si la fenêtre fait mille pixels de haut et que le contenu se décale de trois cents pixels, le CLS est de zéro virgule trois. L'objectif est de rester sous zéro virgule un (un décalage de dix pour cent est acceptable, un décalage de trente pour cent ne l'est pas).
Optimiser le CLS
Stratégie un : réserver de l'espace
Réservez de l'espace pour les publicités, les contenus intégrés, les images. Dites au moteur de mise en page : la publicité prendra trois cents pixels. Réservez l'espace. La publicité se charge dans l'espace réservé. Aucun décalage.
Stratégie deux : injecter en bas
Évitez d'injecter du contenu au milieu de la page. Injectez en bas (le contenu en dessous est déjà sorti de la fenêtre d'affichage). Ou injectez dans un en-tête fixe (l'utilisateur s'attend à ce que l'en-tête change).
Stratégie trois : éviter les changements de police
Évitez de changer de police pendant le chargement de la page. Un changement de police réorganise le texte. Tout le texte qui utilise cette police se décale. Utilisez `font-display: optional` ou `font-display: swap` pour limiter le décalage.
Stratégie quatre : définir la hauteur des images
Utilisez une hauteur fixe pour les images. L'image se charge. La hauteur est définie. L'image remplit l'espace réservé. Aucun décalage.
Exemple concret : optimiser le CLS d'une fiche produit de boutique en ligne
CLS de départ : zéro virgule deux cinq (mauvais).
Analyse
Les images du produit se chargent sans hauteur définie. Les images décalent le contenu. Contribution au CLS : zéro virgule dix. Une publicité sous le produit se charge après la page. La publicité prend de la place. Le contenu se décale. Contribution au CLS : zéro virgule douze. Les avis des utilisateurs se chargent depuis une API. Ils sont injectés dans la page. Le contenu se décale. Contribution au CLS : zéro virgule trois.
Optimisation
Définir la hauteur des images dans le HTML. Les images remplissent l'espace réservé. Contribution au CLS : zéro. Réserver de l'espace pour la publicité. La publicité se charge dans l'espace réservé. Contribution au CLS : zéro. Charger en différé les avis des utilisateurs sous la partie visible. Ne pas les injecter dans la partie visible. Contribution au CLS : zéro (le décalage se produit sous la fenêtre d'affichage).
Nouveau CLS : zéro virgule zéro cinq (bon).
Interaction to Next Paint (INP) en détail
Ce que mesure l'INP
L'INP mesure la réactivité. L'utilisateur clique sur un bouton. Le système traite le clic. Il met à jour l'état. Il calcule le changement. Il l'affiche à l'écran. L'INP est le temps entre le clic et le premier affichage de la mise à jour visuelle.
Exemple concret
L'utilisateur clique sur le bouton Ajouter au panier. Le système vérifie le stock. Il met à jour le compteur du panier. Il affiche le nouveau nombre à l'écran. Si l'INP est de cent millisecondes, l'utilisateur voit le compteur changer instantanément. Si l'INP est d'une seconde, le compteur change une seconde plus tard. La page paraît figée.
Mesure
L'INP se mesure en millisecondes. Un objectif sous deux cents millisecondes est bon.
Optimiser l'INP
Stratégie un : réduire le temps d'exécution du JavaScript
Un JavaScript long bloque l'affichage. Découpez les longues tâches en tâches plus petites. Utilisez async, defer ou les Web Workers pour les calculs lourds.
Stratégie deux : optimiser les gestionnaires d'événements
Les gestionnaires d'événements doivent faire un minimum de travail. Déléguez le travail lourd à l'arrière-plan.
Stratégie trois : optimiser le CSS
Un CSS lourd peut retarder l'affichage. Utilisez le CSS containment pour dire au navigateur : cet élément est autonome, ne recalcule pas les styles de toute la page quand il change.
Stratégie quatre : utiliser une technique d'affichage plus rapide
Les mises à jour CSS sont plus rapides que les mises à jour du DOM en JavaScript. Utilisez les transformations CSS plutôt que le positionnement left/top. Utilisez l'opacité CSS plutôt que les changements de visibilité.
Exemple concret : réactivité d'un formulaire
INP de départ : quatre cents millisecondes (mauvais).
Analyse
Le formulaire contient du JavaScript de validation. L'utilisateur saisit un champ. La validation s'exécute. La validation est synchrone. Elle bloque la mise à jour du champ. Le champ ne se met pas à jour avant la fin de la validation. La page paraît figée.
Optimisation
Déplacer la validation en arrière-plan (Web Worker ou setTimeout). Le champ se met à jour immédiatement. La validation se fait en arrière-plan. Utiliser le CSS containment sur le formulaire. Dire au navigateur : le formulaire est autonome, ne recalcule pas les styles de toute la page. Utiliser une transformation CSS pour l'animation plutôt qu'un positionnement en JavaScript.
Nouvel INP : cent cinquante millisecondes (bon).
CLS et INP ensemble
Le CLS donne une impression d'instabilité. L'INP donne une impression de lenteur de réaction. Ensemble, ils influencent la perception de la qualité par l'utilisateur.
Une page avec un bon LCP mais un mauvais CLS (rapide mais qui saute) est frustrante. L'utilisateur accuse la lenteur alors que c'est un problème de stabilité.
Une page avec un bon LCP et un bon CLS mais un mauvais INP (rapide et stable mais qui ne réagit pas) paraît cassée. Les boutons ne répondent pas aux clics.
Les trois Core Web Vitals comptent pour une bonne expérience utilisateur.
Questions fréquentes
Comment détecter les problèmes de CLS ?
Utilisez Chrome DevTools. Clic droit sur la page. Inspecter. Onglet Performance. Enregistrez le chargement de la page. DevTools montre les décalages de mise en page pendant le chargement. Consultez aussi PageSpeed Insights. Lighthouse identifie les problèmes de CLS. Consultez aussi le rapport Core Web Vitals de Search Console. Il montre les pages au mauvais CLS. Le créateur de site web de WEMASY vous permet de le mettre en place directement sur votre site.
Faut-il réserver de l'espace pour toutes les publicités ou seulement pour les publicités critiques ?
Réservez de l'espace pour les publicités de la partie visible (celles qui se chargent immédiatement). Ne réservez pas d'espace pour les publicités sous la partie visible (celles qui se chargent après le défilement). Elles peuvent décaler le contenu situé plus bas, mais l'utilisateur ne voit pas le décalage.
Comment optimiser l'INP pour des applications complexes avec beaucoup de JavaScript ?
Déplacez les calculs lourds vers des Web Workers. Un Web Worker s'exécute sur un thread séparé. Il ne bloque pas le thread principal. Le thread principal reste réactif aux actions de l'utilisateur. Utilisez aussi React Suspense ou des frameworks similaires qui repoussent les calculs lourds après le traitement de l'interaction.
Le CLS est-il aussi important sur mobile que sur ordinateur ?
Il est plus important sur mobile. L'écran mobile est plus petit. Les décalages de mise en page sont plus visibles. L'utilisateur mobile remarque plus facilement le décalage et s'énerve. Priorisez l'optimisation du CLS sur mobile.
Un bon CLS et un bon INP peuvent-ils compenser un mauvais LCP ?
Non. Si la page met cinq secondes à se charger, l'utilisateur est déjà frustré avant que le CLS et l'INP comptent. Il part avant d'interagir. Un chargement rapide (bon LCP) est un prérequis à une bonne expérience. Un bon CLS et un bon INP améliorent l'expérience d'une page rapide, pas d'une page lente.
Comment mesurer et suivre les améliorations du CLS et de l'INP ?
Point de départ : mesurez avant l'optimisation. Mettez en place l'optimisation. Nouvelle mesure : mesurez après. Utilisez la bibliothèque Web Vitals (une bibliothèque JavaScript qui mesure les Core Web Vitals) pour suivre les utilisateurs réels. Configurez des alertes : si le CLS ou l'INP se dégrade, une alerte prévient l'équipe.