Comment améliorer l'interaction avec la peinture suivante (INP)

L'interaction avec Next Paint (INP) n'est plus expérimentale.

À compter de mars 2024, Google s'engage à promouvoir INP en tant que nouvelle mesure Core Web Vital pour la réactivité, en remplacement du premier délai d'entrée.

Et bien que vous puissiez penser que la gestion du score INP de votre site est une tâche que vous pouvez reporter, nous ne serions pas d'accord.

Google a déjà commencé à signaler les problèmes INP dans la Search Console et à envoyer des e-mails aux sites Web qui n'atteignent pas le seuil de bonne réactivité :

En d'autres termes, le moment idéal pour commencer à optimiser votre site pour la prochaine mesure de réactivité est maintenant. Et dans les lignes suivantes, vous apprendrez exactement comment.

• Présentation de l'interaction avec Next Paint
• Comprendre la latence d'interaction
• Pourquoi votre site échoue INP
• Comment identifier les interactions lentes
• Comment optimiser l'INP

Continuer à lire.

Interaction avec la peinture suivante : vue d'ensemble

Avant de se plonger dans les différentes techniques d'optimisation, voici un bref récapitulatif de ce que INP mesure.

INP évalue la réactivité globale d'une page aux interactions des utilisateurs en observant la latence de toutes les interactions qualifiantes lors de la visite d'un utilisateur sur une page. La valeur INP finale est la plus longue interaction observée.

Les interactions qui interviennent dans les calculs de l'INP sont :

• Cliquer avec une souris;
• Taper sur un appareil avec un écran tactile ;
• Appuyer sur une touche d'un clavier physique ou numérique.

Semblable aux autres Core Web Vitals, votre score INP peut se situer dans l'un des trois seuils suivants :

• Bon : 0-200ms
• Besoin d'améliorations : 200-500 ms
• Médiocre : >500ms

Pour garantir que vous atteignez cet objectif pour la majorité de vos utilisateurs, il est recommandé d'évaluer le 75e centile des chargements de page, segmenté sur les appareils mobiles et de bureau.

Si vous souhaitez en savoir plus ou parfaire vos connaissances sur l'INP, lisez notre article sur la prochaine métrique de réactivité.

Comprendre la latence d'interaction

Si vous voulez que votre score INP passe de mauvais à bon, vous devez comprendre la latence d'interaction.

Alors, qu'est-ce que la latence d'interaction ?

La latence d'interaction fait référence au retard ou au décalage subi entre l'entrée ou l'action d'un utilisateur et la réponse ou la sortie résultante à l'écran. C'est un facteur crucial pour déterminer la réactivité et la performance perçue de votre site.

Trois composants principaux contribuent à la latence d'interaction :

Délai d'entrée

Le délai d'entrée fait référence au temps entre le moment où un utilisateur commence à interagir avec la page et le moment où les actions associées ou les rappels d'événements commencent à s'exécuter. Il comprend les retards physiques ou techniques causés par le périphérique d'entrée (par exemple, le clavier, la souris, l'écran tactile) et les mécanismes de traitement des entrées du système.

Délai de traitement

Une fois l'entrée de l'utilisateur reçue, le système doit la traiter pour déterminer la réponse ou l'action appropriée. Le temps de traitement fait référence à la durée nécessaire au système pour analyser et interpréter les données d'entrée, effectuer les calculs ou opérations nécessaires et générer la sortie ou la réponse.

Délai de présentation

Une fois que le système a généré la sortie ou la réponse, il y a généralement un délai avant qu'elle ne soit présentée à l'utilisateur. Le délai de présentation englobe le temps nécessaire au système pour mettre à jour l'affichage, rendre les graphiques ou les interfaces utilisateur et fournir la sortie à l'interface utilisateur ou au périphérique de sortie.

Si vous avez besoin de plus d'informations, vous pouvez consulter la présentation de Jeremy Wagner à JSConf Korea 2022 :

Comprendre et optimiser la latence d'interaction peut fournir une expérience utilisateur transparente et corriger vos scores INP.

Mais avant cela, examinons les principaux responsables de latence d'interaction élevée et des mauvais scores INP…

Problème Core Web Vitals INP détecté sur votre site Web : quelle en est la cause ?

Bien que l'INP soit étiqueté comme en attente,cela ne signifie pas que vous devez entrer dans le processus d'optimisation sans stratégie.

La première chose que vous devez faire est d'apprendre quels sont les principaux coupables de l'INP, afin de pouvoir les gérer efficacement.

Voici les principales raisons du message d'erreur"Problème INP : plus de 200 ms" :

Tâches longues

Tout ce qu'un navigateur fait est considéré comme une tâche. Cela inclut le rendu, l'analyse HTML, l'exécution de JavaScript et tout ce que vous contrôlez ou non.

Le thread principal est l'endroit où le navigateur effectue la plupart du travail nécessaire pour afficher une page. Et bien qu'il puisse y avoir des dizaines de tâches à exécuter,le thread principal ne peut traiter qu'une seule tâche à la fois.

Mais ce n'est que la moitié du problème.

L'autre moitié est quesi une tâche prend plus de 50 millisecondes pour être exécutée, elle est classée comme une tâche longue. 

Considérant que le thread principal peut gérer une tâche à la fois, plus la tâche est longue, plus le navigateur sera bloqué pendant son traitement.

En d'autres termes, si l'utilisateur tente d'interagir avec la page pendant l'exécution d'une longue tâche, le navigateur sera retardé dans l'exécution de la demande.

Le résultat est une latence d'interaction et un score INP inférieur.

Grande taille DOM

Une autre raison de l'échec d'INP est d'avoir une grande taille de DOM.

Le modèle d'objet de document (DOM) est une partie inséparable de chaque page Web. Le DOM est une représentation d'un document HTML structuré en arbre. Chaque branche de l'arborescence se termine à un nœud et chaque nœud contient des objets. Les nœuds peuvent représenter différentes parties du document, telles que des éléments, des chaînes de texte ou des commentaires.

Le DOM lui-même n'est pas un problème, mais sa taille peut l'être. Une grande taille de DOM 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 pendant le cycle de vie de la page sont gourmands en ressources.

Tout simplement:

Si vous souhaitez qu'une page réponde rapidement aux interactions des utilisateurs, assurez-vous que votre DOM ne comprend que les éléments nécessaires.

Vous vous demandez peut-être ce que signifie "nécessaire". Selon Lighthouse, la taille DOM d'une page est excessive lorsqu'elledépasse 1 400 nœuds .

Assurez-vous donc de rester dans cette limite. Sinon, vous pourriez voir l'erreur suivante dans votre rapport PageSpeed ​​Insights :

Rendu côté client du HTML

Pour comprendre pourquoi le rendu du site client peut entraîner de mauvais scores INP, nous devons expliquer en quoi il diffère du rendu côté serveur du HTML.

Le chargement de page traditionnel implique que le navigateur reçoive du code HTML du serveur à chaque navigation. Ce qui se passe en arrière-plan lorsqu'une personne décide de charger une page est :

1. Le navigateur envoie une demande de navigation pour l'URL fournie.
2. Le serveur répond avec HTML en morceaux.

La clé ici est "en morceaux".

Lorsque le navigateur reçoit le premier morceau de HTML, il peut commencer à l'analyser. Mais comme nous le savons, l'analyse HTML est une tâche que le thread principal gère.

Cependant, après le traitement de chaque bloc, le navigateur fait une pause dans l'analyse et permet d'effectuer d'autres tâches. Cela évite les tâches longues qui pourraient ralentir le navigateur.

Au lieu de cela, il peut commencer à rendre les parties de la page qui ont déjà été analysées, de sorte que l'utilisateur voit une page partiellement chargée plus tôt. Il peut également gérer toutes les interactions de l'utilisateur qui se produisent lors du chargement initial de la page.

Autrement dit:

Cette approche se traduit par un meilleur score INP (Interaction to Next Paint) pour la page.

Au contraire, si votre site Web utilise le modèle d'application à page unique (SPA), qui crée dynamiquement de grandes parties du HTML/DOM sur le client avec JavaScript, vous pouvez vous attendre à des effets négatifs sur votre score INP.

Dans le rendu côté client, le serveur envoie un petit morceau de code HTML de base au client. Ensuite, le client s'occupe de remplir le contenu principal de la page à l'aide des données qu'il récupère sur le serveur.

Toutes les navigations futures sont gérées par JavaScript, récupérant le nouveau code HTML du serveur et mettant à jour dynamiquement la page sans la recharger complètement. Malheureusement, lorsqu'il s'agit de tâches JavaScript côté client, elles ne sont pas automatiquement regroupées.

Cela peut entraîner de longues tâches qui bloquent le fil principal, affectant potentiellement le score Interaction to Next Paint de votre page. Par conséquent, le rendu côté client peut nuire au chargement et à l'interactivité de votre page.

Si vous avez besoin d'informations supplémentaires sur les avantages et les inconvénients du rendu côté serveur par rapport au rendu côté client, regardez cette vidéo :

Maintenant que vous connaissez certains des principaux coupables, procédons à la mesure de votre score INP et à l'identification des interactions lentes.

Comment identifier les interactions lentes à l'aide de données de terrain et les déboguer en laboratoire

La prochaine étape du parcours d'optimisation INP consiste à mesurer les performances de votre site et à identifier les interactions lentes.

Semblable au premier délai d'entrée, l'INP est mieux mesuré sur le terrain - en examinant comment les vrais utilisateurs perçoivent votre site Web.

Le processus de test optimal ressemblerait à ceci :

1. Recueillir des données de terrain pour l'INP
2. Identifier les actions exactes responsables de l'INP
3. Utilisez des outils de laboratoire pour déterminer pourquoi ces interactions sont lentes

Nous avons dit optimalcar, dans certains cas, votre site peut ne pas avoir de données de terrain (également appelées données de surveillance des utilisateurs réels (RUM)). Cependant, cela ne signifie pas que vous devez renoncer à optimiser votre score INP. Vous devez adopter une approche différente et tirer parti des outils de laboratoire disponibles.

Examinons les deux scénarios et expliquons comment utiliser la plupart de vos données de terrain et de laboratoire.

Données de terrain

Idéalement, vous souhaiterez disposer de données de terrain lorsque vous commencerez à améliorer la réactivité de votre site. S'appuyer sur les données RUM vous fait gagner beaucoup de temps pour déterminer quelles interactions doivent être optimisées.

De plus, les outils de laboratoire peuvent simuler certaines interactions mais ne peuvent pas reproduire entièrement les expériences utilisateur réelles.

Lors de la collecte de données de champ INP, vous souhaiterez capturer les éléments suivants pour donner un contexte à la raison pour laquelle les interactions ont été lentes :

• La valeur INP – La distribution de ces valeurs déterminera si la page respecte les seuils INP.
• La chaîne de sélection d'éléments responsable de l'INP de la page - Connaître uniquement la valeur INP d'une page ne suffit pas.Vous voulez savoir quels éléments sont responsables des interactions.
• L'état de chargement de la page pour l'interaction qui est l'INP de la page - Comprendre si une interaction se produit pendant le chargement de la page ou après permet de déterminer si vous devez optimiser le fil principal ou si l'interaction elle-même est lente, quel que soit le chargement initial de la page.
• StartTime de l'interaction – Assurez-vous de consigner le startTime de l'interaction car il vous permet de savoir quand l'interaction s'est produite sur la chronologie des performances.
• Le type d'événement - Connaître le type d'événement d'interaction - clic sur la touche, autres événements éligibles - vous permet d'identifier quel rappel d'événement dans l'interaction a pris le plus de temps à s'exécuter.

Si vous vous demandez :

Comment suis-je censé capturer toutes ces choses ?

Ne t'inquiète pas. Toutes les données sont exposées dans la bibliothèque JavaScript web-vitals. Vous pouvez consulter le guide étape par étape de Google sur la manière d'exploiter la bibliothèque vitale du Web et même sur la transmission des données INP directement à votre Google Analytics.

De plus, même si vous collectez déjà des données avec un fournisseur RUM tiers, envisagez de les comparer avec les données du rapport Chrome UX (CrUX), car il existe des différences dans les méthodologies qu'ils utilisent.

Données de laboratoire

Les données de terrain sont la source de mesure la plus fiable. Cependant, comme nous l'avons dit, il n'est pas toujours disponible.

Mais il n'y a pas lieu de s'inquiéter car vous pouvez toujours mesurer et identifier les interactions à améliorer à l'aide des données de laboratoire.

Vous pouvez utiliser Lighthouse ou PageSpeed ​​Insights pour exécuter des tests de performances. La métrique à surveiller est le temps de blocage total (TBT).

TBT est une métrique qui évalue la réactivité de la page pendant le chargement et est très bien corrélée avec INP. Un mauvais score TBT est un signal qu'il y a des interactions qui pourraient être lentes pendant le chargement de la page.

Voici comment reproduire une interaction lente avec des outils de laboratoire :

• Utiliser l'extension Chrome Web Vitals

L'extension Chrome Web Vitals est l'un des moyens les plus simples de mesurer la latence d'interaction de votre site. Voici ce que vous devez faire pour récupérer des informations utiles :

1. Dans Chrome, cliquez sur l'icône des extensions à droite de la barre d'adresse.
2. Localisez l'extension Web Vitals dans le menu déroulant.
3. Cliquez sur l'icône à droite pour ouvrir les paramètres de l'extension.
4. Cliquez sur Options.
5. Activez la case à cocher Journalisation de la console dans l'écran résultant, puis cliquez sur Enregistrer.

Enfin, ouvrez la console Chrome DevTools et commencez les tests. Vous recevrez des journaux de console utiles vous donnant des informations de diagnostic détaillées pour l'interaction.

• Enregistrer une trace avec Chrome DevTools

Pour obtenir encore plus d'informations sur les raisons pour lesquelles l'interaction est lente, vous pouvez utiliser le profileur de performances dans Chrome DevTools. Faites simplement ce qui suit :

1. Ouvrez Chrome DevTools et accédez au panneau Performances.
2. Cliquez sur le bouton Enregistrer en haut à gauche du panneau pour commencer le traçage.
   
   
   
3. Effectuez l'interaction souhaitée.
4. Cliquez à nouveau sur le bouton Enregistrer pour arrêter le traçage.

Pour identifier rapidement les problèmes de performances, vérifiez le résumé de l'activité en haut du profileur lorsque le profil se remplit. Recherchez les barres rouges dans le résumé de l'activité, indiquant les instances de longues tâches pendant l'enregistrement. Ces barres rouges vous aident à identifier les zones problématiques et à cibler votre enquête.

• Utiliser les périodes de phare

Le mode périodes de Lighthouse est l'alternative la moins intimidante au profileur de performances de DevTools. Voici comment l'utiliser :

1. Accédez à l'onglet Phare dans DevTools.
2. Sous la section intitulée Mode, sélectionnez l'option Timespan.
3. Sélectionnez le type d'appareil souhaité dans la section intitulée Appareil.
4. Assurez-vous qu'au moins la case intitulée Performances est cochée sous l'étiquette Catégories.
5. Cliquez sur le bouton Période de début.
   
   
   
6. Testez la ou les interactions souhaitées sur la page.
7. Cliquez sur le bouton Fin de la période et attendez que l'audit apparaisse
8. Une fois l'audit renseigné, filtrez-le par INP.

Une liste des audits échoués et réussis vous sera présentée. Lorsque vous cliquez dessus, un menu déroulant apparaît et vous pouvez voir une répartition du temps passé pendant l'interaction divisé par le délai d'entrée, le temps de traitement et le délai de présentation.

Source : Google

Maintenant que vous savez sur quoi travailler, il est temps de retrousser vos manches et de commencer à optimiser.

Comment optimiser l'INP

Pour garantir à votre site unbonscore INP, vous devez vous assurer que chaque événement d'interaction se déroule le plus rapidement possible. Voici comment y parvenir :

Réduire le délai d'entrée

1. Évitez les minuteries récurrentes qui surchargent le fil principal

setTimeout et setInterval sont des fonctions de minuterie JavaScript couramment utilisées qui peuvent contribuer au délai d'entrée.

setTimeout planifie un rappel pour qu'il s'exécute après une heure spécifiée, et bien qu'il puisse aider à éviter de longues tâches, cela dépend du moment où le délai d'attente se produit et s'il coïncide avec les interactions de l'utilisateur.

setInterval , d'autre part, planifie un rappel pour qu'il s'exécute de manière répétée à un intervalle spécifié. Pour cette raison, il est plus susceptible d'interférer avec les interactions des utilisateurs. Sa nature récurrente augmente le délai d'entrée et peut affecter la réactivité des interactions.

Si vous contrôlez les temporisateurs dans votre code, évaluez leur nécessité et réduisez leur charge de travail autant que possible.

2. Évitez les tâches longues

Comme vous le savez déjà, les tâches longues bloquent le thread principal, empêchant le navigateur d'exécuter les événements d'interaction.

Pour améliorer la réactivité de votre site, il est important de minimiser la charge de travail sur le thread principal et d'envisager de fractionner les tâches longues.

En divisant les tâches longues en plus petits morceaux, le thread principal a la possibilité de gérer d'autres tâches et de répondre plus rapidement aux interactions des utilisateurs.

De plus, la séparation des tâches longues permet d'éviter l'effet "jank", où les animations et les transitions sur la page deviennent saccadées ou saccadées en raison du fil principal débordé. En garantissant que chaque tâche se termine dans un délai plus court, la page peut maintenir une expérience visuelle plus fluide pour l'utilisateur.

3. Évitez les chevauchements d'interaction

Le chevauchement d'interaction signifie qu'après qu'un visiteur a interagi avec un élément, il effectue une autre interaction avec la page avant que l'interaction initiale n'ait eu la chance de rendre le cadre suivant.

Par exemple, cela peut se produire lorsque les utilisateurs saisissent des champs de formulaire, ce qui entraîne de nombreuses interactions au clavier dans un court laps de temps. Vous pouvez optimiser le processus en :

• Anti-rebond des entrées pour limiter le nombre de fois qu'un rappel d'événement s'exécute dans une période de temps donnée.
• Utilisation d'AbortController pour annuler les requêtes de récupération sortantes afin que le thread principal ne devienne pas surchargé de traitement des rappels de récupération.
  

Optimiser les rappels d'événements (temps de traitement)

1. Envisagez de supprimer le rappel inutile

Le rappel d'événement coûteux est-il vraiment nécessaire ? Sinon, envisagez de supprimer entièrement le code ou, si ce n'est pas possible, retardez son exécution jusqu'à un moment plus approprié.

2. Différer le travail de non-rendu

Les tâches longues peuvent être décomposées en cédant au fil principal. Lorsque vous cédez au fil principal, vous suspendez essentiellement la tâche en cours et divisez le travail restant en une tâche distincte. Cela permet au moteur de rendu de gérer les mises à jour de l'interface utilisateur qui ont été traitées précédemment dans le rappel d'événement. En cédant, vous permettez au moteur de rendu d'exécuter les modifications en attente et d'assurer une mise à jour fluide et rapide de l'interface utilisateur.

Minimiser le délai de présentation

1. Réduire la taille du DOM

Une grande taille de DOM est un moyen infaillible d'échouer à l'évaluation INP. Donc, pour vous assurer que cela n'arrivera pas, vous devez réduire la taille de votre DOM, ou pour le dire autrement - vous devez réduire la profondeur du DOM.

Visez une profondeur DOM ne dépassant pas 1 400 nœuds.

Vous pouvez y parvenir en incorporant les techniques suivantes :

• Évitez les plugins et les thèmes mal codés
• Minimiser les nœuds DOM basés sur JavaScript
• Éloignez-vous des constructeurs de pages qui génèrent du HTML gonflé
• Ne pas copier/coller de texte dans l'éditeur WYSIWYG
• Divisez votre site Web d'une page en plusieurs pages
• Ne masquez pas les éléments indésirables en utilisant display:none
• Évitez d'utiliser des déclarations CSS compliquées et JavaScript
  

2. Évitez le travail excessif ou inutile dans les rappels requestAnimationFrame

La méthode requestAnimationFrame indique au navigateur que vous souhaitez effectuer une animation et demande que le navigateur appelle une fonction spécifiée pour mettre à jour une animation juste avant le prochain repaint.

Le rappel requestAnimationFrame() fait partie de la phase de rendu dans la boucle d'événements et doit se terminer avant que l'image suivante puisse être affichée. Si vous utilisez requestAnimationFrame() pour des tâches non liées aux modifications de l'interface utilisateur, il est essentiel de reconnaître que vous pourriez causer un retard dans le rendu de l'image suivante.

Évitez donc de les utiliser lorsque cela n'est pas nécessaire.

3. Différer les rappels ResizeObserver

L'interface ResizeObserver signale les modifications apportées aux dimensions du contenu ou de la zone de bordure d'un élément ou de la zone de délimitation d'un SVGElement.

Les rappels ResizeObserver s'exécutent avant le rendu et peuvent potentiellement retarder la présentation de l'image suivante s'ils impliquent des tâches gourmandes en ressources. Semblable aux rappels d'événements, il est conseillé de différer toute logique inutile non requise pour la trame à venir immédiate.

Améliorez l'INP avec NitroPack

Sur la base de tous les tests que nous avons effectués au cours des deux derniers mois et de toute la documentation publiée par Google sur INP, nous pourrions dire qu'il ressemble fortement au Largest Contentful Paint (LCP).

Un Core Web Vital multicouche qui comporte de nombreuses pièces mobiles.

Ainsi, depuis que Google a annoncé pour la première fois les nouvelles mesures de réactivité, nous avons commencé à tester et à travailler sur des fonctionnalités qui amélioreront les scores INP de nos clients.

Et nous avons vu des résultats prometteurs :

Avec NitroPack, nos clients constatent une amélioration moyenne de 36 % de l'INP.

Et tout cela s'est passé en pilote automatique. Juste en installant NitroPack et grâce à des fonctionnalités d'optimisation comme :

• Réduire les CSS inutilisés
• Différer le chargement de JavaScript
• CDN intégré

Vous pouvez également augmenter vos scores INP et Core Web Vitals sans écrire une seule ligne de code. Installez NitroPack gratuitement et découvrez les améliorations par vous-même.

Résolvez vos problèmes INP et passez automatiquement Core Web Vitals. Obtenez NitroPack maintenant →