Optimiser le délai d'entrée

Découvrez ce qu'est le délai d'entrée et apprenez des techniques pour le réduire afin d'améliorer l'interactivité.

Jeremy Wagner

Les interactions sur le Web sont complexes, car toutes sortes d'activités se produisent dans le navigateur pour les générer. Cependant, ils ont tous en commun un délai d'entrée avant que leurs rappels d'événement ne commencent à s'exécuter. Dans ce guide, vous allez découvrir ce qu'est le délai de saisie et comment le réduire pour accélérer les interactions sur votre site Web.

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

Le délai de saisie correspond à la période écoulée entre le moment où l'utilisateur interagit avec une page (en appuyant sur un écran, en cliquant avec la souris ou en appuyant sur une touche, par exemple) 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, un curseur de souris est représenté en traits avec un halo derrière lui, ce qui indique le début d'une interaction. À droite se trouve une illustration en ligne d'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 correspond au délai d'entrée encadré par une accolade.
Mécanisme du délai de réponse à l'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. Cela prend un certain temps, et peut être augmenté par le travail existant du thread principal.

Une partie du délai d'entrée est inévitable: le système d'exploitation met toujours un certain temps à 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 pas visible. D'autres événements survenant sur la page elle-même peuvent également entraîner des délais de saisie suffisamment longs pour provoquer des problèmes.

À propos du délai d'entrée

De manière générale, chaque partie d'une interaction doit être aussi courte que possible afin que votre site Web ait les meilleures chances d'atteindre le seuil "satisfaisant" 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'atteinte de ce seuil.

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 retards d'entrée. Tant que vous évitez une charge de travail excessive du thread principal lorsque les utilisateurs tentent d'interagir avec votre page, votre délai d'entrée doit être suffisamment faible pour éviter les problèmes.

Réduire le délai de réponse à l'entrée

Comme indiqué précédemment, un certain délai d'entrée est inévitable, tandis qu'un certain délai d'entrée est évitable. Voici quelques points à prendre en compte si vous rencontrez des retards de saisie importants.

Éviter les minuteurs récurrents qui déclenchent des tâches excessives dans 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 un rappel pour qu'il s'exécute après un délai spécifié. setInterval, en revanche, planifie un rappel à exécuter toutes les n millisecondes indéfiniment, ou jusqu'à ce que le minuteur soit arrêté avec clearInterval.

setTimeout ne pose pas de problème en soi. Il peut même être utile pour éviter les longues tâches. Toutefois, cela dépend du moment où le délai avant expiration se produit et si l'utilisateur tente d'interagir avec la page lorsque le rappel du délai avant expiration s'exécute.

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, il ne planifie pas l'itération suivante tant que la précédente n'est pas terminée. Bien que cela signifie que la boucle cède au thread principal chaque fois que setTimeout est appelé, vous devez veiller à ce que son rappel ne fasse pas un travail excessif.

setInterval exécute un rappel à un intervalle 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 qui peut gêner une interaction utilisateur, la nature récurrente de setInterval rend beaucoup plus probable qu'il gêne une interaction, ce qui augmente le délai d'entrée de l'interaction.

Capture d'écran du profileur de performances dans Chrome DevTools 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 déclenche une interaction de clic. Toutefois, le minuteur prolonge le délai d'entrée, ce qui entraîne l'exécution des rappels d'événements d'interaction plus tard que prévu.
Minuteur enregistré via 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énement pour l'interaction plus tard qu'ils ne le pourraient autrement.

Si des minuteurs se produisent dans le code propriétaire, vous pouvez les contrôler. Évaluez si vous en avez besoin ou faites de votre mieux pour réduire le travail qu'elles impliquent autant que possible. Toutefois, les minuteurs dans les scripts tiers sont une autre histoire. Vous n'avez souvent aucun contrôle sur l'exécution 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 donné est nécessaire. Si c'est le cas, vous devez contacter le fournisseur du script 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 atténuer les longs délais d'entrée, évitez les tâches longues. Lorsque des tâches de thread principal excessives bloquent le thread principal lors des interactions, cela s'ajoute au délai d'entrée avant que les longues tâches n'aient pu 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 fait que les rappels d'événements s'exécutent beaucoup plus tard que prévu. En résumé, 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 en s'abandonnant, 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 lorsque les tâches sont trop longues et que le navigateur ne peut pas y répondre assez rapidement, par rapport à ce qui se passe lorsque les tâches plus longues sont 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 vous efforcer de faire 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.

Faire attention aux chevauchements d'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 le temps d'afficher le frame suivant.

Illustration des cas où les tâches peuvent se chevaucher pour générer de longs délais d'entrée. Dans cette illustration, une interaction de clic se superpose à une interaction de pression sur une touche pour augmenter le délai d'entrée de l'interaction de pression sur une touche.
Visualisation de deux interactions simultanées dans le profileur de performances des outils pour les développeurs de Chrome. Le travail de rendu de l'interaction initiale par clic entraîne un retard d'entrée pour l'interaction ultérieure par clavier.

Les sources de chevauchement des interactions peuvent être aussi simples que des utilisateurs effectuant de nombreuses interactions en peu de temps. Cela peut se produire lorsque les utilisateurs saisissent du texte 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 (par exemple, 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 de débouter les entrées pour limiter le nombre d'exécutions d'un rappel d'événement dans une période donnée.
  • Utilisez AbortController pour annuler les requêtes fetch sortantes afin que le thread principal ne soit pas saturé 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.

L'augmentation du délai d'entrée dû aux interactions qui se chevauchent peut également entraîner des animations coûteuses. En particulier, les animations en JavaScript peuvent déclencher de nombreux appels requestAnimationFrame, ce qui peut gêner les interactions des utilisateurs. Pour contourner ce problème, utilisez des animations CSS dans la mesure du possible afin d'éviter la mise en file d'attente d'images d'animation potentiellement coûteuses. Toutefois, dans ce cas, assurez-vous d'é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

Bien que 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 constatez que le délai de saisie est long, vous avez la possibilité de le réduire. Éviter les rappels de minuteur récurrents, fractionner les tâches longues et être conscient des chevauchements d'interactions potentiels peuvent tous vous aider à réduire le délai d'entrée, ce qui améliore l'interactivité des utilisateurs de votre site Web.

Image principale issue de Unsplash, par Erik Mclean.