Sayfa optimizasyonu için hangi yöntemleri…

Kaynakların Minifikasyonu ve Sıkıştırılması:
- HTML, CSS, JavaScript: Gereksiz boşluklar, yorumlar, satır sonları kaldırma, değişken isimlerini kısaltma.
- Görüntüler: Format optimizasyonu (WebP, AVIF), kalite kaybı olmadan sıkıştırma, duyarlı resimlerin kullanımı.
CDN (İçerik Dağıtım Ağı) kullanımı: Statik kaynakların kullanıcıya en yakın sunuculardan dağıtılması gecikmeyi azaltır.
Tarayıcı önbellekleme: Uygun HTTP başlıkları (Cache-Control, Expires) ayarlayarak statik kaynakların istemci tarafında önbelleğe alınması.
Lazy Loading (Tembel Yükleme): Görüntüler, videolar ve diğer ağır kaynakların yalnızca görünüm alanına girdiklerinde yüklenmesi.
JavaScript ve CSS'in asenkron ve ertelenmiş yüklenmesi: async ve defer özniteliklerinin kullanılması, CSS'in kritik yol dışında yüklenmesi.
Kritik CSS'nin optimize edilmesi: Sayfanın ilk ekranını render etmek için gereken minimum CSS'nin doğrudan <head> içine gömülmesi, kalan CSS'in asenkron yüklenmesi.
HTTP isteklerinin sayısının azaltılması:
- CSS ve JavaScript dosyalarının birleştirilmesi.
- Küçük resimler için sprite kullanımı.
Yazı tiplerinin optimize edilmesi:
- WOFF2 formatının kullanılması.
- font-display kullanımı.
- Kritik yazı tiplerinin önceden yüklenmesi.
Sunucu tarafı Render (SSR) veya Statik Site Üretimi (SSG): Sayfanın bir kısmının veya tamamının sunucuda render edilmesi, ilk içerik zamanı ve indeksleme iyileşir.
Görüntülerin optimize edilmesi:
- Farklı cihazlar için uygun boyutlar.
- <picture> ve srcset kullanımı.
- Kalite kaybı ile sıkıştırma.

Resource Hints (preconnect, prefetch, preload) kullanımı: Tarayıcıya yakın zamanda ihtiyaç duyulabilecek kaynaklar hakkında ipuçları.

<!-- Kaynak isteğinden önce alan adına bağlanma -->
<link rel="preconnect" href="https://example.com">
<!-- Kaynak ön yükleme -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Kaynak ön alma -->
<link rel="prefetch" href="/next-page.html">

DOM'un optimize edilmesi: DOM ağacının derinliğinin azaltılması, döngülerde maliyetli DOM okuma/yazma işlemlerinden kaçınılması.
Render işleminin optimize edilmesi (Layout, Paint, Composite): Stil ve düzen hesaplamalarının zorunlu yeniden hesaplamalarının önlenmesi, transform, opacity gibi CSS özelliklerinin kullanılması, tüm sayfayı yeniden boyamadan (örneğin, top, left yerine) performans artışı sağlar.
Web Workers kullanımı: Kaynak yoğun hesaplamaların ana UI akışını engellemeden ayrı iş parçacıklarına taşınması.
Progressive Loading (İlerleyerek Yükleme): İçeriğin yüklenirken gösterilmesi.

Sayfa optimizasyonu için hangi yöntemleri biliyorsunuz?