Optimiser le délai d'entrée

Découvrez en quoi consiste le délai d'entrée et des techniques pour le réduire et améliorer l'interactivité.

Jeremy Wagner

Les interactions sur le Web sont des choses compliquées, car toutes sortes d'activités se produisent dans le navigateur pour les amener. Cependant, ils ont tous un point en commun : ils entraînent 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 comment le réduire afin d'accélérer les interactions avec votre site Web.

Qu'est-ce que le délai d'entrée ?

Le délai d'entrée correspond au délai entre le moment où l'utilisateur interagit pour la première fois avec une page (par exemple, en appuyant sur un écran, en cliquant avec la souris ou en appuyant sur une touche) et jusqu'au moment où les rappels d'événement pour l'interaction commencent à s'exécuter. Chaque interaction commence par un certain délai d'entrée.

Visualisation simplifiée du délai d'entrée À gauche, une illustration représentant le curseur d'une souris avec une étoile en arrière-plan indique le début d'une interaction. À droite se trouve une illustration représentant une roue dentée, qui 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 par une accolade.
Mécanisme du délai d'entrée. 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. Cette opération prend un certain temps et peut être augmentée par le thread principal existant.

Une partie du délai d'entrée est inévitable: le système d'exploitation a toujours besoin d'un certain temps pour reconnaître un événement d'entrée et le transmettre au navigateur. Toutefois, cette portion du délai d'entrée n'est souvent même pas perceptible, et d'autres événements qui se produisent sur la page peuvent entraîner des retards de saisie suffisamment longs et causer des problèmes.

Comprendre le délai d'entrée

De manière générale, il est préférable que chaque partie d'une interaction soit aussi courte que possible pour que votre site Web ait de meilleures chances d'atteindre le seuil approprié de la métrique Interaction to Next Paint (INP), et ce quel que soit l'appareil de l'utilisateur. Garder le délai d'entrée sous contrôle n'est qu'une partie de l'atteinte de ce seuil.

Vous devez donc 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 vous attendre à éliminer complètement les délais d'entrée. Tant que vous évitez un travail excessif du thread principal lorsque les utilisateurs tentent d'interagir avec votre page, le délai d'entrée doit être suffisamment court pour éviter les problèmes.

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

Comme nous l'avons déjà dit, certains décalages d'entrée sont inévitables. En revanche, un certain décalage d'entrée est évitable. Voici quelques points à prendre en compte si vous rencontrez des problèmes de délais d'entrée longs.

Éviter les minuteurs récurrents qui déclenchent un travail de thread principal excessif

Deux fonctions de minuteur couramment utilisées en JavaScript 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 un rappel pour qu'il s'exécute toutes les n millisecondes indéfinies ou jusqu'à ce que le minuteur soit arrêté avec clearInterval.

setTimeout n'est pas problématique en soi. En réalité, il peut être utile pour éviter les longues tâches. Toutefois, cela dépend du moment du délai avant expiration, et du moment où l'utilisateur tente d'interagir avec la page lorsque le rappel est exécuté.

De plus, setTimeout peut être exécuté dans une boucle ou de manière récursive, où il agit davantage comme setInterval, mais de préférence en ne planifiant l'itération suivante que lorsque l'itération précédente n'est pas terminée. Bien que cela signifie que la boucle donne au thread principal chaque fois que setTimeout est appelé, vous devez veiller à ce que son rappel ne génère pas un travail excessif.

setInterval exécute un rappel à intervalles réguliers, ce qui risque d'entraver les interactions. En effet, contrairement à une seule instance d'un appel setTimeout, qui est un rappel ponctuel qui peut gêner une interaction de l'utilisateur, la nature récurrente de setInterval augmente fortement la probabilité qu'il empêche 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 de saisie Une tâche déclenchée par une fonction de minuteur se produit juste avant qu'un utilisateur ne commence une interaction de clic. Toutefois, le minuteur prolonge le délai d'entrée, ce qui retarde l'exécution des rappels d'événements de l'interaction.
Minuteur enregistré par un appel setInterval précédent contribuant au délai d'entrée, comme illustré dans le panneau des performances des outils pour les développeurs Chrome. Le délai d'entrée ajouté a pour effet que les rappels d'événement de l'interaction s'exécutent plus tard qu'ils ne le pourraient autrement.

Si des minuteurs ont lieu dans le code propriétaire, vous pouvez les contrôler. Évaluez si vous en avez besoin ou faites de votre mieux pour en réduire le travail autant que possible. Toutefois, les minuteurs dans des scripts tiers sont différents. Souvent, vous n'avez pas de contrôle sur la fonction d'un script tiers. Pour résoudre les problèmes de performances dans le code tiers, vous devez souvent collaborer avec les personnes concernées pour déterminer si un script tiers est nécessaire et, le cas échéant, établir un contact avec un fournisseur de scripts tiers pour déterminer ce que vous pouvez faire pour résoudre les problèmes de performances qu'ils peuvent causer sur votre site Web.

Éviter les longues tâches

Une façon d'atténuer les longs délais de saisie consiste à éviter les longues tâches. Lorsque vous avez trop de tâches de thread principal qui bloquent le thread principal pendant les interactions, cela alourdira le délai d'entrée avant que les longues tâches n'aient le temps de se terminer.

Visualisation de la durée pendant laquelle les tâches 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 retard d'entrée important qui entraîne l'exécution des rappels d'événements beaucoup plus tard qu'il ne le devrait. 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 le rendement, ce qui permet aux rappels d'événements de l'interaction de s'exécuter beaucoup plus tôt.
Visualisation de ce qu'il advient des interactions lorsque les tâches sont trop longues et que le navigateur ne peut pas répondre assez rapidement aux interactions, par rapport aux tâches plus longues divisées en tâches plus petites.

En plus de réduire la quantité de travail que vous effectuez dans une tâche (et vous devez toujours essayer 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 longues tâches.

Tenez compte du chevauchement des interactions

L'optimisation de l'INP peut être particulièrement difficile en cas d'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 ait eu le temps d'afficher l'image suivante.

Représentation du moment où les tâches peuvent se chevaucher pour produire de longs délais d'entrée. Dans cette représentation, une interaction de clic chevauche une interaction keydown pour augmenter le délai de saisie de l'interaction keydown.
Visualisation de deux interactions simultanées dans le Profileur de performances des outils de développement Chrome. Le travail de rendu lors de l'interaction initiale de clic entraîne un délai de saisie pour l'interaction suivante avec le clavier.

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

  • Envisagez de remettre les entrées en attente pour limiter le nombre d'exécutions d'un rappel d'événement au cours d'une période donnée.
  • Utilisez AbortController pour annuler les requêtes fetch sortantes afin que le thread principal ne soit pas encombré et ne traite pas les 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 causer un délai d'entrée plus long dû au chevauchement des interactions. En particulier, les animations en JavaScript peuvent déclencher de nombreux appels requestAnimationFrame, ce qui peut gêner les interactions de l'utilisateur. Pour éviter ce problème, utilisez autant que possible des animations CSS afin d'éviter de mettre en file d'attente des images d'animation potentiellement coûteuses. Dans ce cas, veillez toutefois à éviter les animations non composées, de sorte qu'elles s'exécutent principalement sur le thread GPU et le thread compositeur, et non sur le thread principal.

Conclusion

Bien que les délais de saisie ne représentent pas nécessairement la majorité du temps d'exécution des 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 long délai de saisie, vous avez la possibilité de le réduire. En évitant les rappels récurrents de minuteur, la séparation des tâches longues et le fait d'être conscient du chevauchement potentiel des interactions, vous pouvez réduire le délai de saisie et rendre l'interactivité plus rapide pour les utilisateurs de votre site Web.

Image principale de Unsplash, par Erik Mclean.