Bir web sitesinin yüklenme süresini hızlandırmak için hangi yöntemleri kullanabilirsiniz?

CSS ve JavaScript dosyalarının minimize edilmesi ve birleştirilmesi. Görüntülerin sıkıştırılması ve WebP gibi modern formatların kullanılması. Görüntüler ve videolar için lazy loading (tembel yükleme) kullanımı. İstemci ve sunucu tarafında kaynakların önbelleğe alınması. Metin kaynakları için GZIP sıkıştırması. HTTP isteklerinin azaltılması. CDN (İçerik Dağıtım Ağı) kullanımı. Render kritik yolunun optimize edilmesi. Kullanılmayan kodların kaldırılması. Çevrimdışı erişim ve önbellekleme için Service Workers kullanımı.

// Bir görüntünün 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;
      observer.unobserve(img);
    }
  });
});

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

Görüntü formatlarının karşılaştırması:

Format	Tipik kullanım	Özellikler
JPEG	Fotoğraflar	Kayıplı sıkıştırma, geniş renk yelpazesi
PNG	Şeffaflık içeren grafikler, logolar	Kayıpsız sıkıştırma, şeffaflık desteği
GIF	Animasyonlu görüntüler	Kayıpsız sıkıştırma, animasyon desteği
WebP	Fotoğraflar ve grafikler	Daha verimli sıkıştırma (kayıplı ve kayıpsız), şeffaflık ve animasyon desteği

/* CSS'nin birleştirilmesi ve minimize edilmesi örneği */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Kullanılmayan kod kaldırıldı */
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

# Nginx'te GZIP sıkıştırma örneği
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;