Comment améliorer l'intégration de la peinture dans WordPress (Guide d'interaction avec Next Paint)

Vous cliquez sur un menu, un accordéon, un bouton “ Ajouter au panier ”, et pendant un bref instant, rien ne se passe. La page n'est pas figée, mais elle semble bloquée. Ce phénomène a un nom : l'interaction avec l'écran suivant (INP), que Google mesure à chaque visite.

L'INP est l'un des trois indicateurs clés de performance web (Core Web Vitals) depuis le 12 mars 2024, date à laquelle il a officiellement remplacé le délai de première interaction (FID). Alors que le FID ne prenait en compte que la toute première action d'un visiteur sur votre page, l'INP analyse chaque clic, appui et frappe au clavier pendant toute la durée de la visite et signale l'élément le plus lent.

La bonne nouvelle : la plupart des problèmes d’intégration de pages (INP) sont liés à quelques causes habituelles (JavaScript des plugins, modules de création de pages, balises tierces), et les identifier ne nécessite pas de diplôme d’ingénieur en performance.

Ce guide explique en termes simples ce que mesure l'INP et comment mesurer le vôtre. avant En touchant à n'importe quel élément, on découvre les correctifs WordPress classés par impact typique. C'est parti ! 👉

INP signifie « Interaction avant affichage suivant ». En clair, il s'agit du temps qui s'écoule entre l'action d'un visiteur (cliquer sur un bouton, appuyer sur un lien, saisir une touche) et l'affichage de l'image suivante à l'écran par le navigateur : l'ouverture du menu, la mise à jour du panier, la réponse d'un champ de formulaire, etc. Si ce délai est trop long, le site donne l'impression d'être dysfonctionnel, même s'il fonctionne correctement.

Plusieurs éléments distinguent l'INP des indicateurs plus anciens :

• Il surveille l'intégralité de la visite, et pas seulement le chargement. Les données d'utilisation de Google montrent que les utilisateurs passent 90% de leur temps sur une page. après Le chargement prend du temps, donc une mesure qui ne vérifie que la première impression passe à côté de la plus grande partie de l'expérience.
• Il signale votre interaction typique la plus défavorable. INP observe chaque interaction et retient approximativement la plus lente (un petit nombre de valeurs aberrantes sont écartées). Le score final est ensuite calculé au 75e percentile des visites réelles.
• Cela couvre l'intégralité de l'interaction. Chaque interaction comporte trois phases : délai d'entrée (le navigateur était occupé à effectuer une autre tâche lorsque le visiteur a cliqué), temps de traitement (exécution du code JavaScript déclenché par le clic), et retard de présentation (représentation graphique du résultat). L'INP mesure les trois.
• Seules les contributions réelles sont prises en compte : Les clics, les tapotements et les frappes au clavier. Le défilement et le survol ne le sont pas.

Les règles de notation sont simples : 📏

• 🟢 200 ms ou moins : bonne réactivité.
• 🟡 200 à 500 ms : Nécessite des améliorations.
• 🔴 Plus de 500 ms : pauvre.

Ces trois-là sont constamment confondus, alors voici la version propre :

Métrique	Ce que cela mesure	Bon score
FID (Délai de première entrée)	Seuls les délai d'entrée Dès la première interaction, il s'agit d'un simple test de réactivité, rien de plus.	Retraité (remplacé par INP en mars 2024)
INP (Interaction avec la peinture suivante)	La durée totale de chaque interaction, ou presque, tout au long de la visite, depuis la saisie jusqu'à l'image suivante.	200 ms ou moins
LCP (La plus grande peinture à contenu)	Chargement, et non interactivité : durée d’affichage du plus grand élément visible.	2,5 s ou moins

Il était facile de passer inaperçu du FID : un premier clic réussi suffisait à masquer la lenteur du reste de la visite. L'INP existe car Google souhaitait obtenir des informations complètes. Le LCP, quant à lui, répond à une question totalement différente (la page s'est-elle affichée rapidement ?), ce qui explique pourquoi l'optimisation des images est bénéfique pour le LCP mais quasiment inutile pour l'INP. Si le problème vient d'une image LCP chargée tardivement, vous trouverez un guide de résolution dédié sur le blog.

Cet article se concentre exclusivement sur l'INP. Pour une vue d'ensemble des trois Core Web Vitals, y compris le CLS et leur impact sur le classement, consultez le guide complet de Google sur les Core Web Vitals.

Résistez à la tentation de désinstaller des applications. L'INP est une mesure de terrain, c'est-à-dire qu'elle est calculée à partir de visiteurs réels sur de vrais appareils. La première étape consiste donc à déterminer s'il y a un problème et où il se situe.

Commencez par Statistiques de vitesse de page. Collez votre URL, exécutez le test et consultez la section “ Évaluation des indicateurs Web essentiels ” en haut de la page. Cette section présente les données de terrain du rapport Chrome sur l'expérience utilisateur (CrUX), l'ensemble de données Web Vitals officiel, calculées au 75e percentile des visites réelles sur les 28 derniers jours. Voici ce blog en exemple : 👇

INP de 194 ms : test réussi, mais attention, la vigilance reste de mise. Si vos URL affichent un avertissement (jaune ou rouge), poursuivez votre lecture.

ℹ️ REMARQUE : Les sites récents ou à faible trafic affichent souvent “ Données d’utilisation insuffisantes ” au lieu d’un score, car CrUX a besoin d’un nombre minimum de visiteurs Chrome réels. Il arrive que vous obteniez des données au niveau de l’origine plutôt qu’au niveau de la page. Si aucune de ces données n’est disponible, utilisez la méthode de test ci-dessous et vérifiez à nouveau à mesure que le trafic augmente.

Les données de terrain vous indiquent que Tu es lent. Les outils de développement de Chrome te le disent. pourquoi. Ouvrez votre page dans Chrome, puis :

1. Ouvrez les outils de développement et accédez à Performance languette.
2. Frapper Enregistrer, Utilisez ensuite votre page comme le ferait un visiteur : ouvrez le menu mobile, effectuez une recherche, ajoutez un article au panier, cliquez sur un filtre.
3. Arrêtez l'enregistrement et regardez le Principal piste de fil.

Ce que vous recherchez, c'est tâches longuesToute tâche qui monopolise le thread principal pendant plus de 50 ms est signalée par un triangle rouge dans un coin et une bande rouge dans les outils de développement. Pendant l'exécution d'une tâche longue, le clic de votre visiteur reste en attente, et c'est précisément cette attente que mesure l'INP. Les vues « Ascendante » ou « Résumé » en bas de page détaillent le temps d'utilisation du thread principal par processus internes et tiers, et c'est là que les processus responsables sont identifiés : 👇

La documentation du panneau Performances contient une présentation complète, et le rapport « Signaux Web essentiels » de la Search Console vous offre une vue d'ensemble du site, en regroupant les URL qui partagent le même problème.

💡 CONSEIL DE PRO : Les outils de laboratoire ne peuvent pas mesurer l'INP à eux seuls, car aucune interaction n'a lieu avec la page pendant un test. Si vous ne disposez pas encore de données de terrain, utilisez le temps de blocage total (TBT) du rapport Lighthouse comme indicateur. Il ne remplace pas l'INP, mais un TBT élevé annonce presque toujours des problèmes d'INP.

Presque tout ce qui affecte les performances d'INP sur un site WordPress est dû à la concurrence entre JavaScript et le thread principal. Ces correctifs sont classés par ordre d'efficacité, selon qu'ils profitent généralement le plus aux sites WordPress ou non par intérêt pratique.

Chaque extension active peut ajouter du JavaScript à toutes les pages, même celles où elle est inutile. Prenez cette extension de formulaire de contact de 2023 ? Ses scripts risquent fort de se charger sur vos 400 articles. Allez dans Extensions → Extensions installées et désactivez (puis supprimez) toutes les extensions qui ne sont pas utiles. Dans la mesure du possible, privilégiez les extensions qui ne chargent les ressources que sur les pages qui les utilisent réellement.

Si vous avez un environnement de test, effectuez un essai, puis revérifiez INP après le nettoyage pour voir ce que chaque suppression a apporté. 📉

Les outils d'analyse, les fenêtres contextuelles, les widgets de chat et les pixels sociaux n'ont pas besoin de s'exécuter dès le chargement de la page. Les différer jusqu'à la première interaction du visiteur (ou au moins après le rendu initial) libère le thread principal au moment précis où les visiteurs commencent à cliquer.

Vous n'avez pas besoin d'écrire de code pour cela. WP Rocket (premium) propose une fonctionnalité de report d'exécution JavaScript, et Flying Scripts (gratuit) offre une fonction similaire grâce à une simple liste de règles par mots-clés. La plupart des plugins d'optimisation de performances sérieux proposent également le report d'exécution des scripts.

🆘 PROBLÈME POSSIBLE : Retarder l’exécution du mauvais script peut entraîner des dysfonctionnements. Les curseurs, les menus et les bannières de cookies sont souvent touchés. Ajoutez les règles une par une et parcourez vos pages principales après chaque modification. C’est fastidieux, mais plus rapide que de déboguer plusieurs éléments simultanément.

Les constructeurs de pages et les extensions de diaporama sont souvent à l'origine de problèmes d'intégration de page (INP) car ils distribuent d'importants fichiers JavaScript, souvent sur chaque URL du site. De nombreux constructeurs proposent des paramètres de performance permettant de décharger les widgets inutilisés ou de charger les ressources uniquement là où elles sont utilisées. Explorez donc ces options avant de conclure à une impasse. Par ailleurs, si un diaporama apparaît sur une seule page, il n'a pas d'INP. entreprise chargement sur tout le site

La vérité crue : si votre INP est faible et qu'un curseur de héros en est la cause, remplacez-le par une section de héros statique. est La solution. Personne n'a jamais regretté un slider. 🪦

Widgets de chat, cartes thermiques, outils de test A/B, pixels sociaux : chacun de ces éléments alourdit le thread principal, et vous n’avez aucun contrôle sur la qualité du code. L’analyse des dépendances tierces des DevTools (étape 1) vous indique précisément qui consomme quoi. Supprimez celles que vous n’utilisez pas activement (soyez impitoyable : “ on ne sait jamais ” n’est pas une raison valable), et reportez l’exécution des éléments restants selon la correction n° 2.

L'INP se produit dans le navigateur, et non sur votre serveur. Un hébergement plus rapide n'améliorera donc pas directement l'INP. Le TTFB (Time To First Byte) n'est pas pris en compte dans le calcul de l'INP. Cela dit, un serveur lent ralentit tout, y compris le moment où le thread principal est suffisamment saturé pour répondre rapidement aux premières interactions. Si votre TTFB est également élevé, optimisez-le dans le cadre de votre travail d'optimisation global (ce guide d'optimisation WordPress aborde ce point). En revanche, ne comptez pas sur une mise à niveau de votre hébergement pour résoudre un problème JavaScript.

Il est temps d'être honnête, car beaucoup de conseils en nutrition interventionnelle font comme si tout était réglable. Ce n'est pas le cas. 🤷

Intégrations tierces dont vous avez réellement besoin. Le chat d'assistance, les formulaires de paiement, les vidéos intégrées et les cartes exécutent leur propre code JavaScript sur votre page, et les interactions au sein de leurs iframes (comme le fait de cliquer sur la lecture d'une vidéo intégrée) sont comptabilisées dans votre INP. Vos visiteurs ne peuvent pas savoir quel code a ralenti le chargement, et la métrique non plus. Vous ne pouvez pas optimiser le code d'un tiers. Ce que vous pouvez faire, c'est contrôler. quand Il se charge : clic pour charger les façades vidéo, les widgets de chat qui s'initialisent après la première interaction, les cartes qui s'affichent comme une image statique jusqu'à ce qu'on les touche.

Publicités. Si vous monétisez avec des publicités display, les scripts publicitaires sont souvent les éléments les plus lourds de la page, les enchères et les actualisations s'effectuant en continu pendant toute la session. Il existe des paramètres techniques publicitaires qui permettent d'améliorer légèrement la situation, mais parfois, la solution la plus efficace consiste à supprimer un emplacement ou une fonctionnalité, plutôt qu'à l'optimiser. Considérez l'IMP (Integrated Post Page) comme une analyse coûts-avantages : chaque script de la page doit être rentable.

Téléphones bas de gamme. N'oubliez pas que le 75e centile inclut des visiteurs utilisant des appareils Android d'entrée de gamme, bien moins puissants que votre MacBook. Lors de l'enregistrement dans les outils de développement, activez la limitation du processeur dans le panneau Performances pour vous rapprocher de l'expérience de ces visiteurs.

INP se résume à une promesse simple : lorsqu’un visiteur effectue une action, un effet visible doit se produire rapidement. Voici le plan d’action :

• 📊 Mesurer d'abord Utilisez les données de terrain de PageSpeed Insights et recherchez les tâches longues dans le panneau Performances des outils de développement avant de modifier quoi que ce soit.
• 🧹 Coupez le JavaScript à la source : Effectuer un audit des plugins, puis reporter ou différer tout ce qui reste non critique.
• 🏗️ Affrontez les lourds paquets : Scripts de création de pages et de diaporama, puis balises tierces.
• ⚖️ Acceptez les plafonds : Les éléments intégrés et les publicités que vous conservez peuvent être chargés de manière différée ou via une façade, et parfois la meilleure solution consiste à les supprimer.

Suivez ces étapes dans l'ordre et la ligne des 200 ms ne vous fera plus peur. Vos visiteurs ne vous enverront pas de message de remerciement, mais ils navigueront sans problème et Google le remarquera.

Quel est le pire exemple de contenu inapproprié que vous ayez découvert sur votre site ? Faites-le nous savoir dans les commentaires ci-dessous ! 👇

GUIDE GRATUIT

4 étapes essentielles pour accélérer votre site WordPress

Suivez les étapes simples de notre mini-série en 4 parties et réduisez vos temps de chargement de 50 % (80%). 🚀

Hourra ! 🎉 Vous avez lu l'article jusqu'au bout !

Source: themeisle.com