Écouteurs d’événements passifs

Silktide charge vos pages dans un véritable navigateur et recherche des scripts qui écoutent des événements tactiles et de roulette de la souris d’une manière pouvant retarder le défilement. Déclarer ces écouteurs comme passifs permet au navigateur de faire défiler immédiatement.

Lorsqu’un script écoute des événements tactiles ou de roulette, le navigateur doit attendre que ce script s’exécute avant de faire défiler, au cas où le script annulerait le défilement. Sur les pages chargées, cela provoque des saccades ou de la latence dans le défilement — l’un des types de saccades les plus perceptibles, surtout sur les téléphones.

Pourquoi c’est important

Le défilement est l’action la plus fréquente des visiteurs sur une page, et on remarque immédiatement lorsqu’il n’est pas fluide. Une page qui hésite ou qui tressaille sous le doigt donne l’impression d’être brisée même si tout y fonctionne, et cette impression est encore plus marquée sur mobile, où le défilement tactile est constant.

Comment corriger

Déclarez les écouteurs tactiles et de roulette comme passifs, ce qui garantit au navigateur qu’ils n’annuleront jamais le défilement :

\/\/ Bloque le défilement jusqu’à l’exécution du gestionnaire
document.addEventListener('touchstart', onTouchStart);

\/\/ Passif : le navigateur fait défiler immédiatement
document.addEventListener('touchstart', onTouchStart, { passive: true });

Ajoutez { passive: true } à vos écouteurs touchstart, touchmove, wheel et mousewheel, sauf si un écouteur appelle réellement preventDefault() pour empêcher le défilement.
Pour les écouteurs signalés à l’intérieur de scripts tiers, vérifiez s’il existe une version mise à jour de la bibliothèque, ou contactez le fournisseur — voir Code tiers.

Tous les navigateurs modernes prennent en charge les écouteurs passifs; seuls les très vieux navigateurs nécessitent une détection de fonctionnalité.

Comment Silktide le teste

Charger la page dans un véritable navigateur et repérer les écouteurs pour les événements tactiles et de roulette qui ne sont pas marqués passifs et pourraient retarder le défilement.
Signaler le script contenant chacun de ces écouteurs, avec la ligne où il est enregistré.

Dépannage

Mon écouteur doit annuler le défilement

Un écouteur qui appelle réellement preventDefault() pour arrêter le défilement ne peut pas être passif — le marquer comme passif amène le navigateur à ignorer l’appel à preventDefault(). Si un écouteur signalé doit vraiment annuler le défilement, le laisser non passif est correct; envisagez de restreindre l’endroit où il est attaché afin qu’il n’affecte pas le défilement ailleurs sur la page.