Los objetos de escucha de eventos táctiles y de la rueda del mouse 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 desplazarse por 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 evitará el desplazamiento.
Compatibilidad del navegador
La mayoría de los navegadores admiten objetos de escucha de eventos pasivos. Consulta Compatibilidad con los navegadores
Cómo 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 y que no son de rueda.
- Filtra los objetos de escucha que llaman a
preventDefault(). - Filtra los objetos de escucha que pertenecen a 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 estas secuencias de comandos. Es posible que existan secuencias de comandos de terceros que estén afectando el rendimiento del desplazamiento de tu página, pero 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 haya identificado 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 funciones o un polyfill. Consulta la sección Detección de funciones del documento de explicación de Objetos de escucha de eventos pasivos de WICG para obtener más información.