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

Bu aslında google page speed insights’ın da verdiği öneride / uyarıda da adı üzerinde kaydırma işlevi ile illgili bir çözüm önerisi. Daha doğrusu bir iyiileştirme önerisi.

Google’ın “Kaydırma performansını artırmak için pasif işleyicileri kullanmıyor” önerisinde kastı, eğer js kodlarınızda “passive event listeners” kullanırsanız, Yani evet listeners’ı passive yaparsanız, kullanıcıların mobil sayfa görüntülerken yaptıkları scroll, yani kaydırma işlevini daha akıcı (smooth) hale getirebilirsiniz deniliyor.

Nasıl daha akıcı hale geliyora passive event listeners kullanılan ve kullanılmayan web sayfalarında mobil kaydırmanın nasıl gerçekleştiğini, aradaki farkın nasııl göründüğü şu videoda çok güzel bir şekilde aktarmışlar.

Çözüm olarak ise ben şu kaynaktan yararlandım. Kaynağa tabi ki bakabilirsiniz. Ancak ben çözümü kısa özet geçeceğim. Js kodu olarak aşağıda paylaştığım kod ile otomatik olarak bu event listeners için passive atamasını sitenizde tüm gerekli yerlere toplu bir şekilde yaptırabiliyorsunuz.

Eğer kodu nereye ve nasıl ekleyeceğinizi bilmiyorsanız, wordpress tema kodlarınız içerisinde js klasörü altında js kod dosyalarınız bulunacaktır. Bu kodlar içerisinde de çok büyük ihtimalle tema kodlayıcısı tarafından custom.js ismi ile oluşturulmuş bir js kod dosyası olacaktır. İşte, altta paylaştığım bu kodu custom.js dosyanıza eklemeniz yeterli olacaktı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;
  }
})();