Web Sitesi Performansını Artırmak İçin 10 İleri Seviye JavaScript İpuçu

1. Asenkron ve Ertelenmiş Yüklemeler
İlk ipucumuz, JavaScript dosyalarınızı asenkron hale getirmek. Normalde, tarayıcı JavaScript dosyalarını sırasıyla yükler. Bu, sayfa yükleme süresini uzatabilir. Ancak `

2. Web Worker Kullanımı
Bir web sayfasında büyük veri işleme işlemleri yapmanız gerekiyorsa, JavaScript Web Workers ile bu işlemi ana thread'den bağımsız olarak yapabilirsiniz. Bu sayede kullanıcı arayüzü tıkanmaz ve sayfa daha hızlı tepki verir.

const worker = new Worker('worker.js');
worker.postMessage("veri");

3. Lazy Loading (Tembel Yükleme)
Görselleri ve videoları yalnızca kullanıcı sayfanın belirli bir kısmına geldiğinde yüklemek, sayfanın hızını artırır. JavaScript ile lazy loading (tembel yükleme) yaparak, yalnızca görünür alanlardaki içerikleri yükleriz.

const images = document.querySelectorAll('img');
const options = {
  rootMargin: '0px 0px 50px 0px'
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, options);

images.forEach(image => {
  observer.observe(image);
});

4. JavaScript Minifikasyonu
Dosya boyutları ne kadar küçük olursa, sayfa o kadar hızlı yüklenir. JavaScript dosyalarınızı minify ederek gereksiz boşlukları, yorum satırlarını ve karakterleri temizleyebilirsiniz.

### 5. Event Delegation (Olay Delegasyonu)
Sayfanızda çok sayıda etkileşimli öğe varsa, her birine ayrı ayrı olay dinleyicisi eklemek, performansı olumsuz etkileyebilir. Bunun yerine, event delegation yöntemini kullanarak, yalnızca bir üst öğeye olay dinleyicisi ekleyebilir ve tüm alt öğelere bu olayı iletebilirsiniz.

document.querySelector('#parent').addEventListener('click', function(event) {
  if (event.target.matches('.child')) {
    console.log('Child clicked!');
  }
});

6. CSS Animasyonları İçin JavaScript Kullanımı
CSS animasyonları genellikle daha verimlidir, ancak karmaşık animasyonlar için JavaScript kullanmak gerekli olabilir. Ancak, JavaScript animasyonları zaman zaman performans sorunlarına yol açabilir. Bu yüzden sadece gerektiğinde kullanmaya dikkat edin.

### 7. Debouncing ve Throttling
Kullanıcı etkileşimleri, özellikle kaydırma ve pencere boyutu değiştirme gibi olaylar, yüksek işlem gücü gerektirir. Bu gibi olayları optimize etmek için debouncing ve throttling tekniklerini kullanarak gereksiz işlemleri engelleyebilirsiniz.

let timeout;
window.addEventListener('resize', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    console.log('Pencere boyutu değişti');
  }, 200);
});

8. Modüler JavaScript Kullanımı
Tek bir büyük dosya yerine, projeyi daha küçük modüllere ayırmak, tarayıcının sadece gerekli olan dosyaları yüklemesine olanak tanır. Bu, sayfanın hızını büyük ölçüde artırabilir.

### 9. Prefetching ve Preloading
JavaScript dosyalarının, sayfa yüklemesi sırasında değil, gelecekteki sayfalarda gerekli olacak dosyaların önceden yüklenmesi, geçiş sürelerini hızlandırır. `` ve `` etiketleri ile bu işlemi gerçekleştirebilirsiniz.

10. DOM Manipülasyonunu Azaltma
Her DOM manipülasyonu, performans kayıplarına yol açabilir. JavaScript ile DOM üzerinde işlem yaparken, mümkünse birden fazla değişikliği tek bir işlemde yapmaya çalışın ve `requestAnimationFrame` gibi fonksiyonları kullanarak render sırasında işlemlerinizi zamanlayın.

requestAnimationFrame(() => {
  document.querySelector('div').style.left = '100px';
});

### Sonuç
Web sitenizin performansı, sadece SEO açısından değil, aynı zamanda kullanıcı deneyimi açısından da kritik bir faktördür. JavaScript, doğru kullanıldığında sayfa hızınızı büyük ölçüde artırabilir. Bu ipuçları ile sitenizi optimize ederek, daha hızlı yüklenen ve daha verimli çalışan bir siteye sahip olabilirsiniz.