CLS Nedir? Düzen Kayması Sorununu Bulma ve Düzeltme Rehberi

CLS (Cumulative Layout Shift), Türkçesiyle kümülatif düzen kayması, bir sayfadaki görünür öğelerin kullanıcı hiçbir şey yapmadan yer değiştirmesini ölçen bir Core Web Vitals metriğidir. Değer birimsizdir; 0,1 ve altı iyi, 0,25 üzeri kötü kabul edilir. Okumaya başladığınız paragrafın bir anda aşağı kayması ya da tıklamak üzere olduğunuz butonun yerine reklamın gelmesi, CLS'nin ölçtüğü sorunun ta kendisidir.

Bu rehberde CLS'nin nasıl hesaplandığını, saha ve laboratuvar verisinin neden farklı sonuç verdiğini, kaymaya yol açan tipik nedenleri, kayan öğeyi tarayıcının geliştirici araçlarıyla nasıl bulacağınızı ve her nedenin kod düzeyinde nasıl düzeltileceğini anlatıyoruz. Core Web Vitals'ın genel resmi ve LCP için LCP Nedir? Core Web Vitals rehberine bakabilirsiniz; burada yalnız CLS'ye odaklanıyoruz.

CLS neyi ölçer, neyi ölçmez?

CLS, beklenmedik düzen kaymalarını ölçer. Buradaki "beklenmedik" kelimesi önemlidir. Kullanıcı bir akordiyonu açtığında içeriğin aşağı itilmesi beklenen bir davranıştır ve sayılmaz. Tarayıcı, kullanıcının tıklama, dokunma veya tuşa basma gibi bir girdisinden sonraki yaklaşık 500 milisaniye içinde gerçekleşen kaymaları hesaba katmaz. Kaydırma (scroll) ise bu anlamda bir girdi sayılmaz; yani sayfayı kaydırırken tembel yüklenen bir görselin içeriği itmesi CLS'ye yansır.

Ölçülen şey, bir öğenin bir kareden diğerine başlangıç konumunu değiştirmesidir. Yeni bir öğenin DOM'a eklenmesi tek başına kayma değildir; kayma, o eklemenin mevcut öğeleri yerinden oynatmasıyla oluşur. Aynı şekilde CSS transform ile yapılan hareketler düzeni değiştirmediği için kayma olarak sayılmaz. Bu ayrım, aşağıdaki çözümlerin birçoğunun temelini oluşturur.

CLS nasıl hesaplanır?

Her tekil düzen kayması için tarayıcı bir kayma puanı (layout shift score) üretir:

Kayma puanı = Etki oranı x Mesafe oranı

Etki oranı (impact fraction)

Etki oranı, kayan öğenin önceki ve sonraki konumlarının birleşiminin görünür alanın (viewport) ne kadarını kapladığıdır. Görünür alanın yarısını kaplayan bir blok, görünür alanın dörtte biri kadar aşağı kayarsa, eski ve yeni konumunun birleşimi görünür alanın yüzde 75'ini kaplar. Etki oranı 0,75 olur.

Mesafe oranı (distance fraction)

Mesafe oranı, kayan öğenin yatay veya dikey olarak katettiği en büyük mesafenin, görünür alanın en büyük boyutuna (genellikle yüksekliğe) bölünmesidir. Yukarıdaki örnekte öğe, görünür alan yüksekliğinin dörtte biri kadar hareket ettiği için mesafe oranı 0,25'tir.

Bu durumda kayma puanı 0,75 x 0,25 = 0,1875 olur. Tek bir kayma, iyi eşik olan 0,1'i neredeyse iki katına çıkarmaya yeter.

Senaryo	Etki oranı	Mesafe oranı	Kayma puanı
Ekranın yarısını kaplayan blok, ekranın %25'i kadar kayıyor	0,75	0,25	0,1875
Ekranın %20'sini kaplayan blok, ekranın %5'i kadar kayıyor	0,25	0,05	0,0125
Tüm ekranı kaplayan içerik, ekranın %10'u kadar kayıyor	1,0	0,10	0,10

Tablodaki son satır pratikte çok sık görülür: sayfanın en üstüne sonradan eklenen ince bir duyuru şeridi, altındaki tüm içeriği iter ve tek başına sınırı zorlar.

Oturum pencereleri: "kümülatif" ne demek?

CLS adındaki "kümülatif" ifadesi eskiden sayfanın ömrü boyunca tüm kaymaların toplanması anlamına geliyordu. Bu yöntem, uzun süre açık kalan tek sayfa uygulamalarını haksız biçimde cezalandırdığı için değiştirildi. Bugün kaymalar oturum pencerelerine (session window) gruplanır:

• Aralarında 1 saniyeden az boşluk olan kaymalar aynı pencereye girer.
• Bir pencere en fazla 5 saniye sürebilir.
• Her pencerenin içindeki kayma puanları toplanır.
• Sayfanın CLS değeri, en yüksek puanlı pencerenin toplamıdır.

Yani sayfa yüklenirken 2 saniye içinde art arda gelen üç kayma (0,04 + 0,05 + 0,03) tek pencerede 0,12 eder ve CLS 0,12 olur. Kullanıcı 30 saniye sonra başka bir kayma yaşasa bile, o kayma ayrı bir pencereye düşer ve yalnız daha büyükse sonucu değiştirir.

İyi ve kötü CLS eşikleri

CLS değeri	Değerlendirme
0,1 ve altı	İyi
0,1 ile 0,25 arası	İyileştirilmeli
0,25 üzeri	Kötü

Bu eşikler, gerçek kullanıcı verisinin 75. yüzdelik dilimine uygulanır. Bir sayfanın "iyi" sayılması için ziyaretlerin en az dörtte üçünde CLS'nin 0,1 veya altında kalması gerekir. Mobil ve masaüstü ayrı değerlendirilir; dar ekranda aynı reklam alanı görünür alanın çok daha büyük bir kısmını kapladığı için mobil CLS genellikle daha kötüdür.

Saha verisi ile laboratuvar verisi farkı

CLS, laboratuvar ile sahanın en çok ayrıştığı metriktir. Bunun nedeni iki ölçümün farklı zaman dilimlerine bakmasıdır.

	Laboratuvar verisi	Saha verisi
Kaynak	Lighthouse, PageSpeed Insights'ın tanılama bölümü	Chrome kullanıcı deneyimi raporu (CrUX), Search Console
Ölçüm süresi	Yalnız ilk yükleme	Sayfanın açık kaldığı tüm süre
Kullanıcı etkileşimi	Yok, kaydırma yapılmaz	Gerçek kaydırma, tıklama, gezinme
Çerezler, oturum, kişiselleştirme	Genellikle yok	Var

Bu nedenle laboratuvarda 0 görünen bir sayfa sahada 0,3 olabilir. Tipik sebepler şunlardır: kaydırınca yüklenen görseller ve reklamlar, giriş yapmış kullanıcıya gösterilen ek öğeler, çerez onay banner'ının bazı ziyaretçilerde farklı yerde açılması ve yavaş bağlantıda fontların geç gelmesi. Tersi de olur: geri/ileri önbelleğinden (bfcache) anında açılan sayfalar sahada sıfır kayma üretir ve ortalamayı iyileştirir.

Pratik kural: hedef saha verisidir, teşhis aracı laboratuvardır. Search Console'daki Core Web Vitals raporu sorunlu URL gruplarını gösterir; o gruptan örnek bir sayfayı laboratuvarda açıp kaymayı yeniden üretmeye çalışırsınız. PageSpeed Insights sonuçlarını nasıl okuyacağınızı site hızı testi rehberinde ayrıntılı anlattık.

Düzen kaymasına yol açan nedenler

1. Boyutsuz görseller, videolar ve iframe'ler

En yaygın nedendir. Tarayıcı, width ve height belirtilmemiş bir görselin boyutunu ancak dosyanın başı indiğinde öğrenir. O ana kadar alan 0 piksel yüksekliğindedir; görsel geldiğinde altındaki her şeyi iter. Gömülü video oynatıcıları, harita iframe'leri ve sosyal medya gömmeleri de aynı şekilde davranır.

2. Reklam alanları ve dinamik eklentiler

Reklam ağları farklı boyutlarda kreatif döndürebilir ve reklam, sayfa yüklendikten saniyeler sonra gelir. Alan önceden ayrılmamışsa reklamın gelişi içeriği aşağı iter. Reklam doldurulamadığında alanın kapanması da yukarı doğru bir kaymadır. Canlı destek balonları, yorum widget'ları ve "önerilen içerik" kutuları da aynı grupta yer alır.

3. Web fontları: FOIT ve FOUT

Özel bir web fontu yüklenirken tarayıcı iki şeyden birini yapar. FOIT (Flash of Invisible Text) durumunda metin bir süre görünmez kalır, font gelince belirir. FOUT (Flash of Unstyled Text) durumunda önce yedek sistem fontuyla gösterilir, özel font gelince değiştirilir. İki fontun karakter genişliği, satır yüksekliği ve x-yüksekliği farklıysa değişim anında satırlar kırılır, paragraf uzar veya kısalır ve altındaki her şey kayar.

4. Sonradan eklenen banner ve bildirimler

Çerez onay şeritleri, "ücretsiz kargo" duyuruları, uygulama indirme bantları ve bülten çağrıları JavaScript ile sayfanın üstüne eklendiğinde tüm içeriği aşağı iter. Sorun banner'ın kendisi değil, akış içinde (normal flow) yer alacak şekilde eklenmesidir.

5. Düzen özelliklerini değiştiren animasyonlar

top, left, margin, height veya width gibi düzeni etkileyen özellikleri canlandırmak her karede yeni bir kayma üretir. Açılır menüler, kayan slider'lar ve "yukarı çık" efektleri bu yüzden CLS'yi gizlice yükseltebilir.

6. Geç gelen içerik ve iskelet uyuşmazlığı

Fiyat, stok durumu veya kişiselleştirilmiş öneriler bir API çağrısından sonra yerleştiriliyorsa ve iskelet (skeleton) alanı gerçek içerikten kısaysa, veri geldiğinde fark kadar kayma oluşur. İskelet kullanmak tek başına yetmez; boyutunun gerçek içerikle eşleşmesi gerekir.

Kayan öğeyi geliştirici araçlarıyla bulma

CLS'yi düzeltmenin ilk adımı, hangi öğenin kaydığını ve neyin onu ittiğini bulmaktır. Chrome geliştirici araçlarında bunu adım adım yapabilirsiniz.

1. Kayma bölgelerini görünür kılın. Geliştirici araçlarında Rendering panelini açın ve düzen kayması bölgelerini vurgulayan seçeneği işaretleyin. Sayfayı yenilediğinizde kayan alanlar kısa süreliğine renkli olarak işaretlenir.
2. Yavaş koşulları taklit edin. Ağ hızını yavaşlatın ve mobil cihaz görünümüne geçin. Kaymaların çoğu hızlı bağlantıda göze görünmeyecek kadar kısa sürer.
3. Performance kaydı alın. Performance panelinde yeniden yükleyerek kayıt başlatın. Zaman çizelgesinde düzen kaymaları ayrı bir iz olarak görünür; bir kaymaya tıkladığınızda hangi düğümlerin hareket ettiği ve puanı listelenir.
4. Kaydırarak test edin. Laboratuvar ölçümünün göremediği kaymaları yakalamak için kayıt sırasında sayfayı yavaşça sonuna kadar kaydırın.
5. Kaydırılanı değil, iteni bulun. Listede görünen öğe çoğunlukla masumdur; onu yerinden oynatan, hemen üstüne eklenen veya boyutu değişen öğedir.

Kaymaları konsoldan da izleyebilirsiniz. Aşağıdaki kod, her kaymanın puanını ve kayan düğümleri konsola yazar:

new PerformanceObserver(function (list) {
  list.getEntries().forEach(function (entry) {
    if (entry.hadRecentInput) return;
    console.log("Kayma puanı:", entry.value.toFixed(4));
    (entry.sources || []).forEach(function (s) {
      console.log("  Kayan öğe:", s.node, s.previousRect, s.currentRect);
    });
  });
}).observe({ type: "layout-shift", buffered: true });

Aynı mantığı gerçek kullanıcılardan veri toplamak için kullanabilirsiniz. Kayma puanı ile kayan öğenin seçicisini bir olay olarak Google Analytics 4'e göndermek, saha verisinde hangi şablonun sorunlu olduğunu gösterir. Etiketi kod yerine bir etiket yöneticisi üzerinden eklemek isterseniz Google Tag Manager rehberi başlangıç için yeterlidir.

CLS nasıl düzeltilir? Nedenlere göre çözümler

Görsellere width ve height verin

Modern tarayıcılar, görseldeki width ve height niteliklerinden en-boy oranını hesaplar ve görsel inmeden önce doğru yüksekliği ayırır. CSS ile genişliği esnek yapsanız bile oran korunur:

<img src="urun.webp" width="800" height="600" alt="Ürün görseli">

img {
  max-width: 100%;
  height: auto;
}

Buradaki 800 ve 600 değerlerinin görselin gerçek görüntülenme boyutu olması gerekmez; önemli olan oranın doğru olmasıdır. Duyarlı görsellerde (srcset) tüm kaynakların aynı oranda olmasına dikkat edin. Görsel formatı ve boyut optimizasyonu için WebP rehberine bakabilirsiniz.

Konteynerlerde aspect-ratio kullanın

Video, iframe ve arka plan görselli kartlarda CSS aspect-ratio özelliği aynı işi görür:

.video-kapsayici {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-kapsayici iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Bu yöntem, eskiden kullanılan yüzdelik padding-top hilesinin yerini almıştır ve daha okunaklıdır.

Reklam ve widget alanlarını önceden ayırın

Reklam alanına, o konumda en sık gösterilen kreatifin yüksekliği kadar min-height verin. Reklam gelmezse alanı kapatmak yerine boş bırakın veya bir yer tutucu gösterin:

.reklam-alani {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .reklam-alani { min-height: 100px; }
}

Reklamları mümkün olduğunca görünür alanın üst kısmından uzak tutmak da etkiyi azaltır; sayfa ortasındaki bir kayma, kullanıcı o noktaya gelmeden gerçekleşirse görünür alanı etkilemez.

Font değişimini kontrol edin

Font kaynaklı kaymalar için üç araç birlikte kullanılır:

• Kritik fontları önceden yükleyin. Font ne kadar erken gelirse değişim o kadar az fark edilir.
• font-display değerini bilinçli seçin. swap metni hemen gösterir ama değişim anında kayma riski taşır. optional font kısa sürede gelmezse o sayfa görüntülemesinde yedek fontla devam eder ve kaymayı tamamen önler.
• Yedek fontu özel fonta benzetin. size-adjust, ascent-override ve descent-override tanımlayıcılarıyla sistem fontunun ölçülerini özel fonta yaklaştırırsanız değişim sırasında satırlar kırılmaz.

<link rel="preload" href="/fonts/marka.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "Marka";
  src: url("/fonts/marka.woff2") format("woff2");
  font-display: optional;
}
@font-face {
  font-family: "Marka Yedek";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
}
body {
  font-family: "Marka", "Marka Yedek", sans-serif;
}

Örnekteki yüzde değerleri temsilidir; kendi fontunuz için yedek ile özel font arasında paragraf yüksekliği eşitlenene kadar deneyerek ayarlamanız gerekir.

Banner'ları akışın dışına alın

Çerez onayı ve duyuru şeritlerini içeriği itmeyecek biçimde yerleştirin. İki güvenli yol vardır: banner'ı position: fixed ile ekranın altına sabitlemek ya da üstte gösterilecekse alanını sunucudan gelen HTML içinde baştan ayırmak.

.cerez-bandi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

Üstteki duyuru şeridi kişiye göre değişmiyorsa en kolayı, onu JavaScript ile eklemek yerine doğrudan HTML'e yazmaktır.

Animasyonlarda transform kullanın

Bir öğeyi hareket ettirmek veya büyütmek için düzen özellikleri yerine transform ve opacity kullanın. Bunlar düzeni yeniden hesaplatmaz ve kayma üretmez:

/* Kayma üretir */
.panel.acik { top: 0; height: 300px; }

/* Kayma üretmez */
.panel { transform: translateY(-100%); transition: transform .3s; }
.panel.acik { transform: translateY(0); }

Geç gelen içerik için doğru boyutlu yer tutucu

API'den gelecek bir blok için iskelet kullanıyorsanız, iskeletin yüksekliğini gerçek içeriğin tipik yüksekliğine eşitleyin. Yeni içeriği mevcut içeriğin üstüne değil altına eklemek, sonsuz kaydırmalı listelerde "daha fazla yükle" butonu kullanmak ve kullanıcı etkileşimiyle tetiklenen değişiklikleri 500 milisaniye içinde tamamlamak da işe yarar.

CLS kontrol listesi

• Tüm img ve video etiketlerinde width ve height var mı?
• İframe, harita ve gömülü içeriklerin kapsayıcısında aspect-ratio veya sabit yükseklik tanımlı mı?
• Reklam ve widget alanlarına min-height verildi mi, mobil için ayrı değer var mı?
• Kritik fontlar önceden yükleniyor mu, font-display bilinçli seçildi mi?
• Çerez ve duyuru banner'ları içeriği itiyor mu?
• Animasyonlar yalnız transform ve opacity kullanıyor mu?
• İskelet yer tutucuların boyutu gerçek içerikle eşleşiyor mu?
• Test, yavaş ağda, mobil görünümde ve sayfanın sonuna kadar kaydırılarak yapıldı mı?
• Düzeltmeden sonra saha verisi 28 günlük pencerede izleniyor mu?

Bu liste daha geniş bir teknik denetimin parçasıdır; diğer başlıklar için teknik SEO kontrol listesine göz atabilirsiniz.

Düzeltmenin etkisini nasıl izlersiniz?

Saha verisi 28 günlük kayan bir pencereyle hesaplandığı için düzeltmenin sonucu bir gecede görünmez. Search Console'daki Core Web Vitals raporunda sorunlu URL grubunu seçip düzeltmeyi doğrulama işlemini başlatabilirsiniz; Google bu süreçte yeni veriyi izler ve sonucu bildirir. Bu arada laboratuvar ölçümleriyle düzeltmenin gerçekten çalıştığını teyit edin.

CLS iyileşmesinin iş sonucuna yansıyıp yansımadığını anlamak için aynı sayfa grubunun etkileşim oranı ve dönüşümünü önceki dönemle karşılaştırmak faydalıdır. SEO Analytics gibi Search Console ve GA4 verisini tek panelde birleştiren bir araçla, düzelttiğiniz şablondaki sayfaların tıklama ve etkileşim eğilimini düzeltme tarihinden önce ve sonra yan yana görebilirsiniz.

INP'ye kısa bir not

INP (Interaction to Next Paint), Core Web Vitals'ın üçüncü metriğidir ve kullanıcının tıklama, dokunma veya tuşa basmasından sonra sayfanın görsel olarak yanıt vermesinin ne kadar sürdüğünü ölçer; 200 milisaniye ve altı iyi kabul edilir. CLS ile bağlantısı şuradadır: etkileşimden sonra gelen yavaş yanıt, düzen değişikliğini 500 milisaniyelik muafiyet süresinin dışına iterek beklenmedik kayma olarak sayılmasına neden olabilir. Yani ağır JavaScript hem INP'yi hem de dolaylı olarak CLS'yi bozabilir. INP'nin ayrıntıları ve iyileştirme yöntemleri Core Web Vitals rehberinde yer alıyor.

Sık sorulan sorular

CLS değeri 0 olmalı mı?

Hayır, hedef 0,1 ve altıdır. Çok küçük kaymalar kullanıcı tarafından fark edilmez ve 0'a ulaşmak için harcanan çaba genellikle karşılığını vermez. Önceliği, değeri 0,1'in üstüne çıkaran büyük ve tekrarlayan kaymalara verin.

PageSpeed Insights'ta CLS iyi ama Search Console kötü diyor, neden?

Laboratuvar ölçümü yalnız ilk yüklemeye bakar, saha verisi ise gerçek kullanıcıların kaydırma ve gezinme sırasında yaşadığı kaymaları da kapsar. Kaydırınca yüklenen reklamlar, tembel yüklenen görseller ve kişiye göre değişen içerik bu farkın en yaygın nedenleridir.

Tembel yükleme (lazy loading) CLS'yi artırır mı?

Görselin boyutu tanımlıysa artırmaz, çünkü tarayıcı alanı önceden ayırır. Sorun, boyutsuz görsellerin tembel yüklenmesidir. Ayrıca görünür alanın üstündeki ilk görseli tembel yüklemek LCP'yi geciktirir; bu görseli normal yükleyin.

CLS sıralamayı doğrudan etkiler mi?

Core Web Vitals, Google'ın sayfa deneyimi sinyalleri arasındadır ancak içerik alaka düzeyinin önüne geçmez. Benzer kalitede sayfalar arasında fark yaratabilir; asıl etkisi ise kullanıcının yanlış yere tıklamasını, okumayı bırakmasını ve sayfadan çıkmasını önleyerek etkileşimi ve dönüşümü korumasıdır.