Les écouteurs d'événements tactiles et de la roue 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 de la page. Actuellement, les navigateurs ne peuvent pas savoir si un écouteur d'événements empêchera le défilement. Ils attendent donc toujours que l'écouteur ait terminé son exécution 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êchera 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 susceptibles de 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:
- Collectez tous les écouteurs d'événements de la page.
- Filtrez les écouteurs non tactiles et non à roulette.
- Filtrez les écouteurs qui appellent
preventDefault(). - Filtrez les écouteurs provenant d'un hôte différent de la page.
Lighthouse filtre les écouteurs de différents hôtes, car vous ne contrôlez probablement pas ces scripts. Il se peut que des scripts tiers nuisent aux performances de défilement de votre page, mais ils ne sont pas listé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énement identifié par Lighthouse.
Si vous n'acceptez que les navigateurs compatibles avec les écouteurs d'événements passifs, ajoutez simplement l'indicateur. Exemple :
document.addEventListener('touchstart', onTouchStart, {passive: true});
Si vous prenez en charge des navigateurs plus anciens qui ne sont pas compatibles avec les écouteurs d'événements passifs, vous devrez 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 de la WICG.