Web’de gezinirken, kullanıcılar özellikle içerik ağırlıklı sayfalarda kaydırma yaparken sorunsuz ve akıcı bir deneyim beklerler. Sayfa performans denetimleri yapmak için güçlü bir araç olan Google Lighthouse, genellikle kullanıcı deneyimini düşürebilecek sorunları işaretler. Bu sorunlardan biri olan “kaydırma performansını iyileştirmek için pasif dinleyiciler kullanılmıyor” ifadesi, sayfa etkileşimini önemli ölçüde etkileyebilir. Bu yazıda, pasif olay dinleyicilerini, kaydırma performansı için önemlerini ve bunları etkili bir şekilde uygulamak için atılması gereken pratik adımları inceleyeceğiz.
Kaydırma performansını artırmak için pasif işleyicileri kullanmıyor hatası nedir ve kaydırma performansı neden önemlidir?
Pasif Event Dinleyicilerini Anlamak
Pasif event dinleyicileri, tarayıcıya event işleyicinin preventDefault() yöntemini çağırmayacağını bildiren bir event dinleyici türüdür. Bu bilgi önemlidir çünkü tarayıcının etkinliğin işlenmesini optimize etmesine, böylece sorunsuz bir kaydırma deneyimi sağlama yeteneğini geliştirmesine olanak tanır. Bir event dinleyici pasif olarak işaretlendiğinde, tarayıcı, event işleyicisinin yürütülmesini beklemek zorunda kalmadan hemen varsayılan davranışına devam edebilir ve bu da kaydırma performansını önemli ölçüde daha sorunsuz hale getirir.
Kaydırma Performansına Etkisi
Event dinleyicileri, özellikle dokunma ve kaydırma olayları için, bazen gecikmeye neden olabilir. Bu gecikme, “jank” olarak adlandırılır ve sayfanın takılmasına veya tepkisiz görünmesine sebep olur. Pasif event dinleyicileri kullanarak, kaydırma performansının bu gecikmelerden etkilenmemesini sağlarsınız. Google Lighthouse raporu sayfanızın “kaydırma performansını iyileştirmek için pasif dinleyicileri kullanmadığını” belirtiyorsa, web sitenizin etkileşiminin geliştirilebileceği ve bu sayede daha iyi bir kullanıcı deneyimi sunulabileceği anlamına gelir.
Kaydırma performansını artırmak için pasif işleyicileri kullanmıyor sorunu nasıl çözülür?
Manuel Kod Ekleyerek Düzenleme Yöntemi;
Bu uyarıyı alıyorsanız, endişelenmeyin! Bu sorunu çözmek ve sitenizin kaydırma performansını optimize etmek için yapabileceğiniz basit bir işlem var: Pasif event dinleyicileri kullanmak, bunun için aşağıdaki kodu sitenize ekleyerek sorunu çözebilirsiniz.
(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;
}
})();
Pasif event dinleyicileri, tarayıcının sayfanın kaydırılmasını event işleyicilerinizin çalışmasını beklemeden gerçekleştirmesine olanak tanır. Bu sayede, daha akıcı ve duyarlı bir kaydırma deneyimi elde edersiniz.
Third-Party Araç veya Eklenti Kullanımı
Pasif olmayan olay dinleyicileri sorununu tanımlamanıza ve çözmenize yardımcı olabilecek çeşitli üçüncü taraf araçlar ve eklentiler mevcuttur. WebPageTest ve tarayıcı uzantıları gibi araçlar bu dinleyicilerin tespit edilmesinde etkili olabilir. Ek olarak, bazı WP-Rocket gibi eklentiler bu tür sorunları otomatik olarak tespit edip işaretleyecek şekilde tasarlanmıştır; bu, geliştiricilerin web sitelerinin optimize edilmiş kalmasını sağlarken daha yüksek öncelikli görevlere odaklanmasını kolaylaştırır.
Sorunu Düzeltirken Farklı Sorunlara Yol Açmayın: Kontrol!
Kodunuzu güncelledikten sonra uyumluluğu sağlamak için bu değişiklikleri farklı tarayıcılarda test etmeniz önemlidir. Bazı eski tarayıcılar pasif olay dinleyicilerini tam olarak desteklemeyebilir; bu, geri dönüş mekanizmalarının mevcut olduğundan emin olmak için özellik algılama uygulamanız gerekebileceği anlamına gelir. Bu, kullandıkları tarayıcıdan bağımsız olarak tüm kullanıcıların herhangi bir işlevsellik kesintisi olmadan gelişmiş kaydırma performansı yaşamasını sağlar.
Özellikle e-ticaret sitelerinde üye giriş, kayıt, ödeme ve hesabım gibi sayfalara eklememenizi öneririz.
