Не использует пассивных слушателей для повышения производительности прокрутки (Lighthouse Report)

На эту тему была длинная ветка в https://github.com/jquery/jquery/issues/2871 в 2016 г.

Суммируя:

• jQuery не может добавить поддержку пассивных слушателей.
• Ожидается, что это будет добавлено в jQuery 4 (4 года и все еще в

3. 5.x)

• Предлагаемое исправление - добавить этот код сразу после загрузки jQuery:

jQuery.event.special.touchstart = {
        setup: function( _, ns, handle ){
            this.addEventListener("touchstart", handle, { passive: true });
        }
    };

ОБНОВЛЕНИЕ 2021: добавьте следующий код после jquery. Это исправит проблему и уберет предупреждение Pagespeed.

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

Это сделало свое дело!

// Passive event listeners
jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};

Как сделать слушателей событий пассивными для повышения производительности прокрутки. Чтобы решить эту проблему:

1. Перейдите в основной файл темы.
2. Найдите header.php или вы можете использовать плагин для вставки кода в заголовок.
3. Скопируйте код и вставьте его в файл header.php.
4. Если вы собираетесь использовать код в header.php, я настоятельно рекомендую вам использовать открывающий и закрывающий теги PHP.

  <script>!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){var e,t=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}()){var n=EventTarget.prototype.addEventListener;e=n,EventTarget.prototype.addEventListener=function(n,o,r){var i,s="object"==typeof r&&null!==r,u=s?r.capture:r;(r=s?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e}(r):{}).passive=void 0!==(i=r.passive)?i:-1!==t.indexOf(n)&&!0,r.capture=void 0!==u&&u,e.call(this,n,o,r)},EventTarget.prototype.addEventListener._original=e}});</script>