Kaydırma Performansı Nasıl Arttırılır?

Kaydırma Performansı Nedir: İnternet sitelerinin mobil sürümlerinde kullanıcıların sayfayı kaydırmalarının kolaylık ölçüsünü ifade eden bir çeşit metriktir. Kullanıcılar kaydırma performansı olan yüksek sayfaları kaydırırken sayfanın alt kısımlarına daha az zahmet göstermek suretiyle ulaşabilirler.

Yüksek kaydırma performansı; kullanıcıları sinir etmeden iyi bir izlenim bırakmak ve iyi bir kullanıcı deneyimi yaşatmak için gereklidir. Nasılsa kimse uzun bir içeriğin en sonuna ulaşmak için çılgınlar gibi ekranı kaydırmak istemez değil mi? İşte bu yazıda da kaydırma performansını arttırmak için pasif işleyicileri kullanmıyor sorunu hakkında sebepleriyle açıklanmış detaylı çözüm önerileri bulacaksınız.

Kaydırma Performansı Nasıl Arttırılır?

1- Yüksek Kaydırma Performansı Örneği

Örnek: Aynı internet sitesinin yüksek ve düşük kaydırma performansına sahip olan sürümlerini, aynı mobil cihazda parmağımızla aynı miktarda kaydırdığımızda, kaydırma performansı optimize edilmiş yani daha yüksek olan sürümde diğerine göre daha fazla kayma olduğunu görürüz. Bu deneyin görsel hali aşağıdaki görseldeki gibidir:

2- Teknik Bilgiler ve Açıklamalar

Normal şartlarda mobil cihazlarda (akıllı telefon, tablet ve benzeri cihazlar mobil cihazlardır) parmağınızla bir internet sayfasını kaydırdığınızda sayfanın parmağınız ile beraber hareket etmesi gerekmektedir. Fakat eğer ilgili optimizasyonların yapılmamış olduğu durumlarda sayfa parmak ile beraber hareket etmez ve pek çok seferinde harekette gecikmeler olur.

Günümüz şartlarında (2020), internet tarayıcıları bir dokunma olayı dinleyicisinin (algılayıcısının) kaydırma işlemini iptal edip etmeyeceğini bilemez ve bu nedenle de sayfayı kaydırmadan önce genellikle dinleyicinin bitmesini beklerler. İşte bundan dolayı da bu gecikme sorunu ortaya çıkar ve bu da hiç şüphesiz kullanıcı deneyimini olumsuz yönde etkiler.
(Ayrıca Bakınız: Kullanıcı Deneyimi (UX) Nedir? Nasıl Geliştirilir?)

JavaScript programlama dilinin pasif olay dinleyicilerinin ayarlar parametreleri arasında dinleyicinin kaydırma işlemini hiçbir zaman iptal etmeyeceğini belirten bir etiket olan {passive: true} etiketinin kullanılması işte bu sorunu çözer. Bu etiketin kullanılması, tarayıcıların dinleme işlemi bittikten sonra sayfayı hemen kaydırmasını sağlar. Bu parametrenin örnek kullanımı aşağıdaki görseldeki gibidir:

3- Passive İşaretleme Nasıl Yapılır?

.#. “Passive: true” işaretlemesinin yapılmadığı, yani başka bir ifadeyle optimize olmayan dosyaları manuel olarak elinizle tek tek bulmak yerine, Google Pagespeed aracı ile sitenizi teste sokun. Eğer optimize olmayan dosyalar varsa, o dosyaların linkleri ve sıkıntı satır numaraları ile beraber size şu tarz bir hata mesajı verecektir:

Kaydırma Performansını Arttırmak İçin Pasif İşleyicileri Kullanmıyor: Sayfanızın kaydırma performansını artırmak için dokunma ve ve tekerlek etkinliği işleyicilerini ‘passive’ olarak işaretlemeyi değerlendirin.

.#. İlgili hata mesajını aldıysanız, ilk olarak sunucudaki önbellekleme özelliklerini kapatın. Daha sonra sunucu yönetim paneli (cPanel, Plesk vb…) aracılığıyla site dosyalarınızın arasından optimize olmayan dosyaları bulun ve ilk başta onları her ihtimale karşı yedekleyin. Daha sonra ilgili dosyaları açıp, o dosyalarda test aracında size verilen sıkıntılı satırları bulun.

.#. Sıkıntılı satırlarda .addEventListener ve .removeEventListener komutlarının olduğu yerleri bulun. Bu komutların yanında parantez içerisinde ki ilgili parametreyi {passive: true} olarak değiştirin. Tüm işaretlemeleri yaptıktan sonra, sitenizi tekrardan teste sokup sorunun çözülüp çözülmediğini görebilirsiniz. Parametre düzeltme örnekleri aşağıdaki gibidir:

// Hatalı Örnekler
Örnek-1: document.addEventListener('touchStart', onTouchStart, !1)
Örnek-2: document.removeEventListener('start', startScroll)
Örnek-3: document.addEventListener(o, c)
// Düzeltilmiş Örnekler
Örnek-1: document.addEventListener('touchstart', onTouchStart, {passive: true})
Örnek-2: document.removeEventListener('start', {passive: true})
Örnek-3: document.addEventListener(o, {passive: true})