Écouteurs d’événements passifs

Silktide charge vos pages dans un vrai navigateur et recherche des scripts qui écoutent les événements tactiles et de molette de souris d’une manière pouvant retarder le défilement. Marquer ces écouteurs comme passifs permet au navigateur de défiler immédiatement.

Lorsqu’un script écoute des événements tactiles ou de molette (wheel), 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 fait saccader ou ralentir le défilement — l’un des types de saccades les plus visibles, en particulier sur les téléphones.

Pourquoi c’est important

Le défilement est l’action la plus courante que les visiteurs effectuent sur une page, et les gens remarquent immédiatement lorsqu’il n’est pas fluide. Une page qui hésite ou tremble sous le doigt paraît cassée même si tout y fonctionne, et cette impression se ressent surtout sur mobile, où le défilement tactile est constant.

Comment corriger

Marquez les écouteurs tactiles et de molette comme passifs, ce qui promet 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 défile immédiatement
document.addEventListener('touchstart', onTouchStart, { passive: true });

Ajoutez { passive: true } à vos propres écouteurs touchstart, touchmove, wheel et mousewheel, à moins qu’un écouteur n’appelle réellement preventDefault() pour stopper le défilement.
Pour les écouteurs signalés à l’intérieur de scripts tiers, recherchez 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 anciens navigateurs nécessitent une détection de fonctionnalité.

Comment Silktide teste cela

Charger la page dans un vrai navigateur et trouver les écouteurs pour les événements tactiles et de molette qui ne sont pas marqués passifs et pourraient retarder le défilement.
Signaler le script contenant chaque écouteur, avec la ligne où il est enregistré.

Dépannage

Mon écouteur doit annuler le défilement

Un écouteur qui appelle réellement preventDefault() pour stopper le défilement ne peut pas être passif — le marquer passif fait que le navigateur ignore 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.