Cumulative Layout Shift (CLS) Nedir?

CLS = Layout Shift miktarı × görünürlük oranı. Yani: sayfada bir element kaydığında, hem ne kadar kaydığı hem viewport'ta ne kadar görünür olduğu hesaplanıyor.

CLS'yi bozan tipik senaryolar: 1. Resimlere width/height verilmemesi — resim yüklendiğinde altındaki içerik aşağı kayıyor 2. Lazy load reklam — sayfa açıldıktan 2 sn sonra reklam injected, içerik aşağı kayıyor 3. Web font yüklemesi — fallback font (Arial) ile asıl font (Inter) arası boyut farkı text reflow yaratıyor 4. Dynamic injected content — 'flash sale' banner, cookie consent pop-up 5. Sayfa açılışında animation — slide-in transition CLS'yi etkileyebiliyor

CLS optimizasyon teknikleri: 1. <img width='800' height='450' /> — explicit dimensions VEYA aspect-ratio CSS 2. Reklam container'ına min-height ver — boş gelse bile yer tutsun 3. Font preload + size-adjust — fallback ile asıl font arası fark sıfırlanır 4. Cookie consent banner fixed bottom position (sayfa içeriğini kaydırmaz) 5. Skeleton loader — yüklenmeyen yer boş bırakılmasın

Google CLS hesabını 'session window' içinde yapıyor — 5 saniyelik pencere içinde max layout shift değerleri alıyor. Sayfa açılışında 1 büyük shift olabilir; sonraki 5 saniyede sakin olursa skor kötü değil.

DevPixel projelerinde CLS hedefi <0.05 — Next.js Image component otomatik aspect-ratio veriyor + critical CSS inline + font preload. Tipik CLS skorumuz 0.02-0.04.