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.
