Web sayfalarının optimizasyonu için hangi yaklaşımları biliyorsun?

Kritik render yolu optimizasyonu (CRP): Kritik kaynakların (CSS, JavaScript) önceliklendirilmesiyle yükleme, render ve içerik görüntüleme süresinin kısaltılması.

HTTP isteklerinin minimize edilmesi: CSS, JavaScript dosyalarının birleştirilmesi ve minify edilmesi, resimler için sprite kullanımı.

Lazy Loading (Tembel Yükleme): Kaynakların (resimler, videolar) kullanıcı görünümüne ulaşmadan önce gecikmeli yüklenmesi.

Görüntü optimizasyonu: Kalite kaybı olmadan sıkıştırma, modern formatların kullanımı (WebP), duyarlı görüntüler (srcset, sizes).

Önbellekleme: Tarayıcı ve sunucu önbelleğinin kullanılmasıyla yükleme süresinin azaltılması ve tekrar yüklemelerin hızlandırılması.

CDN (İçerik Dağıtım Ağı) kullanımı: İçeriğin coğrafi olarak dağıtılmış sunuculara dağıtılmasıyla gecikmenin azaltılması.

Asenkron ve gecikmeli script yükleme: <script> için async ve defer özniteliklerinin kullanılması.

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Font optimizasyonu: font-display: swap kullanımıyla FOUC (Stilsiz İçerik Parıltısı) önlenmesi, sadece gerekli karakter setlerinin yüklenmesi.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Görünmez metni önler */
}

Kullanılmayan CSS ve JavaScript'in kaldırılması: Chrome DevTools Coverage gibi analiz araçları ve Webpack, Parcel gibi paketleyiciler kullanılarak kullanılmayan kodun tespiti ve kaldırılması.

SSR (Sunucu Tarafı Render) veya ön-rendering: Sayfanın kısmi veya tam olarak sunucuda render edilmesi, performans ve SEO iyileştirmeleri için, özellikle SPA (Tek Sayfa Uygulamaları) için.

Web Workers: JavaScript'in yoğun görevlerini arka planda çalıştırmak, ana UI akışını engellemeden.

// Web Worker oluşturma
const worker = new Worker('worker.js');

// Veriyi worker'a gönderme
worker.postMessage({ data: 'some data' });

// Worker'dan gelen mesajları işleme
worker.onmessage = (event) => {
  console.log('Worker’dan alınan:', event.data);
};

PWA (Progressive Web Apps): Service worker kullanımıyla önbellekleme ve çevrimdışı erişim.

Performans analizi: Lighthouse, PageSpeed Insights, WebPageTest, Chrome DevTools Performance sekmesi gibi araçların düzenli kullanımı.