Qu'est-ce que le score INP de Google et comment l'améliorer dans WordPress

Lorsque Google introduit un nouveau facteur de classement comme l'INP (Interaction to Next Paint), il est facile de se sentir dépassé. Vous vous demandez probablement ce que signifie ce terme technique pour votre site WordPress et ce que vous devez faire maintenant.

Nous comprenons parfaitement. Avec plus d'une décennie d'expérience dans l'optimisation de sites WordPress, notre équipe a immédiatement commencé à tester pour trouver les moyens les plus efficaces d'améliorer ce nouveau score.

Après avoir recherché le sujet, nous avons traduit tout le jargon complexe en étapes simples et réalisables. Nous sommes ravis de partager les méthodes éprouvées que nous utilisons maintenant sur notre propre portefeuille de sites Web.

Dans ce guide, nous vous expliquerons exactement ce qu'est l'INP et comment vous pouvez améliorer vos scores, même si vous n'êtes pas développeur.

Voici un aperçu rapide des sujets que nous aborderons dans ce guide :

1. Que sont les Core Web Vitals de Google ?
2. Qu'est-ce que l'INP de Google ?
3. Pourquoi Google a-t-il remplacé la métrique FID par l'INP ?
4. Comment mesurer le score INP de Google sur WordPress
5. Comment améliorer le score INP de Google sur WordPress
6. Comment les propriétaires de sites Web peuvent optimiser leurs sites pour l'INP
7. Comment les développeurs peuvent optimiser leur code pour l'INP
8. Exemples de bonnes pratiques de codage JavaScript pour les développeurs
9. Questions fréquemment posées sur l'INP de Google
10. Guides d'experts sur l'amélioration des performances de WordPress

Que sont les Core Web Vitals de Google ?

Les Core Web Vitals de Google sont des métriques de performance de site Web que Google considère comme importantes pour l'expérience utilisateur globale. Ces scores Web Vitals font partie du score global d'expérience de page de Google, ce qui aura un impact sur votre classement SEO.

Ces métriques sont utiles car, même si votre site Web WordPress se charge rapidement, il peut ne pas être entièrement fonctionnel pour les utilisateurs. Même si une page s'est chargée, un visiteur pourrait ne pas être en mesure de faire ce qu'il veut ou d'accéder aux informations dont il a besoin.

Les Core Web Vitals sont conçus pour vous aider. Ils vous permettent de mesurer la rapidité avec laquelle votre site web se charge, devient visible et est prêt à être utilisé par vos visiteurs.

Par le passé, Google utilisait trois tests de qualité :

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Vous pouvez en apprendre davantage sur ces tests dans notre guide ultime sur comment optimiser les Core Web Vitals pour WordPress.

Cependant, Google a remplacé le FID par un nouveau test appelé INP (Interaction to Next Paint) en mars 2024. Les deux autres tests continuent d'être utilisés.

Examinons ce qu'est l'INP et pourquoi Google l'a adopté.

Qu'est-ce que l'INP de Google ?

INP signifie ‘Interaction to Next Paint’. C'est une nouvelle métrique Google Core Web Vital qui mesure les interactions de l'utilisateur qui provoquent des retards sur votre site web.

Le test INP mesure le temps qu'il faut entre le moment où un utilisateur interagit avec votre site web, par exemple en cliquant sur quelque chose, et la mise à jour visuelle de votre contenu en réponse. Cette mise à jour visuelle est appelée le ‘next paint’.

Par exemple, un utilisateur pourrait soumettre un formulaire de contact sur votre site, cliquer sur un bouton, ou sélectionner une image qui s'ouvre dans une fenêtre modale. Le test INP mesurera le temps écoulé entre l'exécution de ces interactions par l'utilisateur et la visualisation effective du contenu mis à jour sur votre site web.

Le test Google génère ensuite un score INP unique basé sur la durée de la plupart des interactions utilisateur sur votre site web. Le score sera soit ‘Bon’, ‘Amélioration nécessaire’, soit ‘Mauvais’, en fonction du temps que met votre site web à se mettre à jour visuellement.

Pourquoi Google a-t-il remplacé la métrique FID par l'INP ?

Le test FID plus ancien mesurait la rapidité avec laquelle votre site Web répond à la première saisie de l'utilisateur après le chargement de la page, comme un clic de souris ou une pression sur une touche. Il le fait en mesurant le temps écoulé entre la première saisie de l'utilisateur et le moment où votre site Web commence à agir sur cette saisie.

En d'autres termes, il mesurait la réactivité de votre site web lors de son premier chargement et la première impression qu'il donnait aux utilisateurs réels.

Cependant, cette métrique n'était pas aussi utile qu'elle aurait pu l'être. Le test FID présentait deux limites :

1. Il ne mesurait que la première interaction de l'utilisateur, pas toutes.
2. Il ne mesurait que jusqu'à ce que le site web commence à traiter l'interaction, et non pas quand l'utilisateur pouvait réellement voir le retour visuel à l'écran.

Google a donc modifié le test pour donner une image plus complète de la réactivité globale d'une page web. L'INP mesurera tout le temps que l'utilisateur y passe jusqu'à ce qu'il quitte la page.

Comment mesurer le score INP de Google sur WordPress

Le moyen le plus simple de tester votre score Google Core Web Vitals est d'utiliser l'outil PageSpeed Insights. Entrez simplement l'URL que vous souhaitez tester et cliquez sur le bouton « Analyser ».

L'outil analysera la page web pendant quelques secondes, puis vous affichera les résultats du test.

Désormais, en plus des autres Google Core Web Vitals, vous verrez également le score d'Interaction to Next Paint (INP) de la page.

Il y aura des scores différents pour les utilisateurs mobiles et les utilisateurs de bureau.

Dans la capture d'écran ci-dessus, vous pouvez voir que le score INP pour les utilisateurs de bureau consultant cette page web sur WPBeginner est de 47 ms. Le point vert signifie que c'est un bon score.

Une fois que vous pourrez voir le score de votre propre site, vous vous demanderez probablement comment il se compare aux autres sites web et s'il doit être amélioré.

Google a fourni des directives pour interpréter votre score INP :

• Plus rapide que 200 millisecondes – bonne réactivité
• 200-500 millisecondes – nécessite une amélioration
• Plus lent que 500 millisecondes – mauvaise réactivité

Assurez-vous de vérifier votre score pour les utilisateurs mobiles et de bureau et visez une bonne réactivité.

Vous pouvez ensuite améliorer votre score INP en suivant les directives des sections ci-dessous.

Étude de cas : Trouver des interactions lentes sur les sites Web d'Awesome Motive

Mais d'abord, il peut être utile de regarder une étude de cas. Nous avons commencé à mesurer les scores INP sur nos sites de marque, y compris All in One SEO, MonsterInsights et WPForms.

Lorsque notre équipe a vérifié les scores INP de notre site Web, les premiers résultats ont montré que nos pages les plus populaires nécessitaient une amélioration.

En utilisant le tableau de bord Chrome User Experience (CrUX), nous avons pu constater que :

• 80 % de nos sessions étaient classées comme « bonnes »
• 12 % de nos sessions étaient classées comme « nécessitant une amélioration »
• 8 % de nos sessions étaient classées comme « mauvaises »

Un rapport PageSpeed Insights nous donne un score INP global, mais il ne nous dit pas quels boutons ou champs de formulaire spécifiques causent le délai pour les utilisateurs réels. Pour le savoir, nous devons approfondir en utilisant d'autres outils qui analysent les données des sessions de visiteurs réels.

Cela signifie que nous devrons ensuite effectuer nos propres tests pour trouver les interactions lentes sur les pages avec des scores INP plus bas. C'est une tâche détaillée et avancée qui est mieux réalisée par un développeur.

Cela se fait en allant sur chaque page qui nécessite une amélioration, puis en testant chaque interaction avec des clics, des touchers et des pressions de touches réels. Ceux-ci doivent être chronométrés et évalués à l'aide d'outils.

Le Chrome Developers Blog répertorie un certain nombre d'outils qui peuvent être utilisés pour les tests, tels que l'extension Chrome Web Vitals et le nouveau mode « timespan » dans le panneau Lighthouse des DevTools. Vous pouvez également consulter l'article de Google sur la façon de déboguer à l'aide de l'extension Web Vitals.

Il est important de noter que les sessions avec des notes plus basses ont très probablement eu lieu sur des appareils ou des connexions plus lents. Cela signifie que lors des tests, il est recommandé de ralentir la vitesse de votre navigateur, sinon vous risquez de ne pas repérer les interactions lentes.

Vous pouvez le faire en utilisant la fonctionnalité Inspect Element de Chrome en allant dans Afficher » Développeur » Inspecter les éléments. Vous pouvez passer à l'onglet « Réseau » et sélectionner une option de limitation dans le menu déroulant.

Il est important de tester sur une connexion plus lente car bon nombre de vos utilisateurs peuvent être sur des appareils mobiles ou avoir une connexion Internet moins qu'idéale. Un problème invisible sur votre ordinateur de bureau rapide pourrait être une source majeure de frustration pour eux.

Une fois que vous avez trouvé les scores INP pour vos pages, vous pouvez utiliser les conseils de la section suivante de ce tutoriel pour les améliorer.

Comment améliorer le score INP de Google sur WordPress

La majeure partie du travail d'optimisation du score INP devra être effectuée par les développeurs. Cela inclut les auteurs du thème et des plugins que vous utilisez sur votre site Web, ainsi que les développeurs de tout JavaScript personnalisé que vous exécutez.

C'est parce que le score INP est principalement lié au temps nécessaire pour effectuer les interactions JavaScript sur votre site Web.

Par exemple, lorsqu'un utilisateur clique sur un bouton, un code JavaScript est exécuté pour effectuer la fonction attendue par le clic sur le bouton. Ce code est téléchargé sur l'ordinateur de l'utilisateur et s'exécute dans son navigateur Web.

Pour optimiser votre score INP, les délais qui surviennent lors des interactions utilisateur JavaScript doivent être réduits. Trois composantes constituent ce délai :

1. Délai d'entrée, qui se produit lorsque votre site Web attend des tâches d'arrière-plan sur cette page qui empêchent l'exécution du gestionnaire d'événements.
2. Temps de traitement, qui est le temps nécessaire pour exécuter les gestionnaires d'événements en JavaScript.
3. Délai de présentation, qui est le temps nécessaire pour recalculer la page et afficher le contenu de la page à l'écran.

En tant que propriétaire de site Web, vous pouvez prendre des mesures pour améliorer les premier et troisième délais. Nous vous montrerons comment dans la section suivante.

Cependant, pour apporter de réelles améliorations à votre score INP, vous devrez améliorer le deuxième délai, qui est le temps de traitement du code lui-même. Ce n'est pas quelque chose que vous pouvez faire vous-même.

Les développeurs de votre thème WordPress, de vos plugins et de votre JavaScript personnalisé devront peut-être optimiser leur code pour donner un retour immédiat à vos utilisateurs. La bonne nouvelle est qu'ils y travaillent probablement déjà pour respecter la date limite de mars 2024.

Nous proposons quelques conseils spécifiques pour les développeurs avec des exemples plus loin dans cet article.

Comment les propriétaires de sites Web peuvent optimiser leurs sites pour l'INP

Bien que l'impact le plus significatif sur le score INP de votre site web provienne de l'optimisation de votre code par les développeurs, les propriétaires de sites web peuvent également prendre quelques mesures.

En particulier, vous pouvez vous assurer que les clics de souris et les frappes au clavier de vos utilisateurs sont reconnus le plus rapidement possible en optimisant les processus d'arrière-plan de votre site. De plus, vous pouvez vous assurer que la réponse à leur saisie s'affiche à l'écran le plus rapidement possible.

Bien que ces étapes ne réécrivent pas directement le code à l'origine d'une interaction lente, elles améliorent la santé globale de votre site. Un site plus rapide et plus léger donne au navigateur plus de ressources pour gérer rapidement les interactions des utilisateurs, ce qui peut certainement aider votre score INP.

Voici quelques mesures que vous pouvez prendre pour y parvenir.

1. Assurez-vous d'utiliser la dernière version de WordPress

La première chose à faire est de vous assurer que vous utilisez la dernière version de WordPress.

En effet, les versions 6.2 et 6.3 de WordPress ont introduit des améliorations de performance significatives. Celles-ci amélioreront les performances de votre site web côté serveur et côté client, ce qui améliorera votre score INP.

Pour des instructions détaillées, vous pouvez consulter notre guide sur comment mettre à jour WordPress en toute sécurité.

2. Optimiser les processus d'arrière-plan dans WordPress

Les processus d'arrière-plan sont des tâches planifiées dans WordPress qui s'exécutent en arrière-plan. Ils peuvent inclure la vérification des mises à jour de WordPress, la publication d'articles programmés et la sauvegarde de votre site web.

Si votre site web est trop occupé à exécuter ces tâches d'arrière-plan, il se peut qu'il ne réalise pas immédiatement que l'utilisateur a cliqué sur la souris ou appuyé sur une touche, ce qui entraîne un mauvais score INP.

Vous pourrez peut-être configurer vos scripts et plugins d'arrière-plan pour réduire la quantité de travail qu'ils effectuent, ce qui exercera moins de pression sur votre site web. Sinon, vous pourrez peut-être les exécuter uniquement lorsqu'ils sont nécessaires au lieu de les laisser s'exécuter en arrière-plan.

Pour des instructions détaillées, vous pouvez consulter la section Optimiser les processus d'arrière-plan de notre guide ultime sur la façon d'améliorer la vitesse et les performances de WordPress.

3. Vérifier les recommandations de performance de PageSpeed Insights

Après avoir exécuté le test PageSpeed Insights sur votre site web, vous pouvez faire défiler vers le bas jusqu'à la section Performance des résultats du test.

Ici, vous trouverez des opportunités d'améliorer les performances de votre site ainsi que le temps d'économie estimé si vous suivez les conseils.

Par exemple, vous pourriez voir des recommandations pour éliminer les ressources qui bloquent le rendu. Vous pouvez le faire en suivant notre guide sur comment corriger le JavaScript et le CSS qui bloquent le rendu dans WordPress.

Vous pourriez également voir une recommandation pour réduire le JavaScript inutilisé. Vous trouverez un réglage pour ce faire dans plusieurs des meilleurs plugins de cache WordPress, tels que WP Rocket.

4. Minifier le JavaScript dans WordPress

Le JavaScript doit être téléchargé sur l'ordinateur de l'utilisateur avant de pouvoir être exécuté. En rendant vos fichiers JavaScript aussi petits que possible, vous pouvez obtenir de petits gains de performance.

La minification de votre JavaScript rend les fichiers plus petits en supprimant les espaces blancs, les sauts de ligne et les caractères inutiles du code source.

Cela n'aura pas un effet spectaculaire sur vos performances, mais si vous cherchez à gagner quelques millisecondes supplémentaires sur votre score INP, vous pourriez trouver cela utile.

Pour savoir comment faire, vous pouvez consulter notre guide sur comment minifier les fichiers CSS et JavaScript dans WordPress.

Comment les développeurs peuvent optimiser leur code pour l'INP

Si vous êtes un développeur, les plus grands gains de score INP proviendront de l'optimisation de votre code. Voici quelques choses que vous pouvez faire.

1. Accusez visuellement la saisie de l'utilisateur immédiatement

Voici la chose qui fera la plus grande différence lors de l'optimisation du score INP de votre code : vous devez fournir un retour visuel immédiat à toute saisie de l'utilisateur.

L'utilisateur doit voir immédiatement que son entrée a été reconnue et que vous agissez en conséquence. Cela rendra votre code plus réactif pour l'utilisateur et se traduira par un excellent score INP.

Voici quelques exemples :

• Si un utilisateur clique sur un élément, vous devez afficher quelque chose qui montre que l'élément a été cliqué.
• Si un utilisateur soumet un formulaire, vous devez immédiatement afficher quelque chose pour le reconnaître, comme un message ou un indicateur de chargement.
• Si un utilisateur clique sur une image pour l'ouvrir dans une fenêtre modale, n'attendez pas simplement que l'image se charge. Au lieu de cela, vous devriez afficher immédiatement une image de démonstration ou un indicateur de chargement. Ensuite, lorsque l'image est chargée, vous pouvez l'afficher dans la fenêtre modale.

Plus que tout, cela améliorera votre score INP, surtout si vous devez effectuer un traitement JavaScript intensif en réponse à une entrée utilisateur.

Assurez-vous simplement de mettre à jour l'interface utilisateur avant de commencer la tâche.

Après cela, vous pouvez planifier l'exécution du travail intensif légèrement plus tard en utilisant un rappel setTimeout. Cela donne au navigateur un moment pour mettre à jour l'écran avant qu'il ne soit occupé par la tâche intensive.

Une fois que vous aurez bien compris cela, il y a quelques autres choses que vous pourrez faire pour optimiser votre code.

2. Optimisez là où le navigateur passe le plus de temps

La prochaine chose à faire est d'examiner où le navigateur passe le plus de temps, puis d'optimiser ces parties.

Dans Google Chrome, lorsque vous naviguez vers Affichage » Développeur » Outils de développement » Performances, il est possible d'inspecter les fonctions JavaScript et les gestionnaires d'événements qui bloquent le rendu suivant.

Avec ces connaissances, vous pouvez voir ce qui peut être optimisé afin de réduire le temps jusqu'au prochain rendu après une interaction utilisateur.

3. Réduisez vos mises en page

Parfois, une grande partie de l'activité du processeur consiste en des travaux de mise en page.

Lorsque cela se produit, vous devriez vérifier si votre code amène le navigateur à recalculer la mise en page de la page de manière répétée. C'est souvent appelé « layout thrashing », et nous fournissons un exemple sur la façon de l'éviter plus loin dans ce guide.

4. Affichez d'abord le contenu au-dessus du pli

Si le rendu du contenu de la page est lent, votre score INP peut en être affecté.

Vous pouvez envisager d'afficher d'abord uniquement le contenu important « au-dessus du pli » pour livrer l'image suivante plus rapidement.

Exemples de bonnes pratiques de codage JavaScript pour les développeurs

Il peut être utile de vous montrer quelques exemples de la façon dont un mauvais code peut entraîner un mauvais score INP.

Nous avons rassemblé un projet d'exemple sur CodePen avec lequel vous pouvez expérimenter. Vous pouvez examiner notre code d'exemple, lire nos courtes explications et voir la différence que cela fait en cliquant sur les boutons.

Voici une animation de ce projet CodePen. Vous pouvez voir que le code d'exemple non optimisé entraîne un mauvais score INP de 965 millisecondes. La pression sur le bouton semblera lente pour les utilisateurs.

En revanche, le code optimisé met à jour le texte du bouton immédiatement, ce qui donne le meilleur score INP possible.

Lisez la suite pour découvrir quatre exemples de la façon dont vous pouvez améliorer votre code pour optimiser le score INP.

Exemple 1 : Mettez à jour l'écran avant d'exécuter une tâche CPU intensive

Les tâches CPU intensives prennent du temps, et cela peut entraîner de mauvais scores INP à moins que vous n'écriviez du bon code. Dans ce cas, il est préférable de mettre à jour l'écran avant d'exécuter cette tâche.

Voici un mauvais exemple où l'interface utilisateur est mise à jour après une tâche CPU intensive. Cela entraîne un INP élevé :

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

Dans cet exemple amélioré, l'interface utilisateur est mise à jour immédiatement lorsque le bouton est cliqué.

Après cela, la tâche CPU intensive est déplacée vers un rappel setTimeout :

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Cela permet au navigateur de mettre à jour l'écran avant de commencer la tâche lente, ce qui se traduit par un bon score INP.

Exemple 2 : Planifier un traitement non urgent

Vous devez également vous assurer de ne pas exécuter de travail non urgent ou non essentiel dans un script immédiatement, car cela pourrait retarder la réponse attendue par l'utilisateur.

Vous devriez commencer par mettre à jour la page immédiatement pour accuser réception de l'entrée de l'utilisateur. Après cela, vous pouvez utiliser requestIdleCallback pour planifier le reste du script lorsqu'il y a du temps libre à la fin d'une image ou lorsque l'utilisateur est inactif.

Voici un exemple :

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Cela rendra la page Web plus réactive pour l'utilisateur et vous permettra d'obtenir un meilleur score INP.

Exemple 3 : Planifier l'exécution d'une fonction avant la prochaine peinture

Vous pouvez également utiliserrequestAnimationFrame pour planifier l'exécution d'une fonction avant le prochain repeint :

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Cela peut être utile pour les animations ou les mises à jour visuelles en réponse aux interactions de l'utilisateur.

Encore une fois, vous devez donner un retour à l'utilisateur en accusant immédiatement réception de son entrée.

Exemple 4 : Éviter le « layout thrashing »

Le « layout thrashing » se produit lorsque vous lisez et écrivez de manière répétée dans le DOM (Document Object Model), ce qui oblige le navigateur à recalculer la mise en page plusieurs fois.

Voici un exemple de « layout thrashing » :

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Ceci peut être évité en regroupant vos lectures et écritures.

Voici un meilleur exemple :

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Questions fréquemment posées sur l'INP de Google

Nous comprenons qu'un sujet technique comme l'INP peut soulever de nombreuses questions. Pour vous aider, nous avons répondu à certaines des requêtes les plus fréquentes que nous recevons de nos lecteurs.

Qu'est-ce que l'Interaction to Next Paint (INP) de Google ?

L'Interaction to Next Paint (INP) est une métrique Google Core Web Vital qui mesure la réactivité globale d'un site web aux interactions de l'utilisateur. Elle calcule le temps écoulé entre le moment où un utilisateur clique, tape ou écrit sur une page et la prochaine mise à jour visuelle qui apparaît à l'écran.

Cela donne une vision plus large de l'expérience utilisateur que la métrique FID précédente.

Pourquoi Google a-t-il remplacé le First Input Delay (FID) par l'INP ?

Google a remplacé le FID par l'INP car il fournit une mesure plus complète de la réactivité d'une page. Le FID ne mesurait que le délai de la première interaction.

En revanche, l'INP évalue la latence de toutes les interactions utilisateur pendant une visite, offrant une image plus complète de l'expérience de l'utilisateur.

Quel est un bon score INP ?

Selon les directives de Google, un bon score INP est de 200 millisecondes ou moins. Un score compris entre 200 et 500 millisecondes « nécessite des améliorations », et tout ce qui dépasse 500 millisecondes est considéré comme une « mauvaise réactivité ».

Comment puis-je améliorer mon score INP dans WordPress ?

L'amélioration de votre score INP dans WordPress implique plusieurs étapes. Les propriétaires de sites web peuvent optimiser les processus d'arrière-plan, minimiser le JavaScript et s'assurer que leur site est à jour.

Les développeurs peuvent avoir un impact significatif en optimisant le code pour fournir un retour visuel immédiat aux actions de l'utilisateur, comme l'affichage d'un indicateur de chargement, et en différant les tâches lourdes.

Guides d'experts sur l'amélioration des performances de WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment améliorer votre score INP Google dans WordPress. Vous pourriez également vouloir consulter d'autres articles liés à l'amélioration des performances de WordPress :

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.