KolayWeb PerformansıFrontend

CLS (Cumulative Layout Shift) neden olur? Nasıl düzeltilir?

Cevap

CLS, sayfa yüklenirken veya kullanım sırasında beklenmedik şekilde kayan içeriği ölçer. İyi değer 0.1 veya altıdır. Kullanıcı tam butona tıklayacakken içeriğin kayması klasik bir örnektir.

Sık nedenler ve çözümler

NedenÇözüm
Boyutu belirtilmemiş görsel/videowidth/height attribute'ları veya CSS aspect-ratio
Sonradan yüklenen reklam, embed, bannerÖnceden min-height ile yer ayırmak
Web font değişimi (FOUT)font-display: optional veya size-adjust ile fallback fontu eşleştirmek, fontu preload etmek
İçeriğin üstüne dinamik eklenen öğeler (çerez bandı, "yeni gönderi")Overlay olarak göstermek veya kullanıcı etkileşimiyle eklemek
top/left/height ile animasyontransform ile animasyon
Skeleton ile gerçek içerik boyut farkıSkeleton'ı gerçek boyuta yakın yapmak
<img src="/hero.webp" width="1200" height="600" alt="..." />
.video-embed { aspect-ratio: 16 / 9; width: 100%; }
.ad-slot { min-height: 250px; }

Nasıl tespit edilir?

  • Chrome DevTools > Performance panelinde "Layout shifts" izi; kayan elemanlar vurgulanır.
  • web-vitals kütüphanesinin onCLS attribution build'i hangi elemanın kaydığını raporlar.
  • Kullanıcı etkileşiminden sonraki 500 ms içindeki kaymalar CLS'e sayılmaz (beklenen kayma).

Not: CLS tüm kaymaların toplamı değildir; aralarında 1 sn'den az olan kaymalar en fazla 5 sn'lik "session window"lar halinde gruplanır ve sayfanın ömrü boyunca en kötü pencerenin toplamı raporlanır. bfcache (geri/ileri önbellek) ile sayfa geri geldiğinde ölçüm sıfırlanır.

DevMülakat editörleri ·

  1. Bundle boyutunu nasıl analiz eder ve küçültürsünüz?OrtaWeb PerformansıFrontend
  2. Çok uzun bir listeyi (on binlerce satır) performanslı nasıl gösterirsiniz?ZorWeb PerformansıFrontend
  3. Bir web sayfasının yükleme performansını nasıl iyileştirirsiniz?OrtaWeb PerformansıFrontend
  4. Core Web Vitals nedir? LCP, INP ve CLS neyi ölçer?OrtaWeb PerformansıFrontend
  5. preload, prefetch, preconnect ve dns-prefetch resource hint'leri arasındaki fark nedir?KolayWeb PerformansıFrontend
  6. Vite ile webpack arasındaki temel fark nedir? Tree shaking nasıl çalışır, neden bazen çalışmaz?OrtaWeb PerformansıFrontend

Bu konuda başka bir soru biliyor musun?

Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.

Soru ekle