Métriques essentielles de la web performance : LCP, FID, INP et CLS

1. LCP Largest Contentful Paint : la vitesse perçue

Exemple concret

Considérons un site de réservation de voyages. Un utilisateur clique sur le bouton « Rechercher des vols » après avoir entré ses critères. Si le FID est élevé, disons 500 ms, l’utilisateur pourrait penser que le bouton ne fonctionne pas et cliquer plusieurs fois, frustré par le manque de réactivité.

Optimisation du FID

Pour améliorer le FID, concentrez-vous sur ces aspects :

1. Réduire l’impact du JavaScript tiers :
   • Charger les scripts tiers de manière asynchrone
   • Différer le chargement des scripts non essentiels
2. Diviser les tâches JavaScript longues :
   • Fractionner le code en tâches plus petites
   • Utiliser requestIdleCallback() pour les tâches non urgentes
3. Utiliser un Web Worker pour les opérations intensives :

   const worker = new Worker('worker.js'); worker.postMessage({data: complexData});

4. Optimiser le chargement des polices :
   • Utiliser font-display: optional pour les polices non essentielles
   • Précharger les polices critiques
5. Minimiser le JavaScript :
   • Supprimer le code inutilisé
   • Compresser les fichiers JavaScript

3. INP Interaction to Next Paint  : la Nouvelle Métrique

Définition

Interaction to Next Paint (INP) est une métrique proposée par Google dans le cadre des Core Web Vitals pour remplacer progressivement le First Input Delay (FID). Le INP mesure le temps nécessaire pour qu’une page réponde à toutesles interactions utilisateur (clics, touches, etc.), et pas seulement la première comme le FID.

Le INP capture la durée entre une interaction utilisateur et le moment où la prochaine mise à jour visuelle significative (ou « paint ») se produit. Cela donne une image plus précise de la réactivité globale de la page par rapport aux actions de l’utilisateur, plutôt que de se concentrer uniquement sur la première interaction.

Importance pour les marketeurs

Le INP est particulièrement important, car il reflète la qualité de l’expérience utilisateur au fil de ses interactions avec une page. Un site réactif améliore non seulement l’expérience utilisateur, mais aussi les chances de conversion. Voici quelques points à considérer pour comprendre son importance :

• Expérience utilisateur globale : Contrairement au FID, qui ne mesurait que la première interaction, l’INP prend en compte l’ensemble des interactions, reflétant mieux l’expérience utilisateur globale.
• Conversion et engagement : Des retards dans les interactions (comme des boutons qui ne réagissent pas rapidement) peuvent frustrer les utilisateurs et augmenter le taux de rebond, ce qui impacte négativement les conversions.
• Positionnement SEO : Avec l’évolution des Core Web Vitals, Google pourrait intégrer l’INP dans ses critères de classement. Optimiser cette métrique pourrait donc non seulement améliorer l’expérience utilisateur, mais aussi booster le SEO du site.
• Réputation de la marque : Un site qui réagit lentement aux clics ou autres interactions peut donner une impression de lenteur et de non-professionnalisme, affectant ainsi la perception de la marque.

Objectifs recommandés

Google propose des seuils pour évaluer si le INP est performant :

• Bon : Moins de 200 millisecondes
• Nécessite une amélioration : Entre 200 et 500 millisecondes
• Mauvais : Plus de 500 millisecondes

Ces critères montrent que chaque interaction utilisateur doit avoir une réponse presque instantanée pour maintenir une expérience fluide. Un INP de plus de 500 ms est considéré
comme mauvais et peut entraîner une baisse d’engagement et des performances médiocres du site.

Exemple concret

Prenons l’exemple d’une plateforme de streaming vidéo. Supposons qu’un utilisateur clique sur un bouton pour lire une vidéo, mais que le site prend une seconde entière pour réagir. Ce délai se traduit par un INP élevé, ce qui rend l’expérience frustrante. Si chaque action, comme passer en mode plein écran ou ajuster le volume, entraîne un délai similaire, l’utilisateur pourrait quitter la plateforme et choisir un concurrent plus réactif.

Sur des sites e-commerce, un INP élevé lors de l’ajout d’un produit au panier ou lors du passage à la caisse peut aussi décourager les acheteurs, entraînant une baisse des conversions.

Optimisation du INP : stratégies efficaces

Pour améliorer l’Interaction to Next Paint, plusieurs stratégies techniques peuvent être mises en œuvre afin de garantir que toutes les interactions utilisateur sont traitées rapidement et sans délai perceptible.

a. Optimisation du JavaScript

Le JavaScript est souvent la cause principale des retards dans la réactivité d’une page. Voici des techniques d’optimisation :

• • Réduction et minification des scripts : Supprimez les lignes inutiles et minifiez les fichiers JavaScript pour réduire leur taille.
  • Différé des scripts non critiques : Utilisez les attributs async ou defer pour retarder le chargement des scripts non essentiels jusqu’à ce que la page soit complètement rendue.
  • Segmentation des tâches longues : Si une tâche JavaScript est longue, la diviser en segments plus petits et l’exécuter par morceaux permet de libérer le thread principal plus fréquemment et de traiter les interactions utilisateur.

b. Optimisation du CSS

Le CSS peut également bloquer le rendu et donc affecter l’INP :

• • CSS critique : Chargez d’abord le CSS nécessaire au rendu initial de la page et retardez le reste.
  • Minification du CSS : Réduisez la taille du fichier CSS en supprimant les espaces inutiles et les commentaires.

c. Utilisation des Web Workers

Les Web Workers permettent de décharger certaines tâches lourdes (comme les calculs complexes) du thread principal vers des threads en arrière-plan. Cela permet au navigateur de répondre plus rapidement aux interactions utilisateur sans être bloqué par d’autres processus en cours.

d. Gestion des animations

Les animations peuvent parfois ralentir la réactivité d’une page :

• • Optimisation des animations CSS : Utilisez les propriétés transform et opacity pour les animations, car elles sont moins coûteuses en ressources que d’autres propriétés comme height ou width
  • Limiter l’usage des animations JavaScript : Si possible, préférez les animations en CSS plutôt qu’en JavaScript, car ces dernières peuvent être plus gourmandes en termes de ressources.

e. Amélioration des temps de réponse du serveur

Comme pour le LCP, les temps de réponse du serveur impactent directement l’INP. Un serveur lent entraînera des retards dans le traitement des interactions.

• • Utilisation d’un CDN : Les réseaux de diffusion de contenu aident à réduire la latence en fournissant des fichiers statiques plus rapidement aux utilisateurs.
  • Optimisation des requêtes HTTP : Réduisez le nombre de requêtes nécessaires et regroupez les fichiers CSS et JavaScript lorsque cela est possible.

f. Prise en compte de l’expérience mobile

Étant donné que les utilisateurs mobiles sont plus sensibles aux temps de réponse (connexion lente, appareils moins puissants), il est essentiel d’optimiser l’INP pour ces appareils. Réduire la taille des ressources et minimiser les scripts lourds peut considérablement améliorer l’INP sur mobile.

Conclusion

Le Interaction to Next Paint (INP) est une évolution clé des métriques de performance, offrant une vue plus complète de la réactivité globale d’une page. Optimiser cette métrique permet aux marketeurs d’améliorer l’expérience utilisateur, de réduire le taux de rebond, d’augmenter les conversions et de maintenir une bonne position SEO. Grâce à des techniques d’optimisation du JavaScript, de gestion des animations, et d’amélioration des temps de réponse serveur, il est possible de maintenir un INP en dessous de 200 ms, garantissant ainsi une expérience utilisateur fluide et réactive.