Les écouteurs d'événements tactiles et à la molette sont utiles pour suivre les interactions des utilisateurs et créer des expériences de défilement personnalisées, mais ils peuvent également retarder le défilement des pages. Actuellement, les navigateurs ne peuvent pas savoir si un écouteur d'événements empêchera le défilement. Ils attendent donc toujours la fin de l'exécution de l'écouteur avant de faire défiler la page. Les écouteurs d'événements passifs résolvent ce problème en vous permettant d'indiquer qu'un écouteur d'événements n'empêche jamais le défilement.
Compatibilité du navigateur
La plupart des navigateurs sont compatibles avec les écouteurs d'événements passifs. Consultez la section Compatibilité des navigateurs.
Échec de l'audit de l'écouteur d'événements passif Lighthouse
Lighthouse signale les écouteurs d'événements qui peuvent retarder le défilement de la page:
Lighthouse utilise le processus suivant pour identifier les écouteurs d'événements susceptibles d'affecter les performances de défilement:
- Collecter tous les écouteurs d'événements sur la page
- Filtrez les écouteurs qui ne sont pas tactiles ou non.
- Filtrez les écouteurs qui appellent
preventDefault(). - Filtrez les écouteurs qui proviennent d'un hôte différent de celui de la page.
Lighthouse filtre les écouteurs de différents hôtes, car vous n'avez probablement pas le contrôle sur ces scripts. Des scripts tiers peuvent nuire aux performances de défilement de votre page, mais ils ne sont pas répertoriés dans votre rapport Lighthouse.
Rendre les écouteurs d'événements passifs pour améliorer les performances de défilement
Ajoutez un indicateur passive à chaque écouteur d'événements identifié par Lighthouse.
Si vous n'êtes compatible qu'avec les navigateurs compatibles avec les écouteurs d'événements passifs, ajoutez simplement l'indicateur. Exemple :
document.addEventListener('touchstart', onTouchStart, {passive: true});
Si vous êtes compatible avec d'anciens navigateurs qui ne sont pas compatibles avec les écouteurs d'événements passifs, vous devez utiliser la détection de fonctionnalités ou un polyfill. Pour en savoir plus, consultez la section Détection de fonctionnalités du document d'explication sur les écouteurs d'événements passifs du WICG.