Los objetos de escucha de eventos táctiles y de la rueda 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 impedirá 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.
Por qué falla la auditoría del objeto de escucha de eventos pasivos 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 de la página.
- Filtra los objetos de escucha que no son táctiles ni funcionan con la rueda del mouse.
- 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 probablemente no tienes control sobre estas secuencias de comandos. Es posible que haya secuencias de comandos de terceros que estén dañando el rendimiento del desplazamiento de tu página, pero estas no se incluyen 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 admites navegadores más antiguos que no admiten objetos de escucha de eventos pasivos, deberás usar la detección de atributos o un polyfill. Consulta la sección Feature Detection del documento explicativo de gestores de eventos pasivos de WICG para obtener más información.