𝟳 𝗛𝗶𝗱𝗱𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸𝘀
Yavaş web uygulamaları nadiren kötü algoritmalardan dolayı başarısız olur. Başarısızlıkları, kodunuzun tarayıcıyla nasıl iletişim kurduğundan kaynaklanır.
300'den fazla canlı uygulamayı analiz ettim. Performans sorunlarının %73'ünün bu 7 kaynaktan geldiğini buldum.
Layout thrashing Bu durum, bir düzen (layout) özelliğini okuyup hemen ardından DOM'a yazdığınızda gerçekleşir. Bu, tarayıcıyı düzeni birden fazla kez yeniden hesaplamaya zorlar. • Etki: %40-60 daha yavaş işleme (rendering). • Çözüm: Önce tüm okuma işlemlerini gruplandırın. Ardından tüm yazma işlemlerini requestAnimationFrame kullanarak gruplandırın.
Unbounded event listeners Bir dinleyiciyi (listener) kaldırmadan eklemek bellek sızıntılarına (memory leaks) neden olur. Bu, tek sayfa uygulamalarında (SPA) büyük bir sorundur. • Etki: Saat başına %15-30 bellek artışı. • Çözüm: Bir bileşen unmount olduğunda dinleyicileri temizlemek için bir AbortController kullanın.
Synchronous DOM reads in loops DOM'a yazma işlemi de yapan bir döngü içinde offsetWidth gibi özellikleri okumak, sürekli reflow (yeniden düzenleme) işlemlerine neden olur. • Etki: %20-40 kare düşüşü (frame drops). • Çözüm: Döngü başlamadan önce düzen değerlerinizi bir değişkende önbelleğe alın.
Missing requestAnimationFrame batching Kaydırma (scroll) veya yeniden boyutlandırma (resize) olaylarındaki doğrudan DOM değişiklikleri çok sık tetiklenir. • Etki: Kaydırma sırasında %10-25 takılma (jank). • Çözüm: Boyama (paint) döngüsüyle senkronize olmak için scroll işleyicilerinizi requestAnimationFrame içine alın.
Large JSON.parse calls Devasa JSON dosyalarını ayrıştırmak (parsing) ana iş parçacığını (main thread) bloke eder. Bu da girdi gecikmesine (input lag) neden olur. • Etki: Çağrı başına 50-200ms donma. • Çözüm: Verileri ana iş parçacığı dışında ayrıştırmak için Web Workers kullanın.
Complex CSS selector matching Derinlemesine iç içe geçmiş veya karmaşık seçiciler, stil yeniden hesaplamalarını yavaşlatır. • Etki: %5-15 ekstra stil hesaplama süresi. • Çözüm: CSS yapınızı basitleştirin ve daha düz (flatter) seçiciler kullanın.
Duplicate bundle chunks Optimize edilmemiş bundle'lar bant genişliğini boşa harcar. • Etki: 100-500KB boşa harcanan veri transferi. • Çözüm: Yinelenen kodları bulup kaldırmak için webpack-bundle-analyzer gibi araçlar kullanın.
İlerlemenizi nasıl ölçersiniz: • Chrome DevTools'u açın ve Performance sekmesine gidin. • 5 saniyelik bir oturum kaydedin. • Main flame chart içindeki uzun görevleri (long tasks) inceleyin. • Bir düzeltme uygulayın ve Rendering ile Painting sürelerini karşılaştırın.
Core Web Vitals puanlarınızı iyileştirmek için bu alanlara odaklanın.