Optimisation pour l’INP: la nouvelle métrique Core Web Vitals

Qu’est-ce que l’Interaction to Next Paint (INP) ?

L’INP, utilisée pour évaluer la réactivité d’un site, mesure le temps écoulé entre une interaction de l’utilisateur et le moment où le cadre suivant du site est affiché. Si un menu déroulant met du temps à s’ouvrir après un clic, cela indique une faible réactivité et impacte directement l’INP.

Pourquoi INP a-t-elle remplacé FID ?

Selon Google, bien que FID fût utile, elle avait ses limites. INP offre une mesure plus complète de la réactivité d’un site. Les rapports de Google Search Console ne montreront plus les résultats FID mais se concentreront sur INP.

Comment vérifier votre score INP ?

• Via Google Search Console : Naviguez dans Experience > Core Web Vitals.
• Via PageSpeed Insights : Entrez votre URL et cliquez sur « Analyser ».

Evaluation des scores INP :

Bon :

< 200 ms,

A améliorer :

entre 200 ms et 500 ms,

Mauvais :

> 500 ms.

Outils et techniques pour optimiser votre score INP

Gestion des problèmes liés au JavaScript

Pour les sites utilisant intensivement JavaScript, il est crucial d’optimiser ce dernier. Voici quelques tâches élémentaires qui peuvent aider :

• • L’utilisation d’un réseau de distribution de contenu (CDN) pour améliorer les temps de chargement des fichiers,
  • Réduire la taille des fichiers JavaScript et CSS en les minifiant.

Tâches longues (>50ms):

Ces tâches bloquent le traitement par le navigateur jusqu’à leur achèvement. Pour y remédier:

• • Découpez les appels en plusieurs fonctions,
  • Déléguez l’exécution du code ou utilisez un planificateur API dédié pour mieux gérer ces processus longs.

Avec ces ajustements, vous pouvez également utiliser setTimeout ou requestIdleCallback pour diviser davantage les tâches longues en segments plus courts qui sont traités séparément par le navigateur.

Suivi en Temps Réel Utilisateur (RUM):

Cette technique est particulièrement utile sur les sites e-commerce où chaque milliseconde compte dans l’interaction utilisateur.
Des outils comme DebugBear ou Akamai mPluse peuvent être intégrés pour surveiller cette performance.

Outils Diagnostiques Complémentaires:

L’utilisation régulière des DevTools Chrome peut vous aider à identifier précisément ce qui ralentit vos interactions utilisateur.
Accédez à Performance > Start Recording puis interagissez avec votre site pendant que Chrome logue sa performance.