Ön uç ve sunucu arasındaki veri miktarını azaltmak için hangi optimizasyon yöntemleri vardır?

• Veri Sıkıştırma: Sunucuda, verileri istemciye göndermeden önce gzip, Brotli gibi sıkıştırma algoritmaları kullanılması.

• Minifikasyon ve obfuscation: Gereksiz karakterlerin (boşluklar, satır sonları) kaldırılması ve JS, CSS, HTML dosyalarındaki değişken isimlerinin yeniden adlandırılması.

• Lazy Loading (Tembel Yükleme): Kaynakların (resimler, bileşenler, modüller) yalnızca ihtiyaç duyulduğunda yüklenmesi, sayfa ilk yüklemesinde değil.

• Tree Shaking (Ağaç Sarsma): Derleme araçları (Webpack, Rollup) bağımlılıkları analiz ederek kullanılmayan kodu paket dışına çıkarabilir.

• Görüntü Optimizasyonu:

  • Modern formatların kullanımı (WebP, AVIF).
  • Kayıplı veya kayıpsız sıkıştırma.
  • Duyarlı görüntüler (<picture> veya srcset).
  • Lazy yükleme (loading="lazy").

• Önbellekleme:

  • Tarayıcı tarafında önbellekleme (HTTP önbellek başlıkları).
  • API verilerinin önbelleğe alınması (örn. durum yönetimi kütüphaneleriyle).

• Sayfa bölme ve sonsuz kaydırma: Tüm veri setini yüklemek yerine, veriyi parça parça yükleme.

• GraphQL yerine REST: İstemcinin yalnızca ihtiyaç duyduğu alanları talep etmesine olanak tanır, gereksiz veriyi önler.

• Veri formatı: Protocol Buffers veya MessagePack gibi daha kompakt formatların kullanımı, XML veya gereksiz JSON yerine.

• HTTP isteklerinin sayısını azaltma: Dosyaların birleştirilmesi (CSS, JS), CSS sprite kullanımı.

• Sunucu tarafı render (SSR) / Statik site üretimi (SSG): İlk gösterim için gereken JS miktarını azaltmak amacıyla sunucu üzerinde render edilmesi.

• İstek sıkıştırma: Nadiren kullanılır, POST istek gövdesinin sıkıştırılması mümkündür.

// React'ta React.lazy ve Suspense kullanarak bileşenin tembel yüklenmesi örneği
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Yükleniyor...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Duyarlı görüntü örneği -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Görüntü açıklaması">
</picture>