Comment optimiser l’INP (Interaction to Next Paint) : le nouvel indicateur des Core Web Vitals de Google ?

Ecrit par Romain Giraud
le 28 / 03 / 2024

Google a récemment ajouté le 12 mars 2024 un nouvel indicateur dans ses Core Web Vitals appelé Interaction to Next Paint (INP) qui remplace le FID (First Input Delay). Cette métrique joue un rôle crucial dans l’évaluation de la performance des sites web, et comprendre son importance est essentiel pour maintenir ou améliorer le classement dans les résultats de recherche.

Si vous avez suivi notre conférence sur le temps de chargement , vous êtes déjà bien sensibilisé sur l’importance des Core Web Vitals pour votre référencement. Dans cet article, nous allons plonger dans ce qu’est l’INP, comment il est mesuré, son impact sur le positionnement des sites, ainsi que nos conseils pour l’optimiser.

• Qu’est ce que l’INP
• Comment mesurer l’INP d’une page
• Impacts de l’INP sur le positionnement des sites
• Qu’est-ce qui impacte le chargement des interactions ?
• Comment optimiser l’INP ?

Qu’est-ce que l’INP ?

L’Interaction to Next Paint (INP) mesure le délai entre le moment où un utilisateur interagit avec une page web et le moment où cette page commence à afficher visuellement des éléments en réponse à cette interaction. En d’autres termes, il évalue la réactivité d’un site web aux actions de l’utilisateur, ce qui est essentiel pour une expérience utilisateur fluide. Contrairement au FID qui mesure le délai avant la première interaction pendant le chargement, l’INP lui ne se contente pas d’évaluer un seul événement mais toutes les interactions sur une page tout au long de sa durée de vie en indiquant le délai le plus long. Quand on parle d’interaction cela comprend les interactions de clic, d’appui et de clavier que l’utilisateur effectue sur la page.

La durée de vie d’une interaction. Source : https://web.dev/articles/inp

Comment mesurer l’INP d’une page ?

L’INP peut être mesuré à l’aide d’outils d’analyse de la performance web, tels que Google PageSpeed Insights, Lighthouse, ou WebPageTest. Il est représenté en millisecondes (ms), et pour Google une bonne réactivité est inférieure à 200ms (de 200 à 500ms la réactivité doit être améliorée, et au-delà de 500ms la page est considérée comme peu réactive). Etant donné que l’INP est évalué sur toute la durée de vie d’une page, la donnée est mesurée grâce au rapport d’expérience utilisateur Chrome (CrUX) que vous pouvez retrouver dans les données de terrain sur l’outil Pagespeed Insights (basé sur les données d’utilisateurs des 28 derniers jours).

Impacts de l’INP sur le positionnement des sites

Google accorde de plus en plus d’importance à la performance web dans son algorithme de classement. Avec l’introduction des Core Web Vitals, qui incluent l’INP, il est clair que les sites web ayant une meilleure réactivité aux interactions des utilisateurs seront favorisés dans les résultats de recherche. Un INP faible peut donc avoir un impact positif sur le positionnement d’un site dans les SERP (Search Engine Results Pages).

Qu’est-ce qui impacte le chargement des interactions ?

Après avoir identifié les interactions lentes sur votre page, il faut comprendre les causes de cette lenteur. Voici les principales raisons causant un mauvais score d’INP :

• Les tâches longues : Tout ce que fait un navigateur est considéré comme une tâche. Cela comprend le rendu, l’analyse du code HTML, l’exécution de JavaScript et tout ce sur quoi vous pouvez ou non avoir un contrôle. Une tâche est considérée longue lorsqu’elle prend plus de 50 millisecondes à s’exécuter. Si l’utilisateur tente d’interagir avec la page pendant l’exécution d’une tâche longue, le navigateur sera retardé dans l’exécution de la demande. Il en résulte une latence d’interaction et un score INP plus faible.
• Le rendu HTML côté client : contrairement au rendu côté serveur, le rendu côté client (ou rendu navigateur) met à jour la page de manière dynamique sans la recharger complètement. Malheureusement, les tâches JavaScript du côté client ne sont pas automatiquement découpées en morceaux et cela peut entraîner de longues tâches qui bloquent le fil d’exécution principal, ce qui risque d’affecter le score d’interaction de votre page. Par conséquent, le rendu côté client peut nuire au chargement et à l’interactivité de votre page.
• Une taille de DOM excessive : Le DOM (Document Object Model) représente la structure du code HTML de votre page. Il permet aux langages JavaScript et CSS d’accéder à la structure et au contenu de la page. Le DOM lui-même n’est pas un problème, mais sa taille peut l’être. Un DOM de grande taille a un impact sur la capacité d’un navigateur à rendre une page rapidement et efficacement. Plus le DOM est grand, plus l’affichage initial de la page et les mises à jour ultérieures au cours du cycle de vie de la page nécessitent des ressources importantes. Si vous souhaitez qu’une page réponde rapidement aux interactions de l’utilisateur, veillez à ce que votre DOM ne contienne que les éléments nécessaires et ne dépasse pas les 1400 éléments (recommandation de Google).

Comment optimiser l’INP ?

Maintenant que vous connaissez l’INP jusqu’au bout des ongles, nous allons maintenant aborder la partie plus concrète de l’article : l’optimisation.

Comme vu précédemment, les tâches longues, le rendu côté client et la taille du DOM sont en grande partie responsables de la dégradation de l’INP. Pour cela, vous pouvez essayer ces pistes d’optimisation :

• Chargez vos scripts de manière asynchrone : les scripts peuvent être chargé en parallèle grâce à l’attribut defer, qui va les exécuter une fois que les pages soient entièrement rendues.
• Nettoyez vos scripts pour n’en garder que l’essentiel : en supprimant les parties du code qui ne sont pas strictement utiles au fonctionnement de la page, vous réduisez le poids de vos scripts qui prennent donc moins de temps à s’exécuter.
• Segmentez les scripts pour les découper en tâches plus courtes : concentrez vos efforts sur les tâches longues en les divisant en plus petits morceaux, en faisant cela vous pourrez appeler sur vos pages uniquement les parties des scripts qui sont réellement utilisées et permettre aux interactions éventuelles d’être gérées par le navigateur.
• Utiliser un Web Worker : le Javascript étant un langage monothread, tout se déroule sur un seul fil d’exécution. Pour pallier à cela, vous pouvez utiliser un Web Worker qui vous permettra d’exécuter certain script en dehors du fil d’exécution principal. La documentation officielle de Google évoque plus en profondeur ces Web Workers.
• Réduisez la taille du DOM : afin d’éviter de dépasser le seuil des 1400 éléments, réduisez au maximum la taille du DOM en nettoyant les parties du code HTML qui ne sont pas « nécessaires ».
• Evitez les timers récurrents qui surcharge le fil d’exécution principal : setTimeout et setInterval sont des fonctions de minuterie JavaScript couramment utilisées qui peuvent contribuer à retarder les entrées. Si vous avez le contrôle des timers dans votre code, évaluez leur nécessité et réduisez leur charge de travail autant que possible
• Evitez la mise en page synchrone forcée : également appelé thrashing de mise en page, ce problème de performance se produit lorsqu’on force un navigateur à effectuer la mise en page plus tôt avec Javascript. Chaque composant est traité et affiché un à un sans permettre le chargement asynchrone ou en parallèle, ce qui constitue un goulot d’étranglement des performances. Pour cela, regroupez vos lectures et écritures de style, notamment en utilisant FastDOM.

L’INP en résumé

L’Interaction to Next Paint (INP) est un indicateur essentiel des Core Web Vitals de Google, qui mesure la réactivité d’un site web aux interactions des utilisateurs. Comprendre l’importance de l’INP et comment l’optimiser est crucial pour maintenir ou améliorer le classement dans les résultats de recherche. En suivant les conseils d’optimisation mentionnés et en étant persistent, vous pourrez assurer une réactivité adéquate et offrir une excellente expérience utilisateur.