[Çözüm] Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor!

Benzer Konular

Pagespeed aracının son zamanlarda bazı sitelerde uyarı&tavsiye niteliğinde vermiş olduğu ve kullanıcı deneyimi açısından son derece önemli olan "Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor" sorununu bu yazıda çözüyoruz.

Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor!

Dokunmatik cihazlarda, parmağınız ile tarayıcı ekranını hareket ettirdiğinizde hiçbir gecikme olmadan ekranda sizin hareketinize paralel bir biçimde gecikmesiz olarak hareket etmelidir. Aşağıda yer alan resimde de görebileceğiniz üzere kaydırma hızı, web siteleri açısından son derece önemli bir ölçüttür.

aynı anda hareket etmelerine rağmen kaydırma performansları farklı olan site.

Fakat, kaydırma performansını artırmak için pasif işleyicileri kullanmıyor hatası alan bu sitelerde gerekli optimize işlemi yapılmadığı için kullanıcı deneyimi (UX) açısından son derece sıkıntılı olan bu durum ortaya çıkabilmektedir. 

"Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor" Çözümleri

Bu sorunu elle tek tek düzeltmek mümkün olsa bile aşağıda yer alan kodu, wordpress tema ayarlarınızdan custom.js dosyasına yapıştırmanız yeterli olacaktır. Bu sayede sitenizdeki toplu olarak tüm sorunlu kodlara işlem uygulayacaktır. 

(function() {
  var supportsPassive = eventListenerOptionsSupported();  

  if (supportsPassive) {
    var addEvent = EventTarget.prototype.addEventListener;
    overwriteAddEvent(addEvent);
  }

  function overwriteAddEvent(superMethod) {
    var defaultOptions = {
      passive: true,
      capture: false
    };

    EventTarget.prototype.addEventListener = function(type, listener, options) {
      var usesListenerOptions = typeof options === 'object';
      var useCapture = usesListenerOptions ? options.capture : options;

      options = usesListenerOptions ? options : {};
      options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
      options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

      superMethod.call(this, type, listener, options);
    };
  }

  function eventListenerOptionsSupported() {
    var supported = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supported = true;
        }
      });
      window.addEventListener("test", null, opts);
    } catch (e) {}

    return supported;
  }
})();
Temel olarak yaptığımız işlem, sitenizde yer alan passive sorgusunu true ile değiştirerek kaydırma işleminin hiçbir zaman iptal edilmeyeceği komutunu eklemektir. 

Eğer bu işlem sizde işe yaramadıysa bir diğer çözüm yolu ise farklı bir kaynaktan alınan diğer bir kodu denemektir. Aşağıda yer alan kod parçasını bilgisayarınıza .JS dosyası olarak kaydettikten sonra, sitenizin .JS dosyalarının arasına atmalısınız. Daha sonra kodu temanızın  <head> - </head> arasına yerleştirin. 

!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}});

Ve tüm işlem bu kadar. Eksik gördüğünüz ya da yapamadığınız yerler için yorumlar bölümünü kullanabilirsiniz. 

https://www.mustafavarol.com/wordpress-kaydirma-performansini-artirmak-icin-pasif-isleyicileri-kullanmiyor/ 
https://edofhi.com/baslik/cozum-kaydirma-performansini-artirmak-icin-pasif-isleyicileri-kullanmiyor/

Teknoloji meraklısı ve lise öğrencisi bir gencim.

Yazıyı paylaş