İçeriğe geç
parazade
Dijital Pazarlama & SEO

CLS Ne Demek?

İngilizce: Cumulative Layout Shift

Yayın: · Son güncelleme:

CLS Ne Demek? Kısaca

CLS (Cumulative Layout Shift), bir sayfa yüklenirken ya da kullanılırken görünür öğelerin beklenmedik biçimde yer değiştirmesini ölçen ve sayfanın görsel kararlılığını gösteren Core Web Vitals metriğidir.

CLS nedir?
İçindekiler
  1. CLS ne demek?
  2. Nasıl hesaplanır?
  3. En yaygın nedenler
  4. Nasıl düzeltilir?

CLS ne demek?

CLS, "Cumulative Layout Shift" yani "kümülatif düzen kayması" demektir. Sayfa yüklenirken metinlerin, görsellerin ya da düğmelerin beklenmedik biçimde yer değiştirmesini ölçer. Bir habere tıklayıp okumaya başladığınızda üstte birden reklam açılıp metnin aşağı itilmesi tipik bir kaymadır.

Bu metrik Core Web Vitals üçlüsünün görsel kararlılık ayağıdır.

Nasıl hesaplanır?

Her kaymada iki şeye bakılır. Kayan öğenin ekranda kapladığı alan ve ne kadar uzağa kaydığı. Bu ikisinin çarpımı kayma puanını verir.

Puan birimsizdir. 0,1 ve altı iyi, 0,1 ile 0,25 arası iyileştirme gerekli, 0,25'in üstü kötü sayılır. Değerlendirme, ziyaretlerin yüzde 75'lik dilimine göre yapılır.

En yaygın nedenler

  • Genişlik ve yükseklik belirtilmemiş görseller
  • Yeri önceden ayrılmamış reklam ve yerleştirme alanları
  • Sonradan yüklenen yazı tiplerinin metni yeniden düzenlemesi
  • Sayfanın üstüne sonradan eklenen bildirim bantları

Varsayımsal bir örnek düşünelim. Bir tarif sitesinde kullanıcı "Malzemeler" başlığına dokunmak üzereyken üstte bir video oynatıcı yüklenir ve sayfa 300 piksel aşağı kayar. Kullanıcı yanlışlıkla bir reklama dokunur.

Nasıl düzeltilir?

Tüm görsel ve videolara width ve height değerlerini yazın. Reklam alanları için CSS ile sabit yükseklikte yer ayırın. Yazı tiplerinde font-display ayarını kullanarak geçişi yumuşatın. Yeni içeriği mevcut içeriğin üstüne değil, altına ekleyin.

Sıkça Sorulan Sorular

CLS nedir ve iyi bir CLS değeri kaçtır?

CLS, sayfadaki beklenmedik kaymaların toplam etkisini ölçen birimsiz bir puandır. Google 0,1 ve altını iyi, 0,25'in üstünü kötü kabul eder.

Kullanıcının tıklamasıyla açılan menü CLS'yi artırır mı?

Hayır. Kullanıcı etkileşiminden sonraki yarım saniye içinde gerçekleşen kaymalar beklenen değişiklik sayılır ve CLS hesabına girmez. Sorun, kullanıcı hiçbir şey yapmadan içeriğin yer değiştirmesidir.

İlgili terimler

Core Web VitalsCore Web Vitals, Google'ın bir web sayfasının yüklenme hızını, etkileşime tepki süresini ve görsel kararlılığını ölçen üç temel kullanıcı deneyimi metriğidir: LCP, INP ve CLS.LCP(Largest Contentful Paint)LCP (Largest Contentful Paint), bir sayfa açıldığında ekranda görünen en büyük görsel ya da metin bloğunun yüklenip görüntülenmesi için geçen süreyi ölçen Core Web Vitals metriğidir.INP(Interaction to Next Paint)INP (Interaction to Next Paint), kullanıcının bir sayfadaki tıklama, dokunma ve tuş basma gibi etkileşimlerinden sonra ekranın görsel olarak güncellenmesine kadar geçen süreyi ölçen Core Web Vitals metriğidir.Sayfa Hızı(Page Speed)Sayfa hızı, bir web sayfasının içeriğinin kullanıcının tarayıcısında ne kadar sürede yüklenip etkileşime hazır hâle geldiğidir; LCP, INP ve TTFB gibi metriklerle ölçülür.Puan(Reward Points)Puan, bankaların kredi kartı ve bazı banka kartı harcamaları karşılığında müşterilerine verdiği, alışverişte ya da borç ödemede para yerine kullanılabilen ödüldür. Genellikle belirli bir puan bir Türk lirası değerinde sayılır.CSSCSS (Cascading Style Sheets, basamaklı stil şablonları), HTML ile oluşturulan web sayfalarının renk, yazı tipi, boşluk, yerleşim ve animasyon gibi görsel özelliklerini tanımlayan stil dilidir.Sabit(Constant)Sabit (constant), programlamada bir kez değer atandıktan sonra program boyunca değiştirilmemesi gereken isimli veridir. Pi sayısı, bir vergi oranı ya da en fazla deneme hakkı gibi değerler sabit olarak tanımlanır.