Los objetos de escucha de eventos de rueda y táctiles son útiles para hacer un seguimiento de las interacciones del usuario y crear experiencias de desplazamiento personalizadas, pero también pueden retrasar el desplazamiento de la página. Actualmente, los navegadores no pueden saber si un objeto de escucha de eventos evitará el desplazamiento, por lo que siempre esperan a que el objeto de escucha termine de ejecutarse antes de desplazar la página. Los objetos de escucha de eventos pasivos resuelven este problema, ya que te permiten indicar que un objeto de escucha de eventos nunca impedirá el desplazamiento.
Compatibilidad del navegador
La mayoría de los navegadores admiten objetos de escucha de eventos pasivos. Consulta Compatibilidad del navegador
Cómo falla la auditoría del objeto de escucha de eventos pasivo de Lighthouse
Lighthouse marca los objetos de escucha de eventos que pueden retrasar el desplazamiento de la página:
Lighthouse usa el siguiente proceso para identificar los objetos de escucha de eventos que pueden afectar el rendimiento del desplazamiento:
- Recopila todos los objetos de escucha de eventos en la página.
- Filtra los objetos de escucha que no son de rueda ni táctiles.
- Filtra los objetos de escucha que llaman a
preventDefault(). - Filtra los objetos de escucha que provienen de un host diferente al de la página.
Lighthouse filtra los objetos de escucha de diferentes hosts porque es probable que no tengas control sobre estos secuencias de comandos. Es posible que haya secuencias de comandos de terceros que perjudiquen el rendimiento de desplazamiento de tu página, pero no se enumeran en tu informe de Lighthouse.
Cómo hacer que los objetos de escucha de eventos sean pasivos para mejorar el rendimiento del desplazamiento
Agrega una marca passive a cada objeto de escucha de eventos que identificó Lighthouse.
Si solo admites navegadores que admiten objetos de escucha de eventos pasivos, solo agrega la marca. Por ejemplo:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Si ofreces compatibilidad con navegadores anteriores que no admiten objetos de escucha de eventos pasivos, deberás usar la detección de funciones o un polyfill. Consulta la sección Detección de funciones del documento explicativo Objetos de escucha de eventos pasivos del WICG para obtener más información.