Cumulative Layout Shift (CLS) Nedir? Nasıl Optimize Edilir?

Bir habere tıklıyorsunuz, okumaya başladığınız anda yukarıda bir reklam yükleniyor ve metin aşağı kayıyor. Ya da tam “Sepete ekle” düğmesine basacakken üstte bir kampanya bandı beliriyor ve parmağınız başka bir bağlantıya denk geliyor. Cumulative Layout Shift (CLS), işte bu beklenmedik kaymaları ölçen metriktir.

CLS, Google’ın Core Web Vitals olarak adlandırdığı üç temel kullanıcı deneyimi metriğinden biridir. Diğer ikisi yüklenme hızını ölçen LCP ve etkileşime cevap süresini ölçen INP’dir. CLS ise bu üçlünün içinde hızla değil, görsel kararlılıkla ilgilenen tek metriktir: sayfa ne kadar hızlı açılırsa açılsın, içerik kullanıcının gözü önünde yer değiştiriyorsa deneyim bozuktur.

CLS nedir, neyi ölçer?

CLS, bir sayfanın ömrü boyunca gerçekleşen beklenmedik düzen kaymalarının toplam etkisini tek bir sayıya indirger. Burada iki kelime önemlidir.

Düzen kayması (layout shift): Ekranda görünen bir öğenin, bir kareden diğerine başlangıç konumunu değiştirmesidir. Yeni bir öğenin eklenmesi tek başına kayma sayılmaz; kayma, var olan öğelerin yerinden oynamasıyla oluşur. Sayfanın altına yeni bir blok eklendiğinde üstteki içerik yerinde kalıyorsa kayma yoktur. Aynı blok üste eklendiğinde ise altındaki her şey aşağı itilir ve kayma oluşur.

Beklenmedik: Kullanıcının kendi eylemiyle tetiklenen değişiklikler, örneğin bir akordeonu açtığında içeriğin aşağı açılması, kötü bir deneyim sayılmaz. Tarayıcı bu ayrımı basit bir kuralla yapar: kullanıcı bir tıklama, dokunma veya tuş basımı yaptıktan sonraki 500 milisaniye içinde gerçekleşen kaymalar CLS hesabına katılmaz. Kaydırma ve fareyi gezdirme bu istisnaya girmez; yani kullanıcı sayfayı aşağı kaydırırken tembel yüklenen bir görsel içeriği itiyorsa bu kayma sayılır.

CLS eşik değerleri

Google’ın değerlendirmesinde üç bant vardır:

1. İyi: 0,1 ve altı
2. İyileştirilmeli: 0,1 ile 0,25 arası
3. Zayıf: 0,25’in üzeri

Bu değerler tek bir ziyarete göre değil, gerçek kullanıcı ziyaretlerinin 75. yüzdelik dilimine göre değerlendirilir. Yani sayfanızın “iyi” sayılması için ziyaretlerin en az dörtte üçünde CLS’in 0,1’in altında kalması gerekir. Bu ayrıntı, “bende düzgün görünüyor” yanılgısının da sebebidir: hızlı bir bilgisayarda, önbelleği dolu bir tarayıcıyla açılan sayfa kaymadan yüklenebilir; yavaş bir mobil bağlantıda ise görseller ve reklamlar farklı sırayla geldiği için aynı sayfa ciddi biçimde kayabilir.

Kayma puanı nasıl hesaplanır?

Her tekil kayma için tarayıcı bir puan hesaplar:

Kayma puanı = Etki oranı × Mesafe oranı

Etki oranı (impact fraction), kayan öğelerin önceki ve sonraki konumlarının birleşiminin ekranın ne kadarını kapladığını gösterir. Ekranın yarısını kaplayan bir blok, ekranın dörtte biri kadar aşağı kayarsa, önceki ve sonraki konumun birleşimi ekranın yüzde 75’ini kaplar; etki oranı 0,75 olur.

Mesafe oranı (distance fraction), en çok kayan öğenin kat ettiği mesafenin, ekranın en büyük boyutuna (genellikle dikey yükseklik) oranıdır. Aynı örnekte blok ekran yüksekliğinin yüzde 25’i kadar kaydıysa mesafe oranı 0,25’tir.

Bu kaymanın puanı 0,75 × 0,25 = 0,1875 olur. Tek bir kayma, “iyi” eşiğini neredeyse iki kat aşmaya yeter. Bu hesap, küçük görünen kaymaların neden büyük puan ürettiğini açıklar: ekranın büyük bölümünü etkileyen kısa bir kayma bile ağır cezalandırılır.

Oturum pencereleri: CLS neden “toplam” değil?

Metriğin adı “kümülatif” olsa da CLS, sayfadaki tüm kaymaların basit toplamı değildir. Bu, 2021’de yapılan önemli bir değişiklikle netleşti. Eskiden uzun süre açık kalan sayfalar (sonsuz kaydırmalı akışlar, tek sayfa uygulamaları) zamanla sürekli puan biriktiriyor ve haksız biçimde cezalandırılıyordu.

Güncel hesapta kaymalar oturum pencerelerine gruplanır. Bir oturum penceresi, aralarında 1 saniyeden az boşluk bulunan ardışık kaymalardan oluşur ve en fazla 5 saniye sürebilir. Sayfanın CLS değeri, en yüksek puanlı oturum penceresinin toplamıdır.

Bunun pratik anlamı şudur: yükleme sırasında art arda yaşanan üç kayma aynı pencereye düşer ve toplanır. Ama sayfada iki dakika sonra yaşanan tek bir kayma ayrı bir penceredir ve yalnızca kendi başına en kötü pencereden büyükse sonucu değiştirir. Bu yüzden CLS iyileştirmesinde ilk bakılacak yer çoğunlukla ilk yükleme anındaki kayma dizisidir.

Saha verisi ile laboratuvar verisi neden farklı?

CLS, farkı en belirgin olan metriktir ve bu ayrımı bilmeden yapılan çalışmalar sıkça boşa gider.

Laboratuvar araçları (Lighthouse, PageSpeed Insights’ın alt bölümü, geliştirici araçları) sayfayı bir kez yükler ve genellikle yükleme bittiğinde ölçümü durdurur. Kullanıcı kaydırmaz, tıklamaz, reklam sunucusu her seferinde aynı cevabı vermez.

Saha verisi (Chrome User Experience Report, Search Console’daki Core Web Vitals raporu, kendi gerçek kullanıcı ölçümünüz) ise sayfanın tüm ömrünü kapsar: kullanıcının kaydırırken yüklenen görselleri, geç gelen reklamları, sonradan açılan çerez bildirimlerini, sekmeler arası geçişleri.

Sonuç olarak Lighthouse’ta CLS değeri 0 görünen bir sayfa, sahada 0,3 çıkabilir. Google’ın sıralamada dikkate aldığı veri saha verisidir. Laboratuvar araçları hatayı bulmak ve düzeltmeyi test etmek için, saha verisi ise gerçek durumu görmek için kullanılır. Bu ayrımın tüm hız metrikleri için geçerli olan mantığını site hızı yazımızda ayrıntılı ele aldık.

Geri-ileri önbelleği (bfcache) etkisi

Tarayıcının geri-ileri önbelleği, kullanıcı “geri” tuşuna bastığında sayfayı yeniden yüklemek yerine hafızadaki hâlini anında gösterir. Bu durumda sayfa yeniden oluşturulmadığı için kayma da oluşmaz. Sitenizin bu önbellekten yararlanabilmesi (örneğin sayfanın unload olay dinleyicisi kullanmaması ve Cache-Control: no-store başlığı taşımaması), saha verisindeki CLS’i dolaylı olarak iyileştirir.

CLS’in gerçek sebepleri

1. Boyutu belirtilmemiş görseller ve videolar

En yaygın sebep budur. Tarayıcı bir görselin boyutunu, görsel inene kadar bilmezse ona yer ayıramaz; görsel geldiğinde altındaki bütün içerik aşağı itilir. Çözüm basittir: her <img> ve <video> etiketine width ve height nitelikleri eklemek. Modern tarayıcılar bu iki değerden en-boy oranını hesaplar ve görsel duyarlı biçimde küçülse bile doğru yüksekliği önceden ayırır.

Duyarlı tasarımlarda CSS tarafında height: auto ile birlikte kullanılmalıdır. Görselin oranının bilindiği ama piksel boyutunun değiştiği durumlarda aspect-ratio özelliği de aynı işi görür.

2. Reklamlar, gömülü içerikler ve iframe’ler

Reklam alanları CLS’in en inatçı kaynağıdır; çünkü reklamın boyutu çoğu zaman sunucudan gelen cevaba göre değişir. Önerilen yaklaşım, reklam alanına en olası boyut kadar min-height ile yer ayırmak ve reklam gelmese bile bu alanı çökertmemektir. Boş kalan bir alan, çöken bir alandan her zaman daha iyidir.

YouTube videosu, sosyal medya gönderisi ve harita gibi gömülü içerikler için de aynı mantık geçerlidir: kapsayıcıya önceden sabit oran veya yükseklik verilmelidir.

Sayfanın en üstüne, ilk ekranın içine yerleştirilen reklamlar en yüksek riski taşır. Mümkünse ilk reklam alanını ilk ekranın altına taşımak, hem CLS’i hem de LCP’yi birlikte iyileştirir.

3. Sonradan eklenen içerik

Kampanya bantları, “Uygulamamızı indirin” şeritleri, çerez bildirimleri, stok uyarıları ve kişiselleştirilmiş öneri blokları genellikle JavaScript ile sonradan eklenir. Bunlar mevcut içeriğin üstüne eklendiğinde her şeyi aşağı iter.

Çözüm seçenekleri şunlardır: bu öğeler için baştan yer ayırmak, onları içeriği itmeyecek biçimde ekranın altına sabitlemek (örneğin çerez bildirimini alt kenarda bindirme olarak göstermek) ya da içerik yükleniyorken aynı boyutta bir iskelet (skeleton) gösterip sonra içeriği onun yerine koymak.

4. Web yazı tipleri

Özel yazı tipi yüklenene kadar tarayıcı metni yedek yazı tipiyle gösterir; özel yazı tipi geldiğinde harf genişlikleri ve satır yükseklikleri farklı olduğu için paragraflar yeniden kırılır ve metin kayar.

Bunu azaltmanın üç yolu vardır. Birincisi, kritik yazı tiplerini <link rel="preload"> ile erkenden yüklemek. İkincisi, font-display değerini bilinçli seçmek: optional değeri kaymayı tamamen önler ama yavaş bağlantılarda özel yazı tipi hiç gösterilmeyebilir; swap ise metni hemen gösterir ama değişim anında kayma yaratabilir. Üçüncüsü ve en etkilisi, yedek yazı tipinin ölçülerini özel yazı tipine yaklaştırmaktır. CSS’teki size-adjust, ascent-override ve descent-override tanımlarıyla yedek yazı tipi, özel yazı tipiyle neredeyse aynı yeri kaplayacak şekilde ayarlanabilir; değişim olduğunda kayma yok denecek kadar azalır.

5. Düzeni etkileyen animasyonlar

top, left, margin, height gibi özellikleri değiştiren animasyonlar tarayıcının düzeni yeniden hesaplamasına yol açar ve çevredeki öğeleri iter. Aynı görsel etki transform: translate() veya transform: scale() ile elde edildiğinde öğe düzen akışından bağımsız hareket eder ve kayma üretmez. Açılır menüler, kaydırıcılar ve bildirim animasyonları için kural budur.

6. Tembel yüklenen içerik ve sonsuz kaydırma

Ekranın altındaki görseller tembel yüklenirken boyutları belirtilmemişse, kullanıcı kaydırdıkça içerik zıplar. Kaydırma, 500 milisaniye istisnasına girmediği için bu kaymalar sayılır. Sonsuz kaydırmalı listelerde yeni öğeler eklenirken mevcut içerik yerinde kalmalı, yeni öğeler altta ve önceden ayrılmış alanlarda belirmelidir. Sayfalama ile sonsuz kaydırma arasındaki seçimi ayrıca ele alacağız; ancak hangisini seçerseniz seçin, kural aynıdır: eklenen içerik, var olanı itmemeli.

7. İstemci tarafında sonradan oluşturulan düzen

Sayfanın iskeleti sunucudan gelip asıl içeriğin JavaScript ile sonradan yerleştirildiği yapılarda, özellikle ürün listeleri ve fiyat blokları kayma üretir. Sunucu tarafında oluşturma (server-side rendering) veya en azından kritik bölümler için gerçekçi yer tutucular kullanmak bu sorunu çözer.

Kaymayı nasıl bulursunuz?

CLS’i düzeltmenin en zor kısmı, kaymayı yaratan öğeyi bulmaktır; çünkü kayan öğe genellikle sorunun sebebi değil, kurbanıdır. Aşağı itilen paragraf suçlu değildir; onu iten görsel veya reklamdır.

Search Console ile başlayın

Search Console’daki Core Web Vitals raporu sorunlu URL’leri benzer sayfalardan oluşan gruplar hâlinde gösterir. Bu gruplama değerlidir: ürün sayfalarının tamamı sorunluysa sebep şablondadır ve tek bir düzeltme yüzlerce sayfayı birden iyileştirir.

PageSpeed Insights ve Lighthouse

PageSpeed Insights hem saha hem laboratuvar verisini birlikte gösterir. Laboratuvar bölümündeki tanılama kısmı, yükleme sırasında kayan öğeleri ve her birinin katkısını listeler. Unutmayın: burada görünmeyen bir kayma sahada yaşanıyor olabilir.

Geliştirici araçları

Chrome geliştirici araçlarında iki özellik işinizi kolaylaştırır. Performans panelinde bir kayıt aldığınızda zaman çizelgesindeki “Layout shifts” izi, her kaymanın zamanını ve etkilenen öğeyi gösterir. Rendering sekmesindeki “Layout Shift Regions” seçeneği açıldığında ise kayan alanlar sayfa üzerinde anlık olarak renklenir; sayfayı yavaş bir bağlantı ayarıyla yenileyip kaydırarak sorunlu bölgeleri görebilirsiniz. Araçların SEO açısından diğer kullanımlarını Chrome geliştirici araçları rehberimizde anlattık.

Gerçek kullanıcı ölçümü

Laboratuvarda yakalanamayan kaymalar için en güvenilir yöntem, gerçek kullanıcılardan veri toplamaktır. Google’ın açık kaynaklı web-vitals kütüphanesi, her ölçümle birlikte en büyük kaymayı yaratan öğeyi de raporlayabilir. Bu veriyi analitik aracınıza olay olarak göndermek, “hangi sayfada, hangi cihazda, hangi öğe kaydı” sorusunu doğrudan cevaplar.

Adım adım CLS iyileştirme planı

1. Saha verisini okuyun. Search Console’da hangi şablon gruplarının sorunlu olduğunu belirleyin.
2. En çok trafik alan şablonu seçin. Genellikle ürün veya yazı şablonudur.
3. Yavaş bağlantıda kaydederek test edin. Geliştirici araçlarında ağ hızını düşürüp Layout Shift Regions açıkken sayfayı yükleyin ve baştan sona kaydırın.
4. Görselleri boyutlandırın. Tüm görsel ve videolara genişlik-yükseklik ekleyin.
5. Dinamik alanlara yer ayırın. Reklam, gömülü içerik ve sonradan eklenen bantlar için minimum yükseklik tanımlayın.
6. Yazı tiplerini ayarlayın. Kritik yazı tiplerini önceden yükleyin, yedek yazı tipi ölçülerini eşitleyin.
7. Animasyonları transform’a taşıyın.
8. Düzeltmeyi yayına alın ve 28 gün bekleyin. Saha verisi 28 günlük kayan bir pencereyle hesaplandığı için Search Console’daki iyileşme hemen görünmez.

WordPress kullanıyorsanız, tema ve eklentilerden kaynaklanan kaymaların önemli bir kısmı WordPress hızlandırma rehberimizdeki adımlarla birlikte çözülür.

CLS ve sıralama ilişkisi

CLS, sayfa deneyimi sinyallerinin bir parçasıdır ve Google bu sinyallerin sıralamada kullanıldığını doğrulamıştır. Ancak ağırlığı abartılmamalıdır: içerik kalitesi ve alaka düzeyi hâlâ çok daha belirleyicidir. Doğrulanmış sıralama faktörlerinin genel tablosunu sıralama faktörleri yazımızda bulabilirsiniz.

CLS’in asıl etkisi dönüşüm tarafındadır. Kayan bir “Satın al” düğmesi yanlış tıklamalara, kayan bir form hatalı girişlere, kayan bir metin okurun satırı kaybetmesine yol açar. Bu deneyimler doğrudan terk oranına yansır; hemen çıkma oranı yazımızda bu ilişkiyi ele aldık. Yani CLS’i düzeltmek, sıralamadan önce kullanıcının güvenini korumakla ilgilidir.

Sık yapılan hatalar

1. Yalnızca Lighthouse skoruna bakmak. Laboratuvar ölçümü yükleme sonrası kaymaları göremez.
2. Kayan öğeyi suçlamak. Aşağı itilen blok kurbandır; asıl sebep üstündeki öğedir.
3. Reklam alanını reklam gelmediğinde çökertmek. Boş alan, çöken alandan iyidir.
4. Çerez bildirimini içeriğin üstüne itmek. Bildirimler bindirme olarak gösterilmelidir.
5. Genişlik-yükseklik eklerken CSS’te height: auto unutmak. Görsel orantısız esneyebilir.
6. Düzeltmeden bir hafta sonra sonucu değerlendirmek. Saha verisi 28 günlük pencereyle güncellenir.

Site türüne göre sık görülen CLS senaryoları

E-ticaret siteleri

E-ticarette CLS genellikle üç yerde ortaya çıkar. Birincisi ürün listesi kartlarıdır: görseli boyutsuz kartlar yüklendikçe ızgara sürekli yeniden düzenlenir. İkincisi fiyat ve stok bloklarıdır: kampanya fiyatı, taksit bilgisi veya “son 3 ürün” uyarısı sonradan hesaplanıp eklendiğinde ürün başlığının altındaki her şey aşağı iner. Üçüncüsü sepet ve bildirim bantlarıdır: ücretsiz kargo eşiğini gösteren şeritler üstten eklendiğinde tüm sayfa kayar.

Bu üç alan için ortak çözüm, bilginin sunucudan ilk HTML ile birlikte gelmesi ya da en azından gerçek boyutunda bir yer tutucuyla önceden ayrılmasıdır. Kampanya bandı gibi her sayfada görünen öğeler için sabit bir yükseklik ayırmak, tek düzeltmeyle binlerce sayfayı iyileştirir. E-ticaret teknik SEO’sunun bütününü e-ticaret SEO rehberimizde ele aldık.

Haber siteleri ve yayıncılar

Yayıncı sitelerinde CLS’in ana kaynağı reklamdır. Özellikle başlık ile ilk paragraf arasına yerleştirilen reklam alanı, en yüksek etki oranına sahip bölgedir. Burada iki pratik kural işe yarar: reklam alanının yüksekliğini geçmiş verilerde en sık gelen reklam boyutuna göre sabitlemek ve yapışkan (sticky) reklamları içeriği itmeyecek biçimde bindirme olarak göstermek.

Haber sitelerinde bir diğer kaynak, gömülü sosyal medya gönderileridir. Gönderinin yüksekliği içeriğine göre değiştiği için tam tahmin mümkün değildir; ama makul bir minimum yükseklik ayırmak kaymayı büyük ölçüde azaltır.

Kurumsal siteler ve bloglar

Bu sitelerde CLS genellikle tema ve eklentilerden gelir: sonradan yüklenen sohbet balonları, çerez bildirimleri, kaydırıcılar (slider) ve yazı tipi değişimi. Kaydırıcılar özellikle risklidir; ilk görsel yüklenene kadar yüksekliği sıfır olan bir kaydırıcı, yüklendiği anda sayfanın büyük kısmını aşağı iter. Kaydırıcı kapsayıcısına sabit oran vermek ve ilk görseli tembel yüklemeden çıkarmak hem CLS’i hem de LCP’yi birlikte düzeltir.

Tek sayfa uygulamalarında CLS

React, Vue gibi çatılarla geliştirilen tek sayfa uygulamalarında sayfa geçişleri gerçek bir yeniden yükleme olmadan gerçekleşir. Tarayıcı açısından kullanıcı hâlâ aynı sayfadadır; bu yüzden uygulama içinde yapılan her geçişteki kaymalar ilk açılan adresin CLS’ine yazılır. İçerik yüklenirken boş ekran gösterip sonra bütün düzeni bir anda oluşturan yapılar bu ortamda yüksek CLS üretir.

Çözüm, her görünüm için iskelet ekranlar kullanmak ve veriler gelmeden önce düzenin son hâline yakın bir yapıyı çizmektir. Ayrıca kullanıcının tıklamasından sonra verinin 500 milisaniyeden uzun sürede gelmesi durumunda oluşan kayma artık “beklenen” sayılmaz; bu yüzden yavaş API cevaplarında yer tutucu kullanmak zorunlu hâle gelir.

Hızlı kontrol listesi

1. Tüm görsel ve videolarda width ve height var mı?
2. Reklam, gömülü içerik ve iframe alanlarına minimum yükseklik tanımlı mı?
3. Kampanya bandı, çerez bildirimi ve uygulama şeritleri içeriği itmiyor mu?
4. Kritik yazı tipleri önceden yükleniyor ve yedek yazı tipi ölçüleri eşitlenmiş mi?
5. Animasyonlar yalnızca transform ve opacity kullanıyor mu?
6. Tembel yüklenen görseller ve sonsuz kaydırmadaki yeni öğeler önceden ayrılmış alana mı yükleniyor?
7. Sayfa geri-ileri önbelleğinden yararlanabiliyor mu?
8. Search Console’da şablon grupları 28 günlük pencerede izleniyor mu?

Özetle

CLS, sayfanın görsel olarak ne kadar kararlı olduğunu ölçer ve 0,1’in altında kalması hedeflenir. Değer, tüm kaymaların toplamı değil, en kötü oturum penceresinin puanıdır; kullanıcı eyleminden sonraki 500 milisaniye içindeki kaymalar sayılmaz. Sorunların büyük çoğunluğu boyutu belirtilmemiş görsellerden, reklam ve gömülü alanlardan, sonradan eklenen bantlardan ve yazı tipi değişiminden kaynaklanır. Laboratuvar araçları hatayı bulmaya, saha verisi ise gerçek durumu görmeye yarar. Teknik SEO çalışmanızın bütününü planlamak için SEO hizmetimizi inceleyebilirsiniz.