Découvrez en quoi consiste le délai d'entrée et des techniques pour le réduire et améliorer l'interactivité.
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.
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.
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.
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.
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êtesfetch
sortantes afin que le thread principal ne soit pas encombré et ne traite pas les rappelsfetch
. Remarque: La propriétésignal
d'une instanceAbortController
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.