CLS Nedir? Cumulative Layout Shift Sorunlarını Çözme Rehberi

Bir web sitesini okurken okumakta olduğunuz metin birden kayıyor, tıklamak istediğiniz buton yerinden oynuyor ya da sayfa sizi bambaşka bir bağlantıya götürüyor. Bu deneyim sadece sinir bozucu değil; kullanıcı güvenini zedeliyor, dönüşümleri düşürüyor ve Google sıralamanıza doğrudan zarar veriyor.

Google, bu problemi ölçmek için CLS (Cumulative Layout Shift) metriğini geliştirdi ve 2021 yılında Core Web Vitals güncellemesiyle CLS’yi resmi bir sıralama sinyali haline getirdi. Bugün itibarıyla CLS, hem masaüstü hem de mobil sıralamalarında ağırlıklı bir rol oynuyor.

Bu rehberde CLS’nin tam olarak ne anlama geldiğini, formülünü, eşik değerlerini, layout kaymasına yol açan tüm nedenleri ve her birinin çözümünü teknik kod örnekleriyle ele alacağız.

CLS Nedir?

Cumulative Layout Shift (Birikimli Düzen Kayması), bir web sayfası yüklenirken görünür öğelerin beklenmedik şekilde yer değiştirmesini ölçen bir kararlılık metriğidir. “Cumulative” (birikimli) ifadesi, sayfanın tüm ömrü boyunca — ilk yüklemeden kullanıcı sayfayı terk edene kadar — gerçekleşen tüm düzen kayması olaylarının toplamı üzerinden hesaplanmasından gelir.

CLS, yalnızca teknik bir metrik değildir. Kullanıcının sayfayla etkileşimi sırasındaki deneyimini somut olarak temsil eder. Okumakta olduğunuz bir metin bloğu birden 200 piksel aşağı kayıyorsa ya da tıklamak istediğiniz “Sepete Ekle” butonu anlık bir reklam yüzünden 150 piksel yana geçiyorsa, bu hareketlerin her biri CLS skorunuzu olumsuz etkiler.

Google’ın kullanıcı deneyimi araştırmaları, beklenmedik düzen kaymalarının özellikle mobil kullanıcılarda yanlış tıklama oranını dramatik biçimde artırdığını ortaya koymuştur. Yanlış tıklamalar hem kullanıcıyı hayal kırıklığına uğratır hem de sitenizin güvenilirliğini sorgulatır.

Core Web Vitals hakkında kapsamlı bilgi için →

CLS Nasıl Hesaplanır? Formül ve Bileşenler

CLS skorunun hesaplanması iki temel bileşene dayanır:

CLS Skoru = Impact Fraction × Distance Fraction

Bu iki bileşeni tek tek inceleyelim.

Impact Fraction (Etki Fraksiyonu)

Kaydırma olayından etkilenen ekran alanının toplam görünür alana oranıdır. Bir öğe kayma gerçekleşmeden önce ekranın %40’ını kaplıyorsa ve kayma sonrasında ekranın %30’unu kaplıyorsa, birleşik alan %55 olabilir. Bu durumda impact fraction 0,55 olur.

Formül:

Impact Fraction = (Kayma öncesi alan + Kayma sonrası alan) / Toplam görünür alan

Distance Fraction (Mesafe Fraksiyonu)

Kaydırma olayında bir öğenin kat ettiği mesafenin, görünür viewport yüksekliğine (veya genişliğine — hangisi büyükse) oranıdır. Bir öğe 200 piksel aşağı kayıyorsa ve viewport yüksekliği 800 piksel ise, distance fraction 0,25 olur.

Distance Fraction = Maksimum kayma mesafesi / Viewport boyutu (büyük olan)

Toplam Hesaplama Örneği

Bir reklam birimi sayfaya enjekte edildiğinde:

• Etkilenen içerik alanı: Viewport’un %60’ı (impact fraction = 0,60)
• Öğeler 150 piksel aşağı kayıyor, viewport yüksekliği 750 piksel (distance fraction = 0,20)

Layout Shift Skoru = 0,60 × 0,20 = 0,12

Bu tek bir kaydırma olayının skoru. CLS, sayfanın tüm ömrü boyunca gerçekleşen tüm kaydırma oturumlarının (session windows) en yüksek değerini alır. Oturum penceresi, her biri 1 saniyeden az aralıkla gerçekleşen ve toplam 5 saniyeyi geçmeyen kaydırma olayları grubudur.

CLS Eşik Değerleri

Google, CLS için aşağıdaki eşik değerlerini belirlemiştir:

Bu eşik değerlerinin pratikte ne anlama geldiğini şöyle açıklayabiliriz:

CLS < 0.1 (İyi): Sayfa neredeyse hiç beklenmedik kaymaya sahip değil. Kullanıcı sayfayı rahatça okuyup etkileşime geçebiliyor. Google bu sayfaları Core Web Vitals açısından başarılı kabul ediyor.

CLS 0.1 – 0.25 (Geliştirilmeli): Kullanıcı zaman zaman kaymalar yaşıyor ancak deneyim tolere edilebilir düzeyde. Bu aralıktaki siteler iyileştirme gerektiriyor; rekabet açısından daha iyi optimize edilmiş sitelerin gerisinde kalabilir.

CLS > 0.25 (Kötü): Sayfa ciddi düzen kaymalarına sahip. Yanlış tıklamalar ve kullanıcı hayal kırıklığı yüksek. Google bu sayfaları Core Web Vitals başarısız olarak işaretliyor.

Hedef: Her zaman 0.1’in altında olmak. Rekabetçi bir niş için 0.05’in altı idealdir.

Layout Shift’e Neden Olan Başlıca Elementler

CLS sorunlarını çözmek için önce kaynağı doğru teşhis etmek gerekir. Layout kaymalarının altı ana nedeni vardır.

1. Boyutsuz Görseller ve Videolar

Web’deki CLS sorunlarının açık ara en yaygın nedeni budur. Tarayıcı, bir <img> etiketini işlerken resmin gerçek boyutlarını bilmezse, görsel indirilip işlenene kadar 0×0 piksel alan ayırır. Görsel geldiğinde sayfadaki tüm içerik kayar.

Örnek sorunlu kod:

<!-- Boyut belirtilmemiş — CLS tetikler -->
<img src="/uploads/hero-gorseli.jpg" alt="Hero görseli">

Örnek doğru kod:

<!-- Genişlik ve yükseklik her zaman belirtilmeli -->
<img src="/uploads/hero-gorseli.jpg" alt="Hero görseli" width="1200" height="630">

Bu width ve height attribute’ları stillerle birlikte tarayıcının alan ayırmasını sağlar. Modern tarayıcılar bu bilgiyi kullanarak görselin gelmesinden önce doğru boşluğu rezerve eder.

Video öğeleri için de aynı kural geçerlidir:

<video width="1280" height="720" controls>
  <source src="/videolar/urun-tanitim.mp4" type="video/mp4">
</video>

2. Reklamlar ve İframe’ler

Üçüncü taraf reklam ağları (Google AdSense, Meta Audience Network vb.) ve gömülü iframe’ler (YouTube videoları, haritalar, sosyal medya widget’ları) CLS’nin en sık ve en yüksek skorlu nedenlerinden biridir.

Reklam birimleri içeriğin ortasına enjekte edildiğinde, altındaki tüm öğeler aşağı kayar. Özellikle scroll derinliğine göre reklam yükleyen “lazy load” reklam sistemleri bu sorunu kronikleştirir.

3. Geç Yüklenen Web Fontları

Tarayıcı özel bir font indirirken iki davranıştan birini sergileyebilir:

• FOIT (Flash of Invisible Text): Font gelene kadar metin görünmez, gelince görünür ve metin bloğu boyutu değişir.
• FOUT (Flash of Unstyled Text): Sistem fontuyla başlar, özel font gelince değiştirir; bu boyut farkı layout kaymasına yol açabilir.

Her iki durum da potansiyel CLS kaynağıdır.

4. Dinamik Enjekte Edilen İçerik

JavaScript aracılığıyla sayfaya dinamik olarak eklenen her türlü içerik — bildirim bantları, çerez uyarı barları, canlı sohbet widget’ları, “oturum açma” mesajları, içerik öneri blokları — layout kaymasına neden olabilir.

Bu elementlerin tamamı mevcut DOM içeriğini iterek veya kaydırarak yer kaplıyorsa ve kullanıcının etkileşimi olmadan geliyorsa CLS’ye katkıda bulunurlar.

5. Animasyonlar ve Geçişler

top, left, right, bottom, margin, padding veya width/height gibi CSS özelliklerini değiştiren animasyonlar layout kaymasına yol açar. Bu özellikler değiştiğinde tarayıcı tüm belgenin düzenini yeniden hesaplamak zorunda kalır (reflow).

/* CLS tetikleyen animasyon — layout reflow yapar */
.slide-in {
  transition: margin-left 0.3s ease;
}
.slide-in.active {
  margin-left: 0;
}

6. FOIT/FOUT Kaynaklı Metin Kaydırmaları

Font yükleme sırasında metin boyutu değişiklikleri — özellikle başlıklarda ve büyük metin bloklarında — küçük ama birikmeli CLS değerleri üretir. Bu durum genellikle Google Fonts veya özel font dosyaları kullanan sitelerde görülür.

CLS Sorunlarını Çözme: Kaynak Bazında Rehber

Çözüm 1: Görsellere width ve height Attribute’u Ekleyin

Her <img> etiketine width ve height özelliği eklemek, CLS’yi düşürmenin en hızlı ve en etkili yoludur.

<!--  Doğru kullanım -->
<img 
  src="/images/urun-fotografi.webp" 
  alt="Ürün fotoğrafı"
  width="800" 
  height="600"
  loading="lazy"
>

CSS ile responsive tasarımı bozmadan bu özelliği koruyabilirsiniz:

img {
  max-width: 100%;
  height: auto; /* Oranı korur, width/height attribute'unu geçersiz kılmaz */
}

height: auto kuralı görselin oranını korurken, width ve height attribute’ları tarayıcıya ne kadar alan rezerve edeceğini söyler. Bu iki şey birbirini tamamlar.

Çözüm 2: aspect-ratio ile Rezervasyon Alanı Oluşturun

Bazı durumlarda görselin tam boyutlarını önceden bilmek mümkün olmayabilir (kullanıcı yüklü içerikler, API’dan gelen görseller vb.). Bu durumda aspect-ratio CSS özelliğiyle tarayıcının doğru oran üzerinden alan ayırmasını sağlayabilirsiniz.

/* 16:9 oran için yer tutucu */
.gorsel-kutu {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f0f0f0; /* Yükleme sırasında gri alan */
}

.gorsel-kutu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="gorsel-kutu">
  <img src="/dinamik-gorsel.jpg" alt="Dinamik içerik görseli">
</div>

YouTube embed’leri ve diğer iframe’ler için de aynı teknik kullanılabilir:

.video-kutu {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-kutu iframe {
  width: 100%;
  height: 100%;
  border: none;
}

Çözüm 3: Reklam Yer Tutucuları ve Minimum Yükseklik

Reklam birimlerinin boş gelmesi veya farklı boyutlarda gelmesi CLS’nin en zor çözülen nedenlerinden biridir. En etkili çözüm, reklamın geleceği alana baştan minimum boyut belirlemektir.

/* Reklam konteyneri için minimum yükseklik */
.reklam-alani {
  min-height: 250px; /* Beklenilen reklam yüksekliği */
  width: 300px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reklam-alani::before {
  content: "Reklam";
  font-size: 12px;
  color: #999;
}

Google AdSense kullananlar için data-ad-format ve data-full-width-responsive değerlerini dikkatli ayarlamalı, reklam birimi boyutunu sabit tutmaya çalışmalıdır:

<!-- Sabit boyutlu reklam birimi — CLS'yi azaltır -->
<div class="reklam-alani">
  <ins class="adsbygoogle"
       style="display:inline-block;width:300px;height:250px"
       data-ad-client="ca-pub-XXXXXXXX"
       data-ad-slot="XXXXXXXX">
  </ins>
</div>

Responsive reklam birimleri kullanmak zorundaysanız, olası en büyük reklam boyutuna göre yer tutucu belirleyin.

Çözüm 4: font-display ile Font Kayması Kontrolü

Web fontlarının CLS’ye etkisini kontrol altına almanın en doğrudan yolu font-display CSS tanımlayıcısıdır.

@font-face {
  font-family: 'SiteFont';
  src: url('/fonts/site-font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional; /* En düşük CLS riski */
}

font-display değerlerinin CLS’ye etkisi:

CLS açısından en güvenli değer optional’dır; font ilk yüklemede gelmezse sistem fontu kullanılır, sayfanın ilerleyen sürecinde font değişimi tetiklenmez. Ancak bu durumda özel fontu ilk ziyarette gösteremezsiziniz.

Fontu mutlaka göstermek istiyorsanız fallback veya swap tercih edin. swap ile birlikte size-adjust, ascent-override ve descent-override gibi @font-face tanımlayıcılarını kullanarak sistem fontu ile özel font arasındaki boyut farkını minimize edebilirsiniz:

/* Sistem fontu fallback'i özel fonta yaklaştırma */
@font-face {
  font-family: 'SiteFont-Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

body {
  font-family: 'SiteFont', 'SiteFont-Fallback', Arial, sans-serif;
}

Google Fonts kullanıyorsanız URL’ye &display=swap veya &display=optional ekleyin:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=optional" rel="stylesheet">

Daha iyi bir yöntem, font dosyalarını kendi sunucunuzda barındırmak ve <link rel="preload"> ile önden yüklemektir:

<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>

Çözüm 5: Dinamik İçerik ve JavaScript Enjeksiyonları

JavaScript ile sayfaya dinamik içerik eklerken layout kaymasını önlemenin altın kuralı: Mevcut içeriğin üzerini ya da altına ekle, araya ekleme.

Yanlış yaklaşım — CLS tetikler:

// Sayfa ortasına içerik enjekte etme — mevcut içerik aşağı kayar
function bildirimGoster() {
  const bildirim = document.createElement('div');
  bildirim.className = 'bildirim-baneri';
  bildirim.textContent = 'Çerezleri kabul edin!';
  
  // Sayfanın en üstüne ekleme — tüm içerik aşağı iter
  document.body.insertBefore(bildirim, document.body.firstChild);
}

Doğru yaklaşım — CLS tetiklemez:

// Sabit konumlu overlay — layout'u etkilemez
function bildirimGoster() {
  const bildirim = document.createElement('div');
  bildirim.className = 'bildirim-overlay'; // position: fixed kullan
  bildirim.textContent = 'Çerezleri kabul edin!';
  document.body.appendChild(bildirim); // En sona ekle
}

.bildirim-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  padding: 16px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

position: fixed veya position: absolute kullanan elementler normal belge akışının dışında olduğu için başka elementleri itmez ve CLS’ye katkıda bulunmaz.

Sayfa yüklendiğinde varolan içeriğin boyutunu değiştirmeniz gerekiyorsa, bunu görünmez alan (rezerve edilmiş boşluk) ile önceden planlayın:

<!-- Başta boş yer tutucu — JavaScript dolduracak -->
<div id="dinamik-icerik-alani" style="min-height: 80px; width: 100%;">
  <!-- İçerik buraya yüklenecek -->
</div>

// Mevcut alanı doldur — layout değişmez
document.getElementById('dinamik-icerik-alani').innerHTML = '<p>Yüklenen içerik</p>';

Çözüm 6: Animasyonlarda transform ve opacity Kullanın

CSS animasyonları layout kaymasının örtülü bir kaynağı olabilir. top, left, width, height, margin, padding gibi özellikleri değiştiren animasyonlar tarayıcının yeniden düzen hesabı (reflow) yapmasını zorlar ve diğer öğeleri etkiler.

CLS yaratan animasyon örneği:

/* Kötü: margin-top değiştiriyor, reflow tetikliyor */
@keyframes yukari-kaydir {
  from { margin-top: 20px; opacity: 0; }
  to { margin-top: 0; opacity: 1; }
}

.animasyonlu-element {
  animation: yukari-kaydir 0.4s ease-out;
}

CLS tetiklemeyen animasyon örneği:

/* İyi: transform kullanıyor, GPU'da işleniyor, layout etkilemiyor */
@keyframes yukari-kaydir {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animasyonlu-element {
  animation: yukari-kaydir 0.4s ease-out;
  will-change: transform, opacity; /* GPU katmanı oluştur */
}

transform ve opacity değişiklikleri compositor katmanında işlenir; tarayıcı düzenini yeniden hesaplamak zorunda kalmaz. Bu iki özellik CLS-safe animasyon için standart seçeneklerdir.

Yaygın animasyon dönüşümleri:

/* Sağdan kaydırma — margin yerine transform kullan */
.soldan-gir { animation: soldan-gir 0.3s ease; }
@keyframes soldan-gir {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Büyüme efekti — width/height yerine scale kullan */
.buyuyerek-goster { animation: buyuyerek-goster 0.3s ease; }
@keyframes buyuyerek-goster {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

Çözüm 7: content-visibility ile Ekran Dışı İçeriği Gizleme

content-visibility: auto özelliği, ekranın görünür alanı dışındaki içeriği tarayıcının render etmesini erteler. Bu özellik CLS ile doğrudan ilgili olmasa da sayfa performansını artırarak içeriğin daha düzenli yüklenmesine katkıda bulunur.

/* Ekran dışı uzun içerik bölümleri için */
.blog-icerik-bolumu {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px; /* Tahmini yükseklik */
}

contain-intrinsic-size özelliği, içerik render edilmeden önce tarayıcının ne kadar alan rezerve edeceğini söyler. Bu değer gerçek yüksekliğe yakın olduğunda scroll pozisyon kayması ve dolayısıyla CLS azalır.

CLS Ölçüm Araçları

CLS’yi doğru ölçmek, neyin düzeltileceğini belirlemek için kritiktir. Farklı araçlar farklı CLS verisi sunar.

PageSpeed Insights

Google’ın ücretsiz aracı hem lab (simülasyon) hem de field (gerçek kullanıcı) verisini gösterir. Field verisi, Google Search Console’dakiyle örtüşür ve sıralama için kullanılan gerçek veridir.

URL analizi için: https://pagespeed.web.dev/

Sonuçlarda “Diagnose performance issues” bölümünde CLS’ye katkıda bulunan elementlerin listesini görebilirsiniz.

Chrome DevTools — Performance Panel

En ayrıntılı CLS analizini Chrome DevTools’un Performance paneli sağlar:

1. Chrome DevTools’u açın (F12 veya Ctrl+Shift+I)
2. “Performance” sekmesine tıklayın
3. ”Record” düğmesine basın ve sayfayı yenileyin
4. Kaydı durdurun
5. ”Experience” bölümünde kırmızı “Layout Shift” bloklarını bulun
6. Üzerine tıklayarak hangi elementlerin kaydığını görün

Chrome DevTools — Layout Instability Rendering

CLS’yi gerçek zamanlı olarak görselleştirmek için:

1. DevTools → Rendering panelini açın (üç nokta menüsü → More tools → Rendering)
2. “Layout Shift Regions” seçeneğini etkinleştirin
3. Sayfayı yenileyin — mavi dikdörtgenler kaydırma bölgelerini gösterir

Web Vitals Chrome Extension

Google’ın Web Vitals Chrome uzantısı, herhangi bir sayfada gerçek zamanlı CLS değerini gösterir. Geliştirici ortamında CLS değişimlerini anlık takip etmek için idealdir.

Google Search Console — Core Web Vitals Raporu

Search Console’daki “Core Web Vitals” raporu, sitenizin gerçek kullanıcılardan toplanan 28 günlük CLS verisini URL bazında gösterir. Hangi sayfaların “kötü” veya “geliştirilmeli” kategorisinde olduğunu buradan belirleyebilirsiniz.

DebugBear ve WebPageTest

Üçüncü taraf araçlar video kaydıyla birlikte layout shift olaylarını film şeridi (filmstrip) formatında gösterebilir. Bu sayede hangi saniyede hangi elementin kaydığını görsel olarak tespit edebilirsiniz.

WebPageTest: https://www.webpagetest.org/
DebugBear: https://www.debugbear.com/

CLS’yi Düşürmek İçin Öncelik Sırası

Birden fazla CLS kaynağınız varsa hangisini önce çözeceğinize karar verirken şu öncelik sırasını takip edin:

1. Boyutsuz görseller ve videolar — En yaygın ve en hızlı çözülen neden. width ve height attribute’ları eklemek dakikalar içinde yapılabilir.

2. Reklam yer tutucuları — Reklam birimleri için sabit alan rezervasyonu CLS’yi önemli ölçüde düşürür ve reklam gelirini olumsuz etkilemez.

3. Font yükleme stratejisi — font-display: optional veya fallback ile fontları preload edin. Google Fonts’tan kendi sunucunuza geçiş ek bir performans kazancı sağlar.

4. Dinamik içerik — Çerez barları, bildirimler ve dinamik yüklenen widget’lar için position: fixed kullanın veya baştan yer tutucu ayırın.

5. Animasyonlar — transform ve opacity dışında CSS özelliği değiştiren tüm animasyonları yeniden yazın.

Sık Yapılan Hatalar

1. Görseli CSS ile boyutlandırıp HTML attribute’larını atlamak. CSS ile width: 100%; height: 400px gibi bir stil vermek yeterli değildir. Tarayıcı HTML parse ederken CSS’i henüz işlememiş olabilir. width ve height HTML attribute’ları, CSS’ten önce işlendiği için layout reservation için gereklidir.
2. Font önbelleğe alındığı için CLS’yi hiç görememek. Kendi bilgisayarınızda önbellek dolu olduğu için CLS yaşamazsınız. Gerçek kullanıcı CLS’sini test etmek için “Disable cache” seçeneğiyle veya gizli sekme ile test edin.
3. Yalnızca masaüstü CLS’yi kontrol etmek. Mobil cihazlarda viewport daha küçük, bağlantı genellikle daha yavaş ve reklam formatları farklıdır. CLS değerleri masaüstünde iyi olsa bile mobilde kötü olabilir. Her iki platformu ayrı ayrı test edin.
4. CLS’yi yalnızca ilk yüklemede ölçmek. Kullanıcı sayfada scroll yaptıktan sonra ya da belirli etkileşimler gerçekleştirdikten sonra da CLS olayları tetiklenebilir. content-visibility: auto kullanıyorsanız özellikle scroll sırasındaki CLS’yi test edin.
5. Reklam yer tutucusunu gerçek reklam boyutuna göre değil, tahmini bir değere göre ayarlamak. Reklam ağı farklı boyutta bir birim döndürdüğünde yer tutucu yetersiz kalır ve kayma yine oluşur. Reklam sağlayıcınızın gerçekte kullandığı boyut aralığını kontrol edip yer tutucuyu en büyük olası boyuta göre planlayın.
6. font-display: swap kullanıp fallback fontu özel fonta yakınlaştırmayı atlamak. swap ile metin hemen görünür ama özel font geldiğinde satır sayısı ve boyut değişebilir. size-adjust, ascent-override gibi tanımlayıcılarla fallback fontu hedef fonta yaklaştırmadan swap kullanmak CLS’yi gizlice yükseltir.
7. Çerez/onay banerini sayfa akışının içine, en üste eklemek. Bu, tüm sayfa içeriğini aşağı iter ve genellikle en yüksek tek seferlik CLS puanlarından birine yol açar. position: fixed kullanmak bu sorunu tamamen ortadan kaldırır.
8. CLS düzeltmelerini yalnızca ana sayfada test edip diğer şablonları (ürün sayfası, kategori sayfası, blog yazısı) kontrol etmemek. Her şablon farklı içerik türleri ve üçüncü taraf entegrasyonlar barındırabilir; ana sayfada CLS iyi olsa bile ürün sayfasında kötü olabilir.

Vaka Kurgusu: Bir Haber Portalının CLS Sorunu

Yoğun trafik alan bir haber portalı, Search Console’da URL’lerinin büyük bir kısmının “Kötü” CLS kategorisinde işaretlendiğini fark ediyor; site geneli CLS değeri 0.34 ile Google’ın eşiğinin oldukça üzerinde.

Uygulama: Ekip PageSpeed Insights ile birkaç haber detay sayfasını analiz ediyor ve iki ana kaynak tespit ediyor: makale içine otomatik yerleştirilen reklam birimleri (boyutsuz <div> içine enjekte ediliyor) ve makalenin üst kısmındaki öne çıkan görsel (width/height attribute’u olmadan CMS’ten geliyor). Ek olarak, sayfa yüklendikten birkaç saniye sonra beliren “Bültenimize abone olun” bildirimi de sayfanın en üstüne ekleniyor ve tüm içeriği aşağı itiyor.

Ekip üç düzeltme uyguluyor: tüm makale görsellerine CMS şablonunda otomatik width/height attribute’u ekliyor, reklam konteynerlerine reklam ağının en sık döndürdüğü boyuta göre min-height tanımlıyor, bülten bildirimini position: fixed ile sayfa akışının dışına alıyor.

Sonuç penceresi: Değişikliklerin yayına alınmasından 28 gün sonra Search Console’daki CLS raporunda “Kötü” URL sayısı önemli ölçüde azalıyor, site geneli CLS değeri 0.34’ten 0.08’e geriliyor. Ekip aynı dönemde sayfa başına ortalama okuma süresinde ve reklam görünürlük oranında da iyileşme gözlemliyor; bu, düzen kararlılığının yalnızca sıralama değil, içerik tüketim kalitesini de etkilediğini gösteriyor. (Vaka temsilidir.)

CLS ve Yapay Zeka Destekli İçerik Blokları

2026’da birçok haber sitesi ve e-ticaret platformu, sayfaya yapay zeka tarafından üretilen “özet”, “ilgili ürün önerisi” veya “sohbet destekli soru-cevap” blokları ekliyor. Bu bloklar genellikle sunucudan asenkron olarak gelir ve hazır olduklarında DOM’a enjekte edilir — tam da CLS’nin en klasik tetikleyicilerinden biri.

Bu tür AI bileşenlerini CLS güvenli hale getirmenin yolu basittir: bileşen için baştan sabit veya tahmini bir yükseklik rezerve edin (min-height veya aspect-ratio ile), içerik geldiğinde bu alanı doldurun, alanı büyütüp küçültmeyin. Eğer AI yanıtının uzunluğu değişkense, bir maksimum yükseklik belirleyip içeriği kaydırma çubuğuyla (scroll) sınırlı bir kutu içinde gösterme de makul bir çözümdür. Aksi halde, kullanıcı deneyimini zenginleştirmesi beklenen bir özellik, sitenin Core Web Vitals performansını görünmez biçimde kötüleştirebilir.

JavaScript ile CLS İzleme

Kullanıcıların gerçek cihazlarında CLS değerlerini izlemek için Web Vitals API’sini kullanabilirsiniz:

// Web Vitals kütüphanesini CDN yerine kendi sunucunuzdan yükleyin
import { onCLS } from 'web-vitals';

onCLS((metric) => {
  console.log('CLS değeri:', metric.value);
  console.log('CLS derecelendirmesi:', metric.rating); // 'good', 'needs-improvement', 'poor'
  
  // Analytics'e gönder
  if (typeof gtag !== 'undefined') {
    gtag('event', 'web_vitals', {
      event_category: 'Web Vitals',
      event_label: 'CLS',
      value: Math.round(metric.value * 1000), // Milisaniye cinsinden yuvarla
      non_interaction: true,
    });
  }
});

CLS sorunlarına yol açan elementleri de izleyebilirsiniz:

// PerformanceObserver ile layout shift olaylarını yakala
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift skoru:', entry.value);
      console.log('Etkilenen elementler:', entry.sources);
      
      entry.sources.forEach(source => {
        console.log('Kayma yapan element:', source.node);
        console.log('Önceki rect:', source.previousRect);
        console.log('Sonraki rect:', source.currentRect);
      });
    }
  }
});

observer.observe({ type: 'layout-shift', buffered: true });

hadRecentInput kontrolü önemlidir: Kullanıcının son 500ms içinde etkileşime geçtiği (tıklama, klavye girişi) durumda gerçekleşen kaymalar CLS hesabına dahil edilmez.

CLS ve Teknik SEO İlişkisi

CLS yalnızca kullanıcı deneyimi metriği değil, aynı zamanda teknik SEO performansının doğrudan göstergesidir. Google, Core Web Vitals değerlerini “sayfa deneyimi” sinyali olarak sıralama algoritmasına entegre etmiştir.

Yüksek CLS değerleri şu SEO etkilerine yol açabilir:

Sıralama kaybı: Rakip siteler benzer içerik kalitesine sahipse, Core Web Vitals daha iyi olan site öne geçer. Özellikle iyi optimize edilmiş niş rekabetinde CLS tie-breaker faktör olabilir.

Search Console uyarıları: CLS > 0.25 olan sayfalar Search Console’da “Kötü URL” olarak işaretlenir. Etkilenen URL sayısı arttıkça site genelindeki Core Web Vitals skoru düşer.

Mobil sıralamaya etkisi: Google mobil-first indexing uyguladığı için mobil CLS değerleri masaüstünden daha ağır basar.

Dönüşüm oranı etkisi: Doğrudan sıralama etkisinin ötesinde, yüksek CLS e-ticaret sitelerinde sepete ekleme hatalarını, form doldurma yanlışlarını ve genel kullanıcı güven kaybını artırır.

Teknik SEO hizmetlerimizi inceleyin →

CLS Sorunlarının Teşhisi: Adım Adım

Adım 1: Search Console Raporu

Google Search Console → “Deneyim” → “Core Web Vitals” bölümünden “Kötü” ve “Geliştirilmeli” URL’lerin listesini çıkarın. Hangi sayfaların CLS sorunu yaşadığını buradan anlayabilirsiniz.

Adım 2: PageSpeed Insights Analizi

Sorunlu URL’leri PageSpeed Insights’a tek tek yapıştırın. “Tanılama” bölümünde “Görsellerin genişlik ve yüksekliği yok”, “Büyük düzen kaymaklarından kaçının” gibi uyarıları inceleyin.

Adım 3: Chrome DevTools ile Kaynak Tespiti

DevTools → Performance → Kaydı başlatın ve sayfayı yenileyin. “Experience” satırındaki kırmızı bloklar layout shift olaylarıdır. Her bloka tıklayarak hangi elementin ne kadar kaydığını görün.

Adım 4: Rendering Overlay Doğrulaması

Rendering panelinden “Layout Shift Regions” özelliğini açın. Sayfayı gezin, mavi kutular hangi elementlerde kaydığını gerçek zamanlı gösterir.

Adım 5: Düzeltme ve Yeniden Test

Düzeltmelerinizi yaptıktan sonra tarayıcı önbelleğini temizleyin ve PageSpeed Insights ile yeniden test edin. Alan verisinin (field data) güncellenmesi için 28 güne kadar beklenebilir; lab verisi anlık sonucu gösterir.

CLS Kaynağına Göre Karar Çerçevesi

Bu tabloyu, Search Console’dan çıkardığınız “Kötü” URL listesiyle birlikte kullanın: her URL grubu için önce kaynağı DevTools’ta doğrulayın, sonra ilgili satırdaki çözümü uygulayın. Birden fazla kaynak aynı anda etkiliyorsa, en yüksek impact fraction’a sahip olanından başlayın.

Sık Sorulan Sorular

Özet: CLS İyileştirme Kontrol Listesi

Sitenizin CLS değerini düşürmek için şu adımları uygulayın:

Görseller için tüm <img> etiketlerine width ve height attribute’u ekleyin, CSS’e height: auto ekleyin. Boyutu bilinmeyen görseller için CSS aspect-ratio özelliğiyle kapsayıcı oluşturun. Videolara ve iframe’lere de boyut attribute’u ya da aspect-ratio kapsayıcı ekleyin. Reklam alanları için sabit min-height değeriyle yer tutucu oluşturun. Web fontlarında font-display: optional veya fallback kullanın, kritik fontları <link rel="preload"> ile önceden yükleyin. Dinamik içerik enjeksiyonlarında position: fixed kullanın ya da baştan yer tutucu ayırın. Animasyonlarda top, left, margin, width, height yerine transform ve opacity kullanın. PageSpeed Insights ve Search Console ile düzenli ölçüm yapın.

CLS, Site içi düzeltmelerle çözülebilen ve görece hızlı geri dönüş sağlayan bir Core Web Vitals metriğidir. Özellikle e-ticaret siteleri, haber portalları ve reklam yoğun içerik siteleri için CLS iyileştirmesi hem sıralama hem de dönüşüm açısından ölçülebilir kazanımlar getirir.