JavaScript Performans Optimizasyonu: Render Blocking ve Bundle Boyutu

Modern web uygulamalarında JavaScript dosyaları toplam sayfa boyutunun %30-40'ını oluşturabilir ve tarayıcının render sürecini doğrudan etkiler. JavaScript performans optimizasyonu, render blocking sorunlarını ortadan kaldırarak, bundle boyutunu küçülterek ve gereksiz kodu elimine ederek sayfa yükleme süresini dramatik şekilde iyileştirir. Bu rehberde code splitting, tree shaking, defer/async stratejileri ve bundle analizi tekniklerini ele alıyoruz.

Render Blocking JavaScript Nedir?

Tarayıcı HTML'i parse ederken bir <script> etiketiyle karşılaştığında, varsayılan olarak HTML parse işlemini durdurur, JavaScript dosyasını indirir ve çalıştırır. Bu süre boyunca kullanıcı boş bir sayfa görür. Bu davranışa "render blocking" denir ve özellikle büyük JavaScript dosyalarında ciddi performans kaybına yol açar.

Google PageSpeed Insights'ta "Eliminate render-blocking resources" uyarısı alıyorsanız, JavaScript dosyalarınız sayfanın ilk render'ını geciktiriyor demektir. Bu durum LCP (Largest Contentful Paint) ve FID (First Input Delay) metriklerini doğrudan olumsuz etkiler.

Code Splitting ile Bundle Boyutunu Küçültme

Tek bir büyük JavaScript bundle'ı yerine, sayfaya özel küçük parçalar (chunk) oluşturmak code splitting'in temelidir. Webpack, Vite ve Rollup gibi modern bundler'lar dynamic import (import()) sözdizimini kullanarak otomatik code splitting yapabilir.

Route-Based vs Component-Based Splitting

Tree Shaking: Kullanılmayan Kodu Eleme

Tree shaking, ES module import/export analizi yaparak kullanılmayan fonksiyon ve değişkenleri bundle'dan çıkarır. Webpack 5 ve Vite bu özelliği varsayılan olarak destekler. Ancak tree shaking'in etkili çalışması için kütüphanelerin ES module formatında (ESM) olması gerekir.

Bundle Analizi ve Optimizasyon Araçları

• ✓
  webpack-bundle-analyzer: Bundle içeriğini görsel harita olarak gösterir, hangi kütüphanenin ne kadar yer kapladığını anında görürsünüz.
• ✓
  Lighthouse CI: CI/CD pipeline'ınıza entegre ederek her deploy'da JavaScript boyutunu otomatik kontrol edin.
• ✓
  Chrome DevTools Coverage: Sayfada kullanılmayan JavaScript yüzdesini gösterir, gereksiz kodu tespit etmenize yardımcı olur.

Bundle boyutunu analiz etmek için Bundlephobia aracını kullanarak npm paketlerinin boyutunu önceden kontrol edebilirsiniz. Ayrıca web.dev LCP optimizasyon rehberi JavaScript'in LCP üzerindeki etkisini detaylı açıklar.

Sıkça Sorulan Sorular

defer ve async arasındaki fark nedir?

defer, script'i arka planda indirir ve HTML parse tamamlandıktan sonra sırayla çalıştırır. async ise script'i arka planda indirir ve indirme bittiği anda çalıştırır — sıra garantisi yoktur. Bağımlılıkları olan script'ler için defer, bağımsız analytics script'leri için async kullanın.

İdeal JavaScript bundle boyutu ne kadar olmalı?

İlk yükleme için kritik JavaScript 150 KB'ın (gzip) altında tutulmalıdır. Toplam JavaScript boyutu 300-400 KB'ı geçmemelidir. Bu değerlerin üzerindeyseniz code splitting ve tree shaking ile optimizasyon yapmanız gerekir.

Third-party script'ler performansı ne kadar etkiler?

Google Analytics, chat widget'ları ve reklam script'leri toplam JavaScript boyutunun %40-60'ını oluşturabilir. Bu script'leri async ile yükleyin, mümkünse lazy load edin ve gerçekten ihtiyaç duymadığınız üçüncü parti araçları kaldırın. Her eklenen script, sayfa yükleme süresine 100-500 ms ekleyebilir.

Sayfa performansı hakkında daha fazla bilgi için Core Web Vitals Optimizasyon Rehberi yazımızı okuyun. Görsel optimizasyonu için WebP ve AVIF Rehberi makalemize göz atın. Google PageSpeed puanınızı artırmak için PageSpeed Insights Rehberini inceleyin.