Web sitesinin performansını nasıl optimize ediyorsunuz?

• Görüntü optimizasyonu:
  • WebP gibi modern formatların kullanımı.
  • Kalite kaybı olmadan görüntü sıkıştırma.
  • Görüntüler görünüm alanı dışında ise lazy loading.
  • <picture> veya srcset kullanarak uyumlu görüntüler.
• Kaynakların minifikasyonu ve sıkıştırılması:
  • HTML, CSS ve JavaScript'in minifikasyonu.
  • Metin kaynakları için Gzip veya Brotli sıkıştırması.
• Önbellekleme:
  • Tarayıcı önbellekleme HTTP başlıkları (Cache-Control, Expires) ile.
  • Sunucu tarafı önbellekleme.
  • Çevrimdışı erişim ve gelişmiş önbellekleme için Service Workers kullanımı.
• Kritik render yolunun optimizasyonu:
  • Kritik olmayan CSS ve JavaScript'in gecikmeli yüklenmesi.
  • async, defer ile asenkron script yükleme.
  • Kritik CSS'nin inline edilmesi.
• HTTP isteklerinin azaltılması:
  • CSS ve JavaScript dosyalarının birleştirilmesi (HTTP/2'dede dikkatli olunmalı).
  • Küçük ikonlar için sprite kullanımı.
  • Küçük kaynakların (ör. fontlar veya SVG'ler) CSS'e data URIs ile gömülmesi.
• Fontların optimizasyonu:
  • Modern font formatlarının kullanımı (WOFF2).
  • Fontların yerel olarak konumlandırılması.
  • Fontların ön yüklenmesi (preload).
  • Yükleme sırasında fontların gösterimini yönetmek için font-display kullanımı.
• JavaScript performansı:
  • Algoritmalar ve veri yapılarının optimizasyonu.
  • DOM işlemlerinin azaltılması.
  • Olay delegasyonu kullanımı.
  • Kod bölme (code splitting).
• Render ve çizim optimizasyonu:
  • Pahalı CSS özelliklerinden kaçınma.
  • will-change kullanımı.
  • Animasyon ve geçişlerin optimizasyonu.
• CDN (Content Delivery Network) kullanımı.
• Sunucu tarafı optimizasyon:
  • Hızlı sunucu yanıtları.
  • Veritabanı sorgularının optimize edilmesi.

// Görüntülerin lazy loading örneği
const images = document.querySelectorAll('img[data-src]');

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

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

<!-- async ve defer kullanımı örneği -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display kullanımı örneği */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Tarayıcının yedek font kullanmasına izin verirken ana font yükleniyor */
}