Solución a "No usa listeners pasivos para mejorar el desplazamiento" en tu sitio web

¿Qué significa "listeners pasivos"?

El término "listeners pasivos" hace referencia a un tipo de manejadores de eventos que indican al navegador que no se va a llamar a preventDefault() en los eventos de desplazamiento o táctiles. Esto permite que el navegador continúe con el desplazamiento mientras se procesan los eventos, lo que mejora el rendimiento, especialmente en dispositivos móviles.

El problema con el uso de jQuery minificado desde un CDN

Al utilizar jQuery desde un CDN como el de Google, no puedes modificar directamente el código minificado (jquery.min.js) de la librería. Esto incluye la configuración de los listeners para eventos como touchstart, touchmove o wheel, que afectan negativamente al rendimiento en el desplazamiento. PageSpeed Insights alerta de que estos eventos deberían ser configurados como pasivos.

¿Cómo solucionar el problema sin modificar el código de jQuery?

Dado que no puedes modificar directamente el archivo minificado de jQuery, la solución consiste en agregar un script externo que sobrescriba el comportamiento de addEventListener en tu página para que los eventos de desplazamiento y táctiles sean pasivos. De esta manera, no es necesario tocar el código de jQuery directamente, pero se solucionan los problemas de rendimiento en el desplazamiento.

El código para hacer los eventos pasivos

A continuación, te mostramos un código simple que puedes incluir en tu página para sobrescribir el comportamiento de addEventListener y hacer que los eventos táctiles y de desplazamiento sean pasivos:

(function() {
    // Guardamos el addEventListener original
    var originalAddEventListener = EventTarget.prototype.addEventListener;

    // Sobrescribimos el método addEventListener
    EventTarget.prototype.addEventListener = function(type, listener, options) {
        // Verificamos si el evento es táctil o de rueda
        if (type === 'touchstart' || type === 'touchmove' || type === 'wheel') {
            // Si no se especifica opciones, se lo pasamos como { passive: true }
            options = options || {};
            options.passive = true;
        }
        // Llamamos al método original con las nuevas opciones
        originalAddEventListener.call(this, type, listener, options);
    };
})();
    

¿Dónde colocar este código en tu página?

El script debe ser colocado justo antes de la etiqueta de cierre </body> en tu HTML para asegurarte de que se ejecute después de que jQuery y otros scripts hayan sido cargados. Esto garantizará que sobrescriba los listeners de eventos de manera adecuada sin interferir con el funcionamiento de otras librerías.

Conclusión

La implementación de listeners pasivos en eventos táctiles y de desplazamiento puede mejorar significativamente el rendimiento del desplazamiento en tu sitio web, especialmente en dispositivos móviles. Si estás utilizando jQuery desde un CDN y no puedes modificar su código directamente, agregar un script externo que sobrescriba el comportamiento de addEventListener es una solución eficaz y sencilla para solucionar este problema. Al seguir los pasos descritos en este artículo, podrás mejorar la experiencia del usuario sin necesidad de modificar la librería jQuery.