CLS (Cumulative Layout Shift) Nedir ve Nasıl Düzeltilir?

Bir haber sitesinde makaleyi okurken tam ilginizi çeken cümleye gelmişken sayfa birden aşağı kayar, gözünüz satırı kaybeder. Ya da bir e-ticaret sitesinde "Sepete Ekle" düğmesine basacakken görsel geç yüklenir, düğme yer değiştirir ve yanlışlıkla başka bir ürünü sepete atarsınız. Bu can sıkıcı deneyimin teknik bir adı var: Cumulative Layout Shift (CLS) — Türkçesiyle kümülatif düzen kayması. Kullanıcıların "bu site amatörce yapılmış" hissine kapılmasının en sık nedenlerinden biri tam olarak budur.

Bu rehberde CLS nedir sorusunu, sitenizde hangi unsurların bu kaymalara yol açtığını ve her birini nasıl kalıcı olarak düzelteceğinizi somut örneklerle anlatıyoruz. İyi haber şu: CLS, üç Core Web Vitals metriği arasında genellikle en hızlı ve en ucuz düzeltilebilen olanıdır. İster kendi sitenizi yönetin ister bir ajansla çalışın, bu yazının sonunda sitenizdeki kayma kaynaklarını gözünüzle tespit edebilecek ve hangi düzeltmeyi önce yapmanız gerektiğine karar verebilecek düzeye geleceksiniz.

Kısa tanım: CLS (Cumulative Layout Shift), bir sayfanın yüklenme ve kullanım süresi boyunca görsel öğelerin beklenmedik biçimde yer değiştirmesini ölçen bir Core Web Vitals metriğidir. Skor ne kadar düşükse (0'a yakınsa), sayfa o kadar sabit ve öngörülebilirdir.

CLS (Cumulative Layout Shift) Nedir?

CLS, Google'ın kullanıcı deneyimini ölçmek için kullandığı üç Core Web Vitals metriğinden biridir (diğer ikisi LCP ve INP'dir). LCP yükleme hızını, INP etkileşim tepkiselliğini ölçerken, CLS görsel kararlılığı ölçer.

Basitçe anlatmak gerekirse: sayfa yüklenirken veya kullanıcı sayfayla etkileşimdeyken bir öğe (görsel, metin bloğu, buton, reklam) beklenmedik biçimde konumunu değiştirdiğinde bir layout shift (düzen kayması) yaşanır. CLS, sayfanın ömrü boyunca gerçekleşen tüm bu kaymaların toplam etkisini tek bir sayıya indirger.

Google'ın eşik değerlerine göre:

Skor hesaplanırken iki faktör çarpılır: etki oranı (kayan alanın ekrandaki payı) ve mesafe oranı (öğenin ne kadar kaydığı). Yani hem küçük ama sık kaymalar hem de büyük tek seferlik kaymalar skoru yükseltebilir.

Neden önemli? İki sebepten: Birincisi, kullanıcı deneyimini doğrudan bozar — yanlış tıklamalar, okuma kaybı ve genel bir güvenilmez site hissi yaratır. İkincisi, CLS Google'ın sıralama sinyallerinden biridir; kötü bir CLS skoru, diğer her şey eşit olduğunda rakiplerinizin önüne geçmenizi zorlaştırır.

CLS skorunuzu görmek için PageSpeed Insights kullanımı yazımızdaki adımları izleyebilir ya da Google Search Console'daki "Önemli Web Verileri" raporuna bakabilirsiniz. Search Console gerçek kullanıcı verisini (saha verisi) gösterirken, PageSpeed Insights hem saha hem laboratuvar verisini bir arada sunar. Adım adım kontrol listesi için Core Web Vitals çözüm rehberimize de göz atabilirsiniz.

CLS Skorunuzu Nasıl İzlersiniz?

Kaymanın tam olarak hangi öğeden kaynaklandığını görmek isterseniz Chrome DevTools'u açın, Performance panelinden bir kayıt başlatıp sayfayı yeniden yükleyin. Kayıt bittiğinde "Experience" satırında kırmızı bloklar hâlinde işaretlenen düzen kaymalarını görürsünüz; her birinin üzerine tıkladığınızda hangi HTML öğesinin kaydığını ve ne kadar kaydığını ayrıntılı biçimde inceleyebilirsiniz. Bu, özellikle birden fazla şüpheli öğeniz varsa (örneğin hem bir reklam hem bir font hem de bir görsel) suçluyu kesin olarak belirlemenin en güvenilir yoludur.

Kaymaya Yol Açan Başlıca Nedenler

Pratikte CLS sorunlarının neredeyse tamamı dört kaynaktan gelir.

1. Boyut Belirtilmemiş Görsel ve Videolar

En yaygın neden budur. Tarayıcı, bir <img> etiketinin ne kadar yer kaplayacağını bilmiyorsa, görsel indirilene kadar o alanı boş bırakır (genelde yükseklik sıfır kabul eder). Görsel indiğinde alan aniden büyür ve altındaki her şeyi aşağı iter. Örneğin Konya'da mobilya satan bir e-ticaret sitesinde ürün galerisindeki görsellere boyut tanımlanmadığında, kullanıcılar sayfayı her kaydırdığında görsellerin zıpladığını fark eder ve bu da güven kaybına yol açar. Aynı sorun <video>, <iframe> ve gömülü (embed) içerikler için de geçerlidir; kök nedeni ve diğer görsel performans konularını görsel optimizasyonu yazımızda daha ayrıntılı ele alıyoruz.

2. Geç Yüklenen Web Fontları

Özel bir web fontu kullanıyorsanız, tarayıcı fontu indirene kadar ya sistem fontuyla metni gösterir ya da metni tamamen gizler. Font indiğinde metin yeniden çizilir; farklı fontların harf genişlikleri farklı olduğu için satırlar kayar, paragraflar uzayıp kısalır. Buna FOUT (flash of unstyled text) denir.

3. Sonradan Enjekte Edilen İçerik

Reklam banner'ları, çerez onay kutuları, "bültenimize kaydolun" pop-up'ları, sosyal medya gömme kodları — bunların hepsi genellikle sayfa ilk çizildikten sonra yüklenir ve kendine yer açmak için etrafındaki içeriği iter. Özellikle sayfanın üst kısmına, mevcut içeriğin üzerine değil arasına enjekte edilen reklamlar CLS'nin en büyük düşmanıdır.

4. Layout Özelliklerini Değiştiren Animasyonlar

top, left, width, height, margin gibi CSS özelliklerini değiştiren animasyonlar (örneğin bir bildirim çubuğunun yukarıdan kayarak gelmesi) tarayıcının sayfanın geri kalanını yeniden hesaplamasına (reflow) neden olur. Bu da her animasyon karesinde küçük düzen kaymaları üretir.

5. Otomatik Kaydırmalı Slider ve Banner Rotasyonları

Anasayfalarda sık kullanılan otomatik geçişli görsel slider'lar, geçiş anında farklı yükseklikte içerikler gösteriyorsa (örneğin bir slaytta tek satır başlık varken diğerinde iki satır) her geçişte altındaki içeriği aşağı itebilir. Aynı sorun, kullanıcı onayı beklenmeden otomatik açılan çerez bildirimleri ve bildirim izni kutuları için de geçerlidir. Çözüm aynı mantıkla ilerler: slider konteynerine sabit bir yükseklik verin ve otomatik açılan kutuları sayfanın normal akışının dışında (overlay) konumlandırın.

Dikkat: Kullanıcı bir düğmeye tıkladıktan 500 milisaniye içinde gerçekleşen kaymalar CLS hesabına dahil edilmez, çünkü bunlar beklenen, kullanıcı kaynaklı değişikliklerdir (örneğin bir akordiyon menünün açılması). Asıl sorun, kullanıcının hiçbir şey yapmadığı anlarda gerçekleşen beklenmedik kaymalardır.

CLS Nasıl Düzeltilir? Adım Adım Çözümler

1. Her Görsele ve Videoya Boyut Tanımlayın

En temel ve en etkili çözüm budur: her <img> ve <video> etiketine width ve height niteliklerini (ya da modern tarayıcılarda CSS aspect-ratio özelliğini) ekleyin. Tarayıcı bu bilgiyle görsel indirilmeden önce doğru orantıda bir alan ayırır; görsel geldiğinde hiçbir kayma olmaz.

2. Font Yüklemesini font-display ile Kontrol Edin

@font-face tanımınıza font-display: swap veya optional ekleyin ve mümkünse kritik fontları <link rel="preload"> ile önceden yükleyin. Daha da iyisi, yedek fontunuzu özel fontunuza yakın metrik değerlerde seçerek geçiş anındaki kaymayı neredeyse sıfıra indirebilirsiniz.

3. Dinamik İçerikler İçin Önceden Alan Ayırın

Reklam, embed veya banner koyacağınız her alana min-height ile önceden bir yer kaplama tanımlayın. İçerik henüz yüklenmemiş olsa bile o boşluk zaten orada duruyor olacağından, geldiğinde hiçbir şeyi itmez.

4. Yeni İçeriği transform ile Hareket Ettirin

Bir öğeyi hareket ettirmeniz gerekiyorsa top/left/margin yerine CSS transform: translate() kullanın. transform, tarayıcının layout'u yeniden hesaplamasını gerektirmez; sadece görsel katmanda kayar. Böylece animasyon CLS'ye hiç dahil olmaz.

5. Kullanıcı Etkileşimi Olmadan Üst İçeriği Değiştirmeyin

Sayfa yüklendikten sonra görünür alanın üstüne yeni bir öğe (örneğin bir uyarı çubuğu) eklemeniz gerekiyorsa, bunu ya sayfa ilk çizilmeden önce yapın ya da mevcut içeriği aşağı itmeyecek şekilde konumlandırın.

Aşağıdaki örnek, en sık karşılaşılan iki düzeltmeyi bir arada gösteriyor:

<!-- Boyutsuz görsel yerine: kayma garantili -->
<img src="urun-gorseli.jpg" alt="Ürün görseli">

<!-- Doğrusu: tarayıcı alanı önceden ayırır -->
<img src="urun-gorseli.jpg" alt="Ürün görseli" width="800" height="600" loading="lazy">

<!-- Reklam/embed alanı için önceden yer rezervasyonu -->
<div class="reklam-alani">
  <!-- reklam scripti burada asenkron yüklenir -->
</div>

.reklam-alani {
  min-height: 250px; /* reklam gelmeden önce de bu alan boş dursun */
}

@font-face {
  font-family: "MarkaFontu";
  src: url("/fonts/marka-fontu.woff2") format("woff2");
  font-display: swap; /* font gelene kadar sistem fontunu göster, ani kaymayı azalt */
}

.bildirim-cubugu {
  /* top: 0 yerine transform kullanmak reflow'u önler */
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.bildirim-cubugu.acik {
  transform: translateY(0);
}

CLS Nedenleri ve Çözümleri Özet Tablosu

Sık Yapılan Hatalar

• Sadece masaüstünde test etmek: Mobilde reklam ve font kaynaklı kaymalar genellikle daha belirgindir; mutlaka mobil skorunu da kontrol edin.
• Görsel genişliğini yüzde 100 bırakıp yükseklik vermemek: Responsive tasarımda bile aspect-ratio ile oran korunmalı.
• Üçüncü taraf scriptleri kontrolsüz bırakmak: Bir reklam ağı veya sohbet widget'ı kendi CLS'nizi bozabilir; bu scriptlerin alanlarını da rezerve edin.
• Tek seferlik ölçüp unutmak: Yeni bir kampanya banner'ı veya widget eklediğinizde CLS'yi tekrar kontrol etmeyi ihmal etmeyin.
• Yalnızca ilk yüklemeyi test edip kaydırma sonrası kaymaları göz ardı etmek: Kullanıcı sayfayı aşağı kaydırdıkça geç yüklenen görseller veya reklamlar da CLS'ye dahil olur; testinizi yalnızca sayfanın en üstüyle sınırlamayın.

Bu kontrolleri yaparken sitenizin diğer performans metriklerini de gözden kaçırmayın; LCP iyileştirme yazımızda anlattığımız gibi CLS ve yükleme hızı genellikle aynı kök nedenlerden (optimize edilmemiş görseller, ağır scriptler) beslenir.

Sıkça Sorulan Sorular

CLS skorum neden mobilde masaüstünden daha kötü çıkıyor?

Mobil cihazlarda ekran daha küçük olduğu için aynı piksel kayması, ekranın daha büyük bir oranını kapladığından etki oranı yükselir. Ayrıca mobil bağlantılar genellikle daha yavaş olduğundan geç yüklenen görsel ve reklamlar mobilde daha sık kaymaya yol açar.

CLS'yi tamamen sıfıra indirmek gerekir mi?

Hayır, gerekmez. Google'ın iyi eşiği 0,1 ve altıdır; mükemmeliyetçilik yerine bu eşiğin altında kalmaya odaklanın. Bazı dinamik içerikli sitelerde (örneğin kullanıcı yorumlarının sonradan yüklendiği sayfalar) küçük ve kontrollü kaymalar kaçınılmaz olabilir. Önemli olan skorunuzun sınırın belirgin biçimde altında ve zaman içinde stabil kalmasıdır; ara sıra sınıra yakın bir ölçüm paniğe gerek duymaz.

Tek bir sayfa mı yoksa tüm site mi ölçülüyor?

Google, Search Console'daki saha verisinde site genelinde benzer sayfaları gruplandırarak (örneğin tüm ürün sayfaları tek bir grup) değerlendirir. Bu yüzden bir şablon sorunu, örneğin tüm ürün sayfalarında kullanılan aynı reklam kodu, yüzlerce sayfayı aynı anda etkileyebilir.

CLS düzeltmesi SEO sıralamasını hemen etkiler mi?

Core Web Vitals, Google'ın sıralama sinyallerinden yalnızca biridir ve etkisi içerik kalitesi kadar büyük değildir. Ancak iyileşme genellikle hem kullanıcı deneyimi metriklerinde hem de zamanla arama sıralamalarında olumlu yansır.

CSS aspect-ratio tüm tarayıcılarda çalışır mı?

Güncel Chrome, Firefox, Safari ve Edge sürümlerinin tamamı aspect-ratio özelliğini destekler. Çok eski tarayıcı desteği gerekiyorsa, yedek olarak width ve height niteliklerini de eklemeniz yeterlidir.

Sonuç

CLS, çoğu zaman birkaç satır CSS ve doğru HTML niteliğiyle düzeltilebilen, buna karşılık göz ardı edildiğinde kullanıcıyı ve Google'ı aynı anda rahatsız eden bir metriktir. Görsellerinize boyut tanımlamak, fontlarınızı font-display ile yönetmek ve dinamik içerikler için önceden alan ayırmak, çoğu sitede CLS skorunu iyi seviyeye taşımaya yeter. En büyük fayda, bu düzeltmelerin çoğunun bir kerelik olmasıdır: doğru kurduğunuz bir şablon veya bileşen, yeni içerik ekledikçe kendiliğinden CLS dostu kalmaya devam eder.

Sitenizin CLS dahil tüm Core Web Vitals metriklerinde nerede durduğunu görmek ister misiniz? SeoPulse ile ücretsiz analiz yaptırarak sitenizdeki kayma kaynaklarını ve diğer teknik SEO sorunlarını tek raporda görebilirsiniz.