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é.
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.
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.
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.
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.
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êtesfetch
sortantes afin que le thread principal ne soit pas saturé par la gestion des rappelsfetch
. Remarque: La propriétésignal
d'une instanceAbortController
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.