Critical Rendering Path (Kritik İşleme Yolu), bir tarayıcının yazdığınız HTML, CSS ve JavaScript kodunu alıp kullanıcının ekranında görebileceği piksellere dönüştürme sürecindeki adımların tamamıdır.

Bu yolun hızlı olması, web sitenizin performansını ve kullanıcı deneyimini (özellikle LCP - Largest Contentful Paint gibi Core Web Vitals metriklerini) doğrudan etkiler.

1. HTML'i Oku → DOM Ağacı Oluştur

Tarayıcı HTML'i satır satır okur ve bir ağaç yapısı oluşturur.

<div>
  <h1>Başlık</h1>
  <p>Paragraf</p>
</div>

Bu bir ağaç haline gelir: div → (h1, p)

2. CSS'i Oku → CSSOM Ağacı Oluştur

CSS kuralları da bir ağaç yapısına dönüştürülür.

div { padding: 20px; }
h1 { color: blue; }

Önemli: CSS hazır olmadan sayfa gösterilemez! CSS Render-Blockingtir. Sayfada style dosyası ile karşılaştığında renderi ve parse yi durdurur.

CSS render-blocking = Tarayıcı, CSS dosyası tamamen yüklenip işlenene kadar sayfayı ekrana çizmez (render etmez).

Yani kullanıcı boş beyaz ekran görür, CSS hazır olana kadar bekler. 

Neden Böyle?

Tarayıcı şunu önlemek ister:

FOUC (Flash of Unstyled Content) = Stilsiz içeriğin görünmesi. Bunun yerine tarayıcı der ki: "CSS gelene kadar hiçbir şey gösterme!"

Sayfa aşama aşma yüklenip parse edildiğinden, ekrana basılan elementlerden sonra css stili varsa tekrar sayfa içeriği render edilir. Bu nedenle css dosyalarını yada stillerini html elementlerinde önce tanımlamamız gerekir.

3. DOM + CSSOM → Render Ağacı

İki ağaç birleştirilir. Sadece ekranda görünecek elementler dahil edilir.

• display: none olanlar çıkarılır
• head, script gibi görünmezler çıkarılır

4. Layout (Düzen Hesaplama)(Reflow)

Her elementin ekranda nerede duracağı ve ne kadar yer kaplayacağı hesaplanır.

• Boyutlar (width, height)
• Konumlar (top, left)
• Margin, padding değerleri

// LAYOUT + PAINT + COMPOSITE
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';
element.style.padding = '20px';
element.style.display = 'flex';
element.style.position = 'absolute';

// Okuma işlemleri de layout tetikler!
const height = element.offsetHeight; // ⚠️ Layout!
const width = element.getBoundingClientRect().width; // ⚠️ Layout!
```

**Süreç:**
```
LAYOUT ⚙️⚙️⚙️ (3/10 maliyet)
↓
PAINT ⚙️⚙️ (2/10 maliyet)
↓
COMPOSITE ⚙️ (1/10 maliyet)

5. Paint (Boyama)

Tarayıcı pikselleri boyamaya başlar:

• Renkler
• Metinler
• Resimler
• Gölgeler

// Layout atlar, sadece PAINT + COMPOSITE
element.style.color = 'red';
element.style.background = 'blue';
element.style.boxShadow = '0 0 10px black';
element.style.borderRadius = '5px';
```

**Süreç:**
```
LAYOUT ❌ (atlandı)
↓
PAINT ⚙️⚙️ (2/10 maliyet)
↓
COMPOSITE ⚙️ (1/10 maliyet)

6. Composite (Birleştirme)

Katmanlar birleştirilerek son görüntü oluşturulur ve ekrana verilir.

Tüm katmanları doğru sırada birleştirir ve ekrana gönderir:

Layer 1 (arka plan)
  + Layer 2 (kenarlıklar)
  + Layer 3 (metin)
  + Layer 4 (gölgeler)
  
↓ GPU'da birleştir

EKRANA GÖNDER! 📺

// Layout ve Paint atlar, sadece COMPOSITE
element.style.transform = 'translateX(100px)';
element.style.opacity = '0.5';
element.style.filter = 'blur(5px)'; // GPU'da
```

**Süreç:**
```
LAYOUT ❌ (atlandı)
↓
PAINT ❌ (atlandı)
↓
COMPOSITE ⚙️ (1/10 maliyet) - GPU'da!

JavaScript'in Etkisi

JavaScript bu süreci durdurur:

<!-- Sayfa render'ı durur, JS inene kadar bekler -->
<script src="app.js"></script>

<!-- Sayfa render'ı durdurmaz (daha iyi) -->
<script src="app.js" defer></script>

Hızlandırma İpuçları

CSS:

• Dosya boyutunu küçük tut
• Gereksiz kuralları temizle

JavaScript:

• defer veya async kullan
• Script'leri body sonuna koy

HTML:

• Gereksiz element kullanma
• Basit yapılar tercih et

Sonuç: Bu 6 adım ne kadar hızlı tamamlanırsa, kullanıcı sayfayı o kadar çabuk görür!

Sayfa yüklenirken render TEK SEFERDE olmaz, defalarca tekrarlanır. Her render'dan sonra da Layout → Paint → Composite döngüsü çalışır.

Render süreci:

1. Render Tree oluştur (DOM + CSSOM birleştir)
2. Layout (Boyut ve konum hesapla)
3. Paint (Pikselleri boya)
4. Composite (Katmanları birleştir)

↓
Ekranda görünür piksel! 🖼️