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.
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.
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.