📌 Hızlı Özet & Temel Çıkarım:
Kümülatif Düzen Kayması (Cumulative Layout Shift - CLS), sayfa yüklenirken sonradan gelen görseller, web fontları veya asenkron Google AdSense reklam kutuları nedeniyle metinlerin kullanıcı okurken aniden aşağı kayması sorunudur. Google’ın Core Web Vitals kriterlerinde CLS skoru 0.1’in altında olmak zorundadır. Modern CSS’in sunduğu aspect-ratio, rezerve edilmiş min-height kutuları ve contain: layout kuralları ile reklamlar yüklenmeden önce alanları milimetrik rezerve edilerek CLS skoru tamamen sıfırlanır.

1. CLS Neden AdSense Hesabınızı Tehlikeye Atar?

Bir web sitesinde okuyucu bir makaleyi okurken aniden içeriğin 250 piksel aşağı zıplaması yalnızca kullanıcıyı rahatsız etmekle kalmaz; kullanıcının gitmek istediği bir bağlantı yerine tam o anda beliren reklama yanlışlıkla tıklamasına (accidental click) yol açar.

Google AdSense algoritmaları yapay ve kazara tıklamaları çok hassas takip eder:

  • Kullanıcı reklama tıkladıktan 1 saniye sonra geri dönüyorsa,
  • Sitenin CLS skoru 0.25’in üzerindeyse,

AdSense hesabınıza önce “Geçersiz Trafik Uyarısı” (Invalid Traffic), ardından reklam gösterim kısıtlaması uygulanır. Bu nedenle reklam alanlarında sıfır kayma sağlamak doğrudan gelir güvenliği meselesidir.

2. Rezerve CSS Alanları ve Modern Reklam Konteynerleri

Reklam scriptleri (adsbygoogle.js) sayfaya asenkron enjekte edilir. Sunucudan yanıt gelene kadar o alan tarayıcıda 0 piksel yüksekliktedir. Reklam yüklendiği anda div genişler ve altındaki her şeyi aşağı iter.

Bunu engellemenin modern mühendislik çözümü:

/* Masaustu Lider Reklam Alani */
.ad-slot-header {
  width: 100%;
  max-width: 728px;
  min-height: 90px;
  margin: 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(240, 240, 240, 0.4);
  border: 1px dashed rgba(200, 200, 200, 0.6);
  border-radius: 8px;
  contain: layout; /* Sayfa duzeni hesaplamasini izole et */
}

/* Mobil Uyumlu Esnek Reklam Konteyneri */
.ad-slot-in-article {
  width: 100%;
  min-height: 250px;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: layout;
}

@media (min-width: 768px) {
  .ad-slot-in-article {
    min-height: 280px;
  }
}

Bu CSS kuralı sayesinde tarayıcı, sayfa henüz render edilirken reklamın yerleşeceği 90 piksel veya 250 piksellik boşluğu hemen ayırır. Reklam 2 saniye sonra gelse bile sayfa düzeni 1 milimetre dahi oynamaz.

3. Görsellerde width, height ve aspect-ratio Disiplini

Yalnızca reklamlar değil, responsive görseller de CLS’in ana kaynaklarındandır.

Geleneksel hata: <img src="/cover.jpg" alt="Kapak" class="w-full h-auto" />

Doğru yaklaşım:

<img 
  src="/cover.webp" 
  alt="Teknik Mimari Semasi" 
  width="1200" 
  height="630" 
  loading="lazy" 
  decoding="async"
  style="aspect-ratio: 1200 / 630; width: 100%; height: auto;" 
/>

Görsel henüz sunucudan inmeden önce tarayıcı genişlik ve yükseklik oranından (aspect ratio) kaplayacağı dikey alanı tam olarak hesaplar ve metinleri aşağı kaydırmaz.

4. İlgili Konular ve İç Bağlantılar

5. Sıkça Sorulan Sorular

AdSense boş reklam dönerse rezerve alan çirkin bir beyaz boşluk olarak mı kalır?

Google AdSense bir kullanıcıya uygun reklam bulamadığında ilgili div’e data-ad-status="unfilled" özniteliğini ekler. CSS ile bu durumu yakalayıp konteyneri gizleyebilirsiniz:

ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

Ancak bu gizleme işlemini sayfa açılırken değil, yalnızca reklam servisi yanıt döndükten sonra çalıştırmalısınız.

Web fontlarının geç yüklenmesi CLS’e sebep olur mu?

Evet. FOIT (Flash of Invisible Text) veya FOUT (Flash of Unstyled Text) durumlarında sistem yazı tipi ile sonradan gelen özel fontun harf genişlikleri farklıysa metin satır atlar ve CLS üretir. Bunu önlemek için Google Fonts yerine WOFF2 fontlarını sitenizde barındırmalı (self-host) ve @font-face içinde font-display: swap kullanmalısınız.

6. Web Fontları İçin FOUT/FOIT Çözümü ve font-display: swap

Kullanıcıların internet bağlantısı yavaş olduğunda, harici CDN’lerden çekilen web yazı tipleri (örneğin Google Fonts) indirilene kadar tarayıcı metinleri ya hiç göstermez (Flash of Invisible Text) ya da varsayılan Times New Roman ile gösterip aniden yeni yazı tipine geçer (Flash of Unstyled Text).

Eğer iki fontun karakter aralıkları ve satır yükseklikleri uyuşmuyorsa, font yüklendiği anda bütün paragraflar satır atlar ve sayfa aşağı kayarak yüksek CLS cezası üretir.

Bunu çözmek için fontlar WOFF2 formatında yerel olarak barındırılmalı (self-hosted) ve CSS’te size-adjust ile sistem yazı tipinin boyutları özel yazı tipine milimetrik eşitlenmelidir:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

Bu gelişmiş tipografi tekniği ile font sonradan devreye girse dahi metnin kapladığı kutunun piksel alanı 1 birim dahi değişmez ve CLS skoru tam 0 olarak korunur.

7. Dinamik Bildirim ve Çerez Çubuklarının (Banner) CLS’e Etkisi

Sayfanın en üstünde veya en altında sonradan beliren KVKK / GDPR çerez izin çubukları, eğer sayfa düzenini iterek açılıyorsa devasa bir CLS cezasına yol açar.

Doğru mühendislik uygulaması:

  • Çerez paneli position: fixed veya position: absolute ile normal belge akışının (document flow) tamamen dışına çıkarılmalıdır.
  • Açılış animasyonlarında top veya height yerine GPU hızlandırmalı transform: translateY(0) kullanılmalıdır.
  • Bu sayede tarayıcı sayfa düzenini (layout) yeniden hesaplamak zorunda kalmaz; yalnızca kompozisyon (composite) katmanında görseli hareket ettirir ve CLS skoru kesinlikle 0 kalır.

8. Dinamik Olarak Eklenen DOM Elemanları ve contain-intrinsic-size

Kullanıcı aşağı kaydırdıkça (infinite scroll veya lazy load) sayfaya sonradan eklenen kartlar ve yorum bölümleri de sayfa kaymalarına neden olabilir.

Modern CSS’in content-visibility: auto ve contain-intrinsic-size özellikleri bu sorunu kökten çözer:

.comment-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Henuz ekrana girmemis alan icin 500px rezerv */
}

Tarayıcı, ekran dışında kalan bu bölümü henüz render etmez; böylece ilk sayfa açılışında CPU tasarrufu sağlar. Ancak kaplayacağı 500 piksellik sanal alanı önceden rezerve ettiği için kullanıcı aşağı kaydırdığında kaydırma çubuğu (scrollbar) zıplamaz ve CLS tamamen sıfır kalır.