Les écouteurs d'événements tactiles et à 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 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êchera jamais le défilement.
Compatibilité du navigateur
La plupart des navigateurs acceptent les écouteurs d'événements passifs. Voir Compatibilité du navigateur
Échec de l'audit de l'écouteur d'événements passifs Lighthouse
Phare Indique 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 autres que les écouteurs.
- 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 parce que vous n'avez probablement pas de contrôle sur 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énements identifié par Lighthouse.
Si vous n'utilisez que des 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. Consultez le Détection de fonctionnalités de la section des écouteurs d'événements passifs de WICG document explicatif.