28 Ağustos 2026
Bir web sitesini ziyaret ettiğinizde tam bir butona veya linke tıklamak üzereyken aniden üstte beliren bir reklam veya sonradan yüklenen bir görsel nedeniyle sayfanın aşağı kayması ve yanlış bir yere tıklamanız, internetteki en can sıkıcı kullanıcı deneyimi hatalarından biridir. Google’ın bu görsel kararsızlığı ölçmek için geliştirdiği Core Web Vitals metriğine Cumulative Layout Shift (CLS) adı verilir.
CLS puanının yüksek olması yalnızca kullanıcıları rahatsız etmekle kalmaz; Google’ın Sayfa Deneyimi (Page Experience) sıralama sinyallerinde doğrudan puan kaybettirir.
1. CLS Eşik Değerleri ve Matematiksel Formülü
$$\text{Düzen Kayma Skoru (CLS)} = \text{Etki Payı (Impact Fraction)} \times \text{Mesafe Payı (Distance Fraction)}$$
[İyi (Good)] ─────────── 0.0 - 0.1 (Hedeflenen İdeal Seviye)
[Geliştirilmeli] ─────── 0.1 - 0.25
[Zayıf (Poor)] ───────── 0.25 ve Üzeri (Sıralama Kaybı Riski)- Etki Payı: Kaymadan etkilenen görünür ekran alanının yüzdesi.
- Mesafe Payı: Kararsız öğenin ekranda dikey veya yatay olarak katettiği piksel mesafesi.
2. CLS Skorunu Bozan 4 Temel Hata ve CSS Çözümleri
| CLS Sebebi | Neden Oluşur? | Çözüm Yolu |
|---|---|---|
| Boyutsuz Görseller ve Videolar | Tarayıcı görsel inene kadar yer ayırmaz; görsel inince alt metin zıplar. | width, height veya aspect-ratio tanımlamak. |
| Dinamik Reklam ve Banner Blokları | Reklam alanı boş başlar; JS ile reklam gelince içerik aşağı itilir. | Reklam kapsayıcısına CSS ile min-height rezerve etmek. |
| Yazı Tipi Atlama (FOIT / FOUT) | Web fontu yüklenirken sistem fontuyla yer değiştirip satır kırar. | font-display: optional veya size-adjust kullanmak. |
| DOM’a Geç Enjekte Edilen Bileşenler | Sayfanın üstüne sonradan açılan bülten/çerez barları. | Sabit yükseklikli iskelet (skeleton UI) yerleşimi. |
3. Kod Düzeyinde Kesin CLS Çözümleri
1. Görsellere Modern CSS aspect-ratio Tanımlama
Görsellerin yüklenmeden önce ekranda tam yer kaplamasını sağlamak için:
/* Responsive görsellerde kesin en-boy oranı */
img.responsive-banner {
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* Tarayıcı görsel inmeden 16:9 alanı boş bırakır */
display: block;
}2. Reklam ve Banner Kapsayıcılarına Alan Rezerve Etme (Slot Reservation)
<!-- Reklam gelmeden önce 250px yer rezerve edilir -->
<div class="ad-slot-container" style="min-height: 250px; background: #f8fafc;">
<!-- Dinamik Reklam Kodu Buraya Yüklenir -->
</div>Bu sayede reklam yüklendiğinde altındaki içerik aşağı zıplamaz (CLS = 0).
3. Font Kaymalarını size-adjust ile Sıfırlama
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}
/* Fallback sistem fontunu özel fontun boyutuna eşitle */
@font-face {
font-family: 'FallbackFont';
src: local('Arial');
ascent-override: 90%;
descent-override: 20%;
size-adjust: 100%;
}Sıkça Sorulan Sorular
CLS Lighthouse’ta 0 çıkarken gerçek kullanıcılarda (CrUX) neden yüksek çıkar?
Lighthouse testi sayfa açılışının ilk 5 saniyesini ölçer. Gerçek kullanıcılar sayfayı aşağı kaydırdığında (scroll) tetiklenen geç reklamlar veya dinamik açılır menüler gerçek kullanıcı CLS skorunu yükseltir.
Kullanıcının kendi tıkladığı açılır akordeon menüler CLS sayılır mı?
Hayır. Kullanıcı bir butona tıkladıktan sonra 500ms içinde gerçekleşen düzen kaymaları (User-Initiated Shifts) Google tarafından CLS puanından muaf tutulur.
Stratejik Sonuç
CLS optimizasyonu, web sitenizin görsel stabilitesini sağlayarak ziyaretçilerinizin güvenini ve dönüşüm oranlarını artırır. Kusursuz ön yüz mühendisliği ve hız için teknik SEO ve Core Web Vitals çözümlerimizi inceleyin.
İlgili Yazılar
- Jobs-to-be-Done (JTBD) Metodu ile Müşteri Deneyimi ve SEO
- Yandex Webmaster ile SEO Performansınızı Artırmanın 12 Yolu
- Screaming Frog’da XPath ile Veri Kazıma: En Çok Kullanılan 15 Komut
- WordPress Hız Eklentileri ve Core Web Vitals Optimizasyonu
- WebP ve WebM Formatları: Web Medya Sıkıştırma Rehberi