Bilgisayar Mühendisliği

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

Kaydırma Performansı Nedir: Kullanıcıların internet sitelerinin mobil sürümlerinde 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 zahmetle 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?

-Reklam-

İş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. Lafı uzatmadan konuya geçelim.

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

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

Örnek: Aynı internet sitesini, aynı mobil cihazda parmağımızla aynı miktarda kaydırdığımızda, kaydırma performansı optimize edilmiş olan sürümde optimize olmayan sürüme göre daha fazla kaymış olduğunu görürüz. Mesela şu görsel bu duruma örnek olarak verilebilir:

Dokunma ve Tekerlek Etkinliği İşleyicileri Passive Olarak İşaretlenerek Kaydırma Performansı Arttırılabilir
Dokunma ve Tekerlek Etkinliği İşleyicileri Passive Olarak İşaretlenerek Kaydırma Performansı Arttırılabilir

2- Teknik Bilgiler ve Açıklamalar

Normal şartlarda mobil cihazlarda bir sayfayı kaydırdığınızda sayfanın parmağınız ile beraber hareket etmesi gerekir. Fakat optimize olmayan durumlarda sayfa parmak ile beraber hareket etmez ve defalarca kez gecikme olur.

Günümüz şartlarında, internet tarayıcıları bir dokunma olayı dinleyicisinin kaydırma işlemini iptal edip etmeyeceğini bilemez ve bu nedenle sayfayı kaydırmadan önce her zaman dinleyicinin bitmesini beklerler. İşte bundan dolayı da bu gecikme sorunu ortaya çıkar.

-Reklam-

         

Pasif olay dinleyicileri, addEventListener’ın ayarlar parametresinde dinleyicinin kaydırma işlemini hiçbir zaman iptal etmeyeceğini belirten bir etiket ({passive: true}) ayarlamanızı sağlayarak bu sorunu çözer. Bu bilgiler, tarayıcıların dinleyici bittikten sonra sayfayı hemen kaydırmasını sağlar. Bu parametrenin örnek kullanımı şu şekildedir:

Kaydırma Performansını Arttırmak İçin Pasif İşleyicileri Kullanma Örneği
Kaydırma Performansını Arttırmak İçin Pasif İşleyicileri Kullanma Örneği

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

.#. Optimize olmayan dosyaları elinizle tek tek bulmak yerine, Google Pagespeed aracı ile sitenizi teste sokun. Eğer optimize olmayan dosyalar varsa, o dosyaların linkleri 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.

-Reklam-

💡 Profesyonel İpucu: Optimize olmayan sayfaları ararken Google Pagespeed ile test yapıyorsanız, daha iyi bir sonuç almak için kullanıcı yorumlarının bulunduğu sayfalara test yapınız. Çünkü yorumlarla ilgili sorun çıkarma potansiyeli olan özel bir JavaScript dosyası bulunmaktadır.

Kaydırma Performansını Arttırmak İçin Pasif İşleyicileri Kullanmıyor Hatası Olan Tüm Dosyaları Bulabilmek İçin Yorum Olan Bir Sayfanızı Teste Sokun
Kaydırma Performansını Arttırmak İçin Pasif İşleyicileri Kullanmıyor Hatası Olan Tüm Dosyaları Bulabilmek İçin Yorum Olan Bir Sayfanızı Teste Sokun

.#. İlgili hata mesajını aldıysanız, ilk olarak sunucudaki önbellek eklentilerini kapatın. Daha sonra sunucu yönetim paneli (cPanel, Plesk…) 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 .addEventListener komutunun olduğu şu formatta olan kısımları bulun:

// Optimize Olmayan Kaydırma Performansı
Format-1: .addEventListener('Tırnakİçiİfade', Tırnaksızİfade, Parametre)
Örnek: document.addEventListener('touchStart', onTouchStart, !1)
Format-2: .addEventListener('Tırnakİçiİfade', Tırnaksızİfade)
Örnek: document.addEventListener('start', startScroll)
Format-3: .addEventListener(Tırnaksızİfade, Tırnaksızİfade)
Örnek: document.addEventListener(o, c)

.#. Bu formatta olan kısımlarda parantez içindeki üçüncü parametreyi {passive: true} olarak değiştirin. (Zaten passive değilse genellikle !0 ve !1 olur.) Tüm işaretlemeleri yaptıktan sonra, sitenizi tekrardan teste sokup sorunun çözülüp çözülmediğini görebilirsiniz.

// Optimize Yüksek Kaydırma Performansı
Format: .addEventListener('Tırnakİçiİfade', Tırnaksızİfade, {passive: true})
Örnek: document.addEventListener('touchstart', onTouchStart, {passive: true});

Technogezgin.com Bilgi
Kaydırma performansı nasıl arttırılır” konulu yazımız hakkında eklemek istediklerinizi, sorularınızı ve (eğer varsa) yazıdaki yanlışları yorumlarda belirtebilirsiniz.

Bilgi güçtür, paylaştıkça büyür. Bu sebeple bu yazıyı da; yazının altındaki (logolu) paylaşım tuşlarını kullanarak gönül rahatlığı ile paylaşarak bize büyük bir iyilik yapabilirsiniz.

-Reklam-

         

Ana Sayfa: 
https://www.technogezgin.com/
Hayata Dair Özgün ve Kaliteli Yazılarımız: 
https://www.technogezgin.com/blog/

MrKaptanTR

Hacettepe Üniversitesi'nde bilgisayar mühendisliği öğrencisi, aynı zamanda technogezgin.com internet sitesinin de kurucusu. Kafaları açan, bilgi hazinelerine değer katan, bakış açılarını adeta uçuran, “Vay be, adamlar bunu da mı yapmış?” dedirtecek cinsten içerikler üretmeye çalışan birisi.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı