Cette page a été traduite par l'API Cloud Translation.

Diagnostiquer manuellement les interactions lentes dans l'atelier

Apprenez à récupérer vos données réelles en laboratoire afin de les reproduire et d'identifier les causes de la lenteur des interactions grâce à des tests manuels.

Jeremy Wagner

L'une des tâches d'optimisation de l'Interaction to Next Paint (INP) consiste à déterminer ce qui cause un mauvais INP. Les causes possibles sont nombreuses : par exemple, des scripts tiers qui planifient de nombreuses tâches sur le thread principal, des tailles de DOM volumineuses, des rappels d'événements coûteux et d'autres causes.

Il peut être difficile d'améliorer l'INP. Pour commencer, vous devez savoir quelles interactions ont tendance à être à l'origine de l'INP d'une page. Si vous ne savez pas quelles interactions sur votre site Web ont tendance à être les plus lentes du point de vue de l'utilisateur, consultez Identifier les interactions lentes sur le terrain. Une fois que vous disposez de données de terrain pour vous guider, vous pouvez tester manuellement ces interactions spécifiques dans les outils du laboratoire afin de déterminer pourquoi ces interactions sont lentes.

Que faire si vous ne disposez pas de données réelles ?

Les données de terrain sont essentielles, car elles vous font gagner beaucoup de temps en essayant d'identifier les interactions qui doivent être optimisées. Cependant, il se peut que vous n'ayez pas de données de champ. Si cela décrit votre situation, il est toujours possible de trouver des interactions pour s'améliorer, même si cela nécessite un peu plus d'efforts et une approche différente.

Le temps de blocage total (TBT) est une métrique de l'atelier qui évalue la réactivité de la page lors du chargement. Elle correspond bien à l'INP. Si votre page présente un volume de données différentiel élevé, cela signifie qu'elle risque de ne pas être très réactive aux interactions des utilisateurs lors de son chargement.

Pour déterminer le temps de rendu de votre page, vous pouvez utiliser Lighthouse. Si le taux de conversion d'une page est élevé, il est possible que le thread principal soit trop occupé pendant le chargement de la page, ce qui peut affecter la réactivité d'une page pendant cette phase cruciale du cycle de vie de la page.

Pour identifier les interactions lentes après le chargement de la page, vous aurez peut-être besoin d'autres types de données, tels que les flux utilisateur courants que vous avez peut-être déjà identifiés dans les données analytiques de votre site Web. Si vous travaillez sur un site Web d'e-commerce, par exemple, un flux utilisateur courant correspond aux actions que les utilisateurs effectuent lorsqu'ils ajoutent des articles à un panier en ligne et procèdent au paiement.

Que vous disposiez ou non de données de champ, l'étape suivante consiste à tester et reproduire manuellement les interactions lentes. En effet, ce n'est que lorsque vous êtes en mesure de reproduire une interaction lente que vous pouvez la corriger.

Reproduire des interactions lentes dans l'atelier

Il existe plusieurs façons de reproduire des interactions lentes dans l'atelier en effectuant des tests manuels, mais vous trouverez ci-dessous un framework que vous pouvez essayer.

Enregistrer une trace

Le Profileur de performances de Chrome est l'outil recommandé pour le diagnostic et le dépannage des interactions lentes. Pour profiler une interaction dans le Profileur de performances de Chrome, procédez comme suit:

La page que vous souhaitez tester doit être ouverte.
Ouvrez les outils pour les développeurs Chrome, puis accédez au panneau Performances.
Cliquez sur le bouton Record (Enregistrer) en haut à gauche du panneau pour commencer le traçage.
Effectuez les interactions qui vous intéressent.
Cliquez à nouveau sur le bouton Record (Enregistrer) pour arrêter le traçage.

Une fois le profileur rempli, il doit d'abord être consulté dans le résumé de l'activité, en haut du profileur. Le résumé de l'activité affiche des barres rouges en haut de l'écran à l'endroit où les longues tâches ont été effectuées dans l'enregistrement. Vous pouvez ainsi zoomer rapidement sur les zones qui posent problème.

Résumé de l'activité tel qu'il apparaît dans la partie supérieure du panneau des performances des outils pour les développeurs Chrome. L'activité affichée provient principalement de JavaScript qui entraîne une tâche longue, qui est mise en évidence en rouge au-dessus du graphique de flammes. — </ph> Résumé de l'activité en haut du Profileur de performances de Chrome. Les tâches longues sont mises en évidence en rouge au-dessus du graphique de flamme de l'activité. Dans ce cas, un travail de script important était à l'origine de la majeure partie du travail de la longue tâche.

Vous pouvez rapidement vous concentrer sur les zones qui posent problème en les faisant glisser et en les sélectionnant dans le résumé de l'activité. Vous pouvez éventuellement utiliser la fonctionnalité de fil d'Ariane du profileur pour vous aider à affiner la chronologie et à ignorer les activités non liées.

Une fois que vous vous êtes concentré sur l'endroit où l'interaction s'est produite, le canal Interactions vous aide à aligner l'interaction et l'activité survenue dans le fil de discussion principal situé en dessous:

Interaction telle qu'affichée dans le panneau "Performances" des outils pour les développeurs Chrome. Un suivi des interactions au-dessus du thread principal indique la durée d'une interaction, qui peut être alignée avec l'activité du thread principal en dessous. — </ph> Interaction profilée dans le profileur de performances dans les outils de développement de Chrome. La piste **Interactions** affiche une série d'événements correspondant à une interaction de clic. Les entrées de suivi des interactions couvrent les tâches responsables de l'interaction.

Pour en savoir plus sur la partie de l'interaction la plus longue, pointez sur l'itération dans le suivi des interactions:

Info-bulle indiquant une interaction, comme indiqué dans le panneau "Performances" des outils pour les développeurs Chrome. L'info-bulle indique la durée et la durée de l'interaction, y compris le délai d'entrée de l'interaction, la durée de traitement et le délai de présentation. — </ph> Info-bulle qui s'affiche lorsqu'un utilisateur pointe sur une interaction dans le canal des interactions du panneau des performances. L'info-bulle indique le temps passé dans chaque partie de l'interaction.

La partie rayée de l'interaction représente la durée pendant laquelle l'interaction a dépassé 200 millisecondes, ce qui correspond à la limite supérieure de l'interaction pour l'INP d'une page. Voici les parties de l'interaction répertoriées:

Délai d'entrée : représenté par la moustache gauche.
Durée du traitement : représentée par le bloc plein entre les moustaches gauche et droite.
Le délai de présentation, tel qu'indiqué par la moustache droite.

À partir de là, il s'agit d'examiner plus en détail le ou les problèmes à l'origine de la lenteur de l'interaction, que nous aborderons plus loin dans ce guide.

Extension Chrome Web Vitals

Le Profileur de performances est l'approche recommandée pour diagnostiquer les interactions connues pour être lentes. Toutefois, l'identification des interactions lentes peut prendre du temps lorsque vous ne savez pas quelles sont celles qui posent problème. Vous pouvez envisager d'utiliser l'extension Chrome Web Vitals. Cette extension vous permet de tester rapidement un certain nombre d'interactions afin d'identifier celles qui posent problème, avant d'accéder au Profileur de performances.

Une fois installée, l'extension Web Vitals affiche les données d'interaction dans la console DevTools en procédant comme suit:

Dans Chrome, cliquez sur l'icône des extensions à droite de la barre d'adresse.
Recherchez l'extension Web Vitals dans le menu déroulant.
Cliquez sur l'icône à droite pour ouvrir les paramètres de l'extension.
Cliquez sur Options.
Cochez la case Console logging (Journalisation de la console) dans l'écran qui s'affiche, puis cliquez sur Save (Enregistrer).

Après avoir suivi ces étapes, ouvrez la console dans les outils pour les développeurs Chrome et commencez à tester les interactions suspectes sur une page. À mesure que vous interagissez, les données de diagnostic apparaissent dans la console:

Affichage des journaux INP de l'extension Web Vitals dans la console des outils pour les développeurs Chrome Une journalisation détaillée indiquant la partie de l'interaction qui a pris le plus de temps est disponible, ainsi que des données d'attribution détaillées provenant de différentes API Performance. — </ph> L'extension Web Vitals peut enregistrer des données détaillées sur les interactions contribuant à l'INP d'une page dans la console dans les outils pour les développeurs Chrome.

Même si l'extension Web Vitals permet d'identifier les interactions lentes et fournit des informations pour vous aider à déboguer INP, vous devrez peut-être quand même utiliser le Profileur de performances pour diagnostiquer les interactions lentes, car il fournit les données détaillées dont vous avez besoin pour parcourir le code de production de votre site Web afin d'identifier les causes des interactions lentes.

Identifier la partie d'une interaction qui est lente

Les interactions se composent de trois parties: le délai d'entrée, la durée du traitement et le délai de présentation. La façon dont vous optimisez une interaction pour réduire l'INP d'une page dépend de la partie de celle-ci qui prend le plus de temps.

Identifier les délais de saisie longs

Les délais de saisie peuvent entraîner une latence d'interaction élevée. Le délai d'entrée correspond à la première partie d'une interaction. Il s'agit de la période écoulée entre le moment où le système d'exploitation reçoit l'action de l'utilisateur et le moment où le navigateur est en mesure de commencer à traiter le premier rappel du gestionnaire d'événements de cette interaction.

Vous pouvez identifier les délais d'entrée dans le Profileur de performances de Chrome en localisant l'interaction dans le canal des interactions. La longueur de la moustache gauche indique la partie du délai d'entrée de l'interaction. Vous pouvez obtenir la valeur précise dans une info-bulle en pointant sur l'interaction dans le Profileur de performances.

Les délais d'entrée ne peuvent jamais être nuls, mais vous pouvez contrôler leur longueur. L'important est de déterminer si des tâches en cours d'exécution sur le thread principal empêchent vos rappels de s'exécuter aussi vite qu'ils le devraient.

Délai de saisie, tel qu'illustré dans le panneau des performances de Chrome. Le début de l'interaction intervient bien avant les rappels d'événement, en raison d'un délai d'entrée plus élevé en raison du déclenchement d'un minuteur à partir d'un script tiers. — </ph> Délai d'entrée causé par une tâche déclenchée par un minuteur à partir d'un script tiers. La partie gauche de la moustache dans l'interaction affichée dans le suivi des interactions permet de visualiser le délai d'entrée.

Dans la figure précédente, une tâche issue d'un script tiers est en cours d'exécution lorsque l'utilisateur tente d'interagir avec la page, ce qui prolonge le délai d'entrée. Le délai d'entrée prolongé affecte la latence de l'interaction et peut donc affecter l'INP de la page.

Identifier les longues durées de traitement

Les rappels d'événements s'exécutent immédiatement après le délai d'entrée. Le temps nécessaire à leur exécution est appelé durée du traitement. Si les rappels d'événement s'exécutent trop longtemps, ils retardent la présentation de l'image suivante par le navigateur et peuvent augmenter considérablement la latence totale d'une interaction. Les longues durées de traitement peuvent être le résultat de JavaScript propriétaires ou tiers coûteux en ressources de calcul, voire des deux. Dans le Profileur de performances, cela est représenté par la partie pleine de l'interaction dans le suivi des interactions.

Représentation des tâches de rappel d'événements dans le panneau des performances de Chrome. L'info-bulle qui s'affiche au-dessus de la timeline indique une longue durée de traitement. — </ph> Rappels d'événements qui s'exécutent en réponse à une interaction de clic, comme indiqué dans le Profileur de performances des outils pour les développeurs Chrome. Notez que la durée de traitement est longue.

Vous pouvez rechercher des rappels d'événements coûteux en observant les éléments suivants dans une trace pour une interaction spécifique:

Déterminez si la tâche associée aux rappels d'événements est une tâche longue. Pour afficher de manière plus fiable les longues tâches d'un atelier, vous devrez peut-être activer la limitation du processeur dans le panneau "Performances", ou connecter un appareil Android de niveau inférieur à moyen et utiliser le débogage à distance.
Si la tâche qui exécute les rappels d'événement est une longue tâche, recherchez les entrées du gestionnaire d'événements (par exemple,celles portant des noms tels que Event: click) dans la pile d'appel qui comportent un triangle rouge dans l'angle supérieur droit de l'entrée.

Vous pouvez essayer l'une des stratégies suivantes pour réduire la durée de traitement d'une interaction:

Faites le moins d'efforts possible. Est-ce que tout ce qui se passe lors d'un rappel d'événement coûteux est strictement nécessaire ? Si ce n'est pas le cas, envisagez de supprimer complètement ce code, ou de reporter son exécution si cela n'est pas possible. Vous pouvez également profiter des fonctionnalités du framework pour vous aider. Par exemple, la fonctionnalité de mémoisation de React peut ignorer les tâches de rendu inutiles pour un composant lorsque ses accessoires n'ont pas changé.
Différez les tâches qui ne sont pas liées au rendu dans le rappel d'événement à un moment ultérieur. Les tâches longues peuvent être divisées en rendant le thread principal. Chaque fois que vous cèdez au thread principal, vous mettez fin à l'exécution de la tâche en cours et divisez le reste du travail en une tâche distincte. Cela permet au moteur de rendu de traiter les mises à jour de l'interface utilisateur effectuées précédemment dans le rappel d'événement. Si vous utilisez React, sa fonctionnalité de transition peut s'en charger pour vous.

Ces stratégies devraient vous aider à optimiser les rappels d'événements afin qu'ils prennent moins de temps à s'exécuter.

Comment identifier les retards de présentation

Les retards d'entrée longs et les longues durées de traitement ne sont pas les seules causes d'un INP médiocre. Parfois, les mises à jour de rendu qui se produisent en réponse à une petite quantité de code de rappel d'événement peuvent s'avérer coûteuses. Le temps nécessaire au navigateur pour afficher les mises à jour visuelles de l'interface utilisateur afin de refléter le résultat d'une interaction est appelé délai de présentation.

Le rendu, tel qu'illustré dans le panneau "Performances" des outils pour les développeurs Chrome Le rendu s'effectue après le rappel d'événement afin de peindre l'image suivante. — </ph> Tâches de rendu telles qu'indiquées dans le Profileur de performances de Chrome. La moustache droite permet de visualiser la durée des retards de présentation.

Le rendu est généralement constitué de tâches telles que le recalcul du style, la mise en page, la peinture et l'assemblage. Ils sont représentés par des blocs violets et verts dans le graphique de flammes du profileur. Le délai de présentation total est représenté par la moustache droite de l'interaction dans la piste des interactions.

De toutes les causes possibles d'une latence d'interaction élevée, les retards de présentation peuvent être les plus difficiles à dépanner et à corriger. Les raisons suivantes peuvent expliquer le travail d'affichage excessif:

Grandes tailles de DOM. Le travail de rendu nécessaire pour mettre à jour la présentation d'une page augmente souvent en même temps que la taille du DOM de la page. Pour en savoir plus, consultez Impact des grandes tailles de DOM sur l'interactivité et ce que vous pouvez faire à ce sujet.
Ajustements de la mise en page forcés : Cela se produit lorsque vous appliquez des modifications de style aux éléments dans JavaScript, puis que vous interrogez immédiatement les résultats de ce travail. Résultat : le navigateur doit effectuer le travail de mise en page avant toute autre action, afin de pouvoir renvoyer les styles mis à jour. Pour en savoir plus et obtenir des conseils sur la façon d'éviter les reflows forcés, consultez Éviter les mises en page complexes et volumineuses, ainsi que le thrashing de mise en page.
Travail excessif ou inutile dans les rappels requestAnimationFrame Les rappels requestAnimationFrame() sont exécutés pendant la phase de rendu de la boucle d'événements et doivent être terminés avant que l'image suivante puisse être présentée. Si vous utilisez requestAnimationFrame() pour effectuer une tâche qui n'implique pas de modifications de l'interface utilisateur, sachez que vous pouvez retarder le frame suivant.
Rappels ResizeObserver Ces rappels sont exécutés avant le rendu et peuvent retarder la présentation de l'image suivante si le travail qu'ils contiennent est coûteux. Comme pour les rappels d'événement, différez toute logique qui n'est pas nécessaire pour le frame suivant.

Que faire si vous ne parvenez pas à reproduire une interaction lente ?

Que se passe-t-il si vos données de terrain suggèrent qu'une interaction particulière est lente, mais que vous ne parvenez pas à reproduire manuellement le problème lors de l'atelier ? Plusieurs raisons peuvent expliquer ce problème.

Tout d'abord, les circonstances dans lesquelles vous testez les interactions dépendent du matériel et de la connexion réseau. Vous utilisez peut-être un appareil disposant d'une connexion rapide, mais cela ne signifie pas que vos utilisateurs le sont. Si vous êtes dans ce cas, vous pouvez essayer l'une des trois solutions suivantes:

Si vous disposez d'un appareil Android physique, utilisez le débogage à distance pour ouvrir une instance des outils pour les développeurs Chrome sur votre machine hôte et essayez de reproduire des interactions lentes sur cette machine. Souvent, les appareils mobiles ne sont pas aussi rapides que les ordinateurs portables ou de bureau, de sorte que les interactions lentes peuvent être plus facilement observées sur ces appareils.
Si vous ne disposez pas d'un appareil physique, activez la fonctionnalité de limitation du processeur dans les outils pour les développeurs Chrome.

Il est également possible que vous attendiez qu'une page se charge avant d'interagir avec elle, alors que ce n'est pas le cas de vos utilisateurs. Si votre réseau est rapide, simulez des conditions de réseau lentes en activant la limitation du réseau, puis interagissez avec la page dès qu'elle apparaît. Vous devez procéder ainsi, car le thread principal est souvent plus occupé au démarrage. Les tests effectués pendant cette période peuvent révéler ce que rencontrent les utilisateurs.

Le dépannage d'INP est un processus itératif

Trouver ce qui cause une latence d'interaction élevée qui contribue à un INP médiocre demande beaucoup de travail, mais si vous pouvez identifier les causes, vous êtes à mi-chemin. En suivant une approche méthodique pour résoudre les problèmes d'INP, vous pouvez identifier de manière fiable la cause d'un problème et arriver plus rapidement à la bonne solution. À vérifier:

Identifiez les interactions lentes à l'aide des données réelles.
Testez manuellement les interactions de champ problématiques dans l'atelier pour voir si elles sont reproductibles.
Déterminez si la cause est due à un long délai d'entrée, à des rappels d'événements ou à des tâches de rendu coûteuses.
Recommencez.

Le dernier d'entre eux est le plus important. Comme la plupart des tâches que vous effectuez pour améliorer les performances des pages, le dépannage et l'amélioration de l'INP est un processus cyclique. Lorsque vous corrigez une interaction lente, passez à la suivante et répétez l'opération jusqu'à ce que vous commenciez à obtenir des résultats.