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. de modo 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 permitiéndote 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 del navegador.
Cómo falla la auditoría del objeto de escucha de eventos pasivo de Lighthouse
Faro marca los objetos de escucha de eventos que pueden retrasar el desplazamiento de la página:
Lighthouse usa el siguiente proceso para identificar objetos de escucha de eventos que podrían 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 de 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. Puede haber secuencias de comandos de terceros que afecten el rendimiento del desplazamiento de tu página pero no aparecen en el 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, tendrás que usar la detección de funciones o un polyfill. Consulta la Detección de funciones de la sección Objetos de escucha de eventos pasivos de WICG para obtener más información.