Optimiser le délai d'entrée

Découvrez ce qu'est le délai d'entrée et apprenez à le réduire pour une interactivité plus rapide.

Jeremy Wagner

Les interactions sur le Web sont complexes, car elles impliquent toutes sortes d'activités dans le navigateur. Cependant, ils ont tous en commun d'entraîner un certain délai d'entrée avant que leurs rappels d'événements ne commencent à s'exécuter. Dans ce guide, vous allez découvrir ce qu'est le délai d'entrée et ce que vous pouvez faire pour le réduire afin que les interactions de votre site Web s'exécutent plus rapidement.

Qu'est-ce que le délai de réponse à l'entrée utilisateur ?

Le délai d'entrée est la période qui s'écoule entre la première interaction de l'utilisateur avec une page (par exemple, en appuyant sur un écran, en cliquant avec une souris ou en appuyant sur une touche) et le début de l'exécution des rappels d'événement pour l'interaction. Chaque interaction commence par un certain délai d'entrée.

Visualisation simplifiée du délai d'entrée. À gauche, un dessin au trait d'un curseur de souris avec une étoile derrière, indiquant le début d'une interaction. À droite, un dessin au trait d'une roue dentée indique le moment où les gestionnaires d'événements d'une interaction commencent à s'exécuter. L'espace entre les deux est indiqué comme le délai d'entrée avec une accolade.
Mécanismes du délai de réponse à l'entrée utilisateur Lorsqu'une entrée est reçue par le système d'exploitation, elle doit être transmise au navigateur avant le début de l'interaction. Cela prend un certain temps, qui peut être augmenté par le travail existant du thread principal.

Une partie du délai d'entrée est inévitable : il faut toujours un certain temps au système d'exploitation pour reconnaître un événement d'entrée et le transmettre au navigateur. Cependant, cette partie du délai d'entrée n'est souvent même pas perceptible, et d'autres événements se produisent sur la page elle-même, ce qui peut rendre les délais d'entrée suffisamment longs pour causer des problèmes.

Comment envisager le délai d'entrée

En règle générale, vous devez faire en sorte que chaque partie d'une interaction soit aussi courte que possible afin que votre site Web ait les meilleures chances d'atteindre le seuil "bon" de la métrique Interaction to Next Paint (INP), quel que soit l'appareil de l'utilisateur. Contrôler le délai d'entrée n'est qu'une partie de l'équation.

Par conséquent, vous devez viser le délai d'entrée le plus court possible pour atteindre le seuil "bon " de l'INP. Sachez toutefois que vous ne pouvez pas espérer éliminer complètement les délais d'entrée. Tant que vous évitez de surcharger le thread principal lorsque les utilisateurs tentent d'interagir avec votre page, le délai d'entrée devrait être suffisamment faible pour éviter les problèmes.

Comment réduire le délai d'entrée

Comme indiqué précédemment, un certain délai d'entrée est inévitable, mais d'un autre côté, certains délais d'entrée peuvent être évités. Voici quelques points à prendre en compte si vous rencontrez des problèmes de latence d'entrée.

Évitez les minuteurs récurrents qui déclenchent un travail excessif sur le thread principal

Il existe deux fonctions de minuteur couramment utilisées en JavaScript qui peuvent contribuer au délai d'entrée : setTimeout et setInterval. La différence entre les deux est que setTimeout planifie l'exécution d'un rappel après un délai spécifié. setInterval, en revanche, planifie l'exécution d'un rappel toutes les n millisecondes, indéfiniment ou jusqu'à ce que le minuteur soit arrêté avec clearInterval.

setTimeout n'est pas problématique en soi. En fait, cela peut être utile pour éviter les tâches longues. Toutefois, cela dépend du moment où le délai avant expiration se produit et de la tentative de l'utilisateur d'interagir avec la page lors de l'exécution du rappel de délai avant expiration.

De plus, setTimeout peut être exécuté en boucle ou de manière récursive, où il agit davantage comme setInterval, mais de préférence sans planifier l'itération suivante tant que la précédente n'est pas terminée. Cela signifie que la boucle cédera la place au thread principal chaque fois que setTimeout sera appelé. Vous devez donc veiller à ce que son rappel n'effectue pas un travail excessif.

setInterval exécute un rappel à intervalles réguliers et est donc beaucoup plus susceptible d'interférer avec les interactions. En effet, contrairement à une seule instance d'un appel setTimeout, qui est un rappel ponctuel susceptible d'interférer avec une interaction utilisateur, la nature récurrente de setInterval augmente considérablement la probabilité qu'il interfère avec une interaction, ce qui augmente le délai d'entrée de l'interaction.

Capture d'écran du profileur de performances dans les outils pour les développeurs Chrome, montrant le délai d'entrée. Une tâche déclenchée par une fonction de minuteur se produit juste avant qu'un utilisateur n'initie une interaction par clic. Toutefois, le minuteur prolonge le délai d'entrée, ce qui entraîne l'exécution des rappels d'événements de l'interaction plus tard que prévu.
Un minuteur enregistré par un appel setInterval précédent contribuant au délai d'entrée, comme illustré dans le panneau "Performances" des outils pour les développeurs Chrome. Le délai d'entrée ajouté entraîne l'exécution des rappels d'événements pour l'interaction plus tard que prévu.

Si les minuteurs se produisent dans du code propriétaire, vous pouvez les contrôler. Évaluez si vous en avez besoin ou faites de votre mieux pour réduire au maximum le travail qu'ils contiennent. Cependant, les minuteurs dans les scripts tiers sont une autre histoire. Vous n'avez souvent aucun contrôle sur ce que fait un script tiers. Pour résoudre les problèmes de performances dans le code tiers, vous devez souvent collaborer avec les parties prenantes pour déterminer si un script tiers donné est nécessaire. Si c'est le cas, vous devez contacter un fournisseur de scripts tiers pour déterminer ce qui peut être fait pour résoudre les problèmes de performances qu'il peut causer sur votre site Web.

Éviter les tâches longues

Pour réduire les longs délais d'entrée, vous pouvez éviter les tâches longues. Lorsque le thread principal est surchargé et qu'il est bloqué pendant les interactions, cela augmente le délai d'entrée avant que les tâches longues n'aient pu se terminer.

Visualisation de la durée pendant laquelle les tâches longues prolongent le délai d'entrée. En haut, une interaction se produit peu de temps après l'exécution d'une seule tâche longue, ce qui entraîne un délai d'entrée important qui retarde l'exécution des rappels d'événements. En bas, une interaction se produit à peu près au même moment, mais la tâche longue est divisée en plusieurs tâches plus petites par rendement, ce qui permet aux rappels d'événements de l'interaction de s'exécuter beaucoup plus tôt.
Visualisation de ce qui se passe pour les interactions lorsque les tâches sont trop longues et que le navigateur ne peut pas répondre assez rapidement aux interactions, par rapport à ce qui se passe lorsque les tâches plus longues sont divisées en tâches plus petites.

En plus de minimiser la quantité de travail que vous effectuez dans une tâche (et vous devez toujours vous efforcer d'effectuer le moins de travail possible sur le thread principal), vous pouvez améliorer la réactivité aux entrées utilisateur en divisant les tâches longues.

Faites attention au chevauchement des interactions

L'optimisation de l'INP peut s'avérer particulièrement difficile si vous avez des interactions qui se chevauchent. Le chevauchement d'interactions signifie qu'après avoir interagi avec un élément, vous effectuez une autre interaction avec la page avant que l'interaction initiale n'ait eu l'occasion d'afficher l'image suivante.

Illustration des cas où les tâches peuvent se chevaucher pour produire de longs délais d'entrée. Dans cette illustration, une interaction de clic chevauche une interaction de pression de touche, ce qui augmente le délai d'entrée de l'interaction de pression de touche.
Visualisation de deux interactions simultanées dans l'outil de profilage des performances des outils pour les développeurs Chrome. Le travail de rendu lors de l'interaction de clic initiale entraîne un délai d'entrée pour l'interaction suivante au clavier.

Les sources de chevauchement d'interactions peuvent être aussi simples que des utilisateurs effectuant de nombreuses interactions sur une courte période. Cela peut se produire lorsque les utilisateurs saisissent des données dans des champs de formulaire, où de nombreuses interactions au clavier peuvent se produire sur une très courte période. Si le travail sur un événement clé est particulièrement coûteux (comme dans le cas courant des champs de saisie semi-automatique où des requêtes réseau sont envoyées à un backend), vous avez plusieurs options :

  • Envisagez d'utiliser la fonctionnalité anti-rebond pour les entrées afin de limiter le nombre de fois qu'un rappel d'événement s'exécute sur une période donnée.
  • Utilisez AbortController pour annuler les requêtes fetch sortantes afin que le thread principal ne soit pas encombré par la gestion des rappels fetch. Remarque : La propriété signal d'une instance AbortController peut également être utilisée pour annuler des événements.

Les animations coûteuses peuvent également augmenter le délai d'entrée en raison d'interactions qui se chevauchent. En particulier, les animations en JavaScript peuvent déclencher de nombreux appels requestAnimationFrame, ce qui peut interférer avec les interactions des utilisateurs. Pour contourner ce problème, utilisez des animations CSS chaque fois que possible afin d'éviter de mettre en file d'attente des frames d'animation potentiellement coûteux. Toutefois, si vous le faites, veillez à éviter les animations non composées afin que les animations s'exécutent principalement sur les threads du GPU et du compositeur, et non sur le thread principal.

Conclusion

Même si les délais d'entrée ne représentent pas la majeure partie du temps d'exécution de vos interactions, il est important de comprendre que chaque partie d'une interaction prend un certain temps que vous pouvez réduire. Si vous observez un délai d'entrée long, vous pouvez le réduire. Éviter les rappels de minuteur récurrents, diviser les tâches longues et être conscient des chevauchements d'interactions potentiels peut vous aider à réduire le délai d'entrée, ce qui permet d'accélérer l'interactivité pour les utilisateurs de votre site Web.