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. Si te interesa profundizar más sobre errores comunes de validación CSS, puedes revisar este artículo sobre errores comunes de validación CSS con W3C en Kolectiva.
¿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. Si estás buscando una manera eficiente de optimizar imágenes en tu sitio web, te recomiendo leer este artículo sobre cómo usar CDNs para imágenes con Imgix.
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.
