Giriş YapYazar OL

EDOFHI

EDOFHI Logo EDOFHI Logo

EDOFHI Navigation

  • Ana Sayfa
  • İletişim
Ara
Yazar Hesabı Oluştur

Mobile menu

Close
Bir Başlık Aç
  • Makaleler
  • Başlıklar
  • Kategoriler
  • Site İçi Detaylı Arama
  • Yazarlar
  • Yazar İtibar Puanı Sistemi
Ana Sayfa/ Başlıklar/Başlık 772
İletiye Açık
Burak OranKatılımcı Yazar
Başlık Tarihi: Ekim 2, 20202020-10-02T19:17:39+03:00 2020-10-02T19:17:39+03:00Kategori: Wordpress

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

Google page speed insights’ın web site performansınızı geliştirmeniz adına verdiği uyarılardan, daha doğrusu önerilerden birtanesi de “Kaydırma performansını artırmak için pasif işleyicileri kullanmıyor” şeklinde bir uyarı.

Bu uyarı ile ben de karşılaşınca ve çözüm adına uyguladığım adımlar sonuç verince bu başlıkta bu çözümü ayrıca ihtiyacı olabilecekler için paylaşmak istedim. Çözümü başlığın altına ileti olarak gireceğim. Alternatif başka bir çözümünüz varsa pekala siz de bu başlık altına ileti olarak girebilirsiniz.

  • 4
  • 1 1 İleti
  • 0 Takipçi
  • 0
  • Paylaş
    Paylaş
    • Paylaş Facebook
    • Paylaş Twitter
    • Paylaş LinkedIn
    • Paylaş WhatsApp

1 İleti

  • En Eski
  • En Yeni
  • Beğeniye Göre
  1. Burak Oran Katılımcı Yazar wordpress uzmanı
    2020-10-02T19:27:59+03:00İleti Girdi Tarihi: Ekim 2, 2020 Saat: 19:27
    Bu ileti düzenlenmiştir.

    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;
      }
    })();
    • 5
    • Paylaş
      Paylaş
      • Paylaş Facebook
      • Paylaş Twitter
      • Paylaş LinkedIn
      • Paylaş WhatsApp
    • 1 Yorum
    • Gürcan İNAN Katılımcı Yazar
      2020-10-13T21:23:34+03:00Yorum İletisi Girdi Tarihi: Ekim 13, 2020 Saat: 21:23
      Bu ileti düzenlenmiştir.

      Bir ekleme yapayım. Temanızda custom.js dosyası yoksa yukarıda verilen kodu direkt temanızın main.js dosyasına ekleyebilirsiniz. Eğer temanızda performans için main.js yerine min.js dosyası kullanılıyorsa bu kodu buradan sıkıştırıp min.js dosyasına ekleyebilirsiniz.

      • 4
      • Paylaş
        Paylaş
        • Paylaş Facebook
        • Paylaş Twitter
        • Paylaş LinkedIn
        • Paylaş WhatsApp

Başlığa ileti girmek için yazar girişi yapmanız gerekmektedir.

Buraya şunu yazınız → ( ankara )

Şifremi Unuttum?

Yazar Mı Olmak İstiyorsunuz? Yazar Hesabı Oluştur

Sidebar

Edofhi’de bilgi ve tecrübe paylaşımı odaklı istediğiniz her konuda başlık açabilirsiniz.

Yazar Hesabı Oluştur
Bir Makale Yayımla

Edofhi İstatistikleri

  • Başlık 47
  • İleti 78
  • Makale 6
  • Yazar 36

Explore

  • Makaleler
  • Başlıklar
  • Kategoriler
  • Site İçi Detaylı Arama
  • Yazarlar
  • Yazar İtibar Puanı Sistemi

© 2020 Edofhi.com Tüm Hakları Saklıdır & All Rights Reserved | Edofhii.com'da yer alan tüm içerikler 5846 Sayılı Fikir ve Sanat Eserlerini Koruma Kanunu'na istinaden koruma altındadır. Edofhi.com'da yer alan tüm içerikler edofhi.com yazarları ve site yönetimi tarafından tamamen özgün bir şekilde oluşturulmaktadır. Edofhi.com'da yer alan hiçbir içerik (yazı, fotoğraf, video vb.) site kullanım şartlarında da belirtildiği üzere izinsiz olarak kopyalanamaz, alıntı yapılamaz, başka yerde yayınlanamaz. Bu durumu ihlal edenler hakkında suç duyurusunda bulunulup, yasal işlem başlatılacaktır.
KVKK | Gizlilik ve Çerez Politikaları | Üyelik ve Kullanım Sözleşmesi | Site ve Yazarlık Kuralları