Les écouteurs d'événements tactiles et de 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 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 fini de s'exécuter 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 Compatibilité du navigateur.
Échec de l'audit Lighthouse sur les écouteurs d'événements passifs
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 :
- Collectez tous les écouteurs d'événements sur la page.
- Filtrer les écouteurs non tactiles et non rotatifs.
- Filtrez les écouteurs qui appellent
preventDefault(). - Filtrer 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. Il est possible 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 ne prenez en charge que les navigateurs compatibles avec les écouteurs d'événements passifs, il vous suffit d'ajouter le flag. Exemple :
document.addEventListener('touchstart', onTouchStart, {passive: true});
Si vous utilisez 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 explicatif Écouteurs d'événements passifs de WICG.