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:
| Kategori | CLS Skoru |
|---|---|
| İyi | < 0.1 |
| Geliştirilmeli | 0.1 – 0.25 |
| Kötü | > 0.25 |
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:
| Değer | Davranış | CLS Riski |
|---|---|---|
auto | Tarayıcı kararı | Orta |
block | Font gelene kadar gizle, sonra göster | Yüksek (FOIT) |
swap | Sistem fontuyla başla, özel fonta geç | Orta (FOUT) |
fallback | 100ms bekle, geçmezse sistem fontu kullan | Düşük |
optional | 100ms’de yoksa kullanma | En düşük |
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:
- Chrome DevTools’u açın (F12 veya Ctrl+Shift+I)
- “Performance” sekmesine tıklayın
- ”Record” düğmesine basın ve sayfayı yenileyin
- Kaydı durdurun
- ”Experience” bölümünde kırmızı “Layout Shift” bloklarını bulun
- Ü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:
- DevTools → Rendering panelini açın (üç nokta menüsü → More tools → Rendering)
- “Layout Shift Regions” seçeneğini etkinleştirin
- 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 CLS Hataları
Hata: Görseli CSS ile Boyutlandırıp HTML attribute’larını Atlama
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.
Hata: Font Önbelleğe Alındığı İçin CLS Görmeme
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.
Hata: Yalnızca Masaüstü CLS’yi Kontrol Etme
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.
Hata: CLS’yi Yalnızca İlk Yüklemede Ölçme
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.
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.
Sık Sorulan Sorular
CLS ile LCP arasındaki fark nedir?
LCP (Largest Contentful Paint) hız metriği olup sayfadaki en büyük içerik öğesinin ne kadar sürede yüklendiğini ölçer. CLS ise kararlılık metriğidir; sayfadaki beklenmedik düzen kaymalarının büyüklüğünü ve sıklığını ölçer. İkisi birbirinden bağımsız sorunlardır: LCP iyi olan bir sayfanın CLS’si kötü olabilir ya da tam tersi.
Kullanıcı etkileşiminden sonra gerçekleşen kaymalar CLS’ye dahil mi?
Hayır. Kullanıcı son 500 milisaniye içinde tıklama, dokunma veya klavye girişi yaptıysa bu etkileşimden kaynaklanan kaymalar CLS hesabına dahil edilmez. Bu kural, kullanıcının kasıtlı olarak tetiklediği içerik değişikliklerini (açılır menüler, accordion genişlemeleri vb.) cezalandırmamak için konulmuştur.
CLS’yi sıfıra indirmek mümkün mü?
Teorik olarak evet, pratikte çok zordur. Reklamlar, üçüncü taraf widget’lar ve dinamik içerik kullanan siteler genellikle bir miktar CLS üretir. Hedef 0.1’in altında kalmak olmalıdır; 0.05 ve altı mükemmel kabul edilir.
Tek sayfalık uygulamalarda (SPA) CLS nasıl ölçülür?
React, Vue, Angular gibi SPA’larda route değişikliklerinde yeni içerik yüklemesi CLS’ye yol açabilir. Bu uygulamalarda PerformanceObserver ile her “navigation” olayı sonrası CLS’yi sıfırlamak ya da route bazlı ölçüm yapmak gerekebilir. Web Vitals kütüphanesi SPA’ları otomatik olarak destekler.
Google CLS field verisini nereden alıyor?
Google, Chrome kullanıcılarından Chrome UX Report (CrUX) aracılığıyla gerçek kullanıcı verisi toplar. Bu veri yalnızca gizlilik ayarlarına göre paylaşmayı kabul eden kullanıcılardan gelir ve 28 günlük pencerede değerlendirilir. Search Console’da gördüğünüz CLS değerleri bu gerçek kullanıcı verisine dayanır.
Ö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.
