Kaydırma Performansını Artırmak için Pasif İşleyicileri Kullanmıyor Hatası Nasıl Çözülür?

“Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor” hatası, Google PageSpeed Insights testinde karşılaşılan bir uyarıdır. Bu, gerçekte bir hata değil, çözüm önerisidir.

Temanızın JS dosyasına aşağıdaki kod parçacığını ekleyerek “Kaydırma Performansını Artırmak İçin Pasif İşleyicileri Kullanmıyor” sorununu çözebilirsiniz.

İki basit yöntemle bu hatayı çözebilirsiniz. Eğer bir WordPress kullanıcısıysanız, “insert js code” şeklinde bir arama yaparak Eklentiler mağazasında bulabileceğiniz bir eklentiye kodu ekleyerek hatayı gidermek mümkündür. Ancak, bir hatayı çözmek için eklenti kullanmak, genellikle site performansını olumsuz etkileyebileceği için önerilmeyen bir yöntemdir.

Bu nedenle, WordPress panelinde sol menüde bulunan “Görünüm” bölümünden “Tema Düzenleyici” seçeneğine gidebilirsiniz. Burada “theme.js” gibi dosyalara erişerek kodu ekleyebilirsiniz. Bu şekilde, hatayı çözebilirken sitenizin hızını da olumsuz etkileme riskini en aza indirebilirsiniz.

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