--- title: "CLS nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/cls language: tr --- # CLS nedir? CLS, beklenmeyen yerleşim kaymalarının sayfa deneyimi boyunca oluşturduğu görsel kararsızlığı ölçer. Diğer adlar: Cumulative Layout Shift. ## Nerede işine yarar? Boyutu ayrılmayan görsel, geç gelen içerik veya yazı tipi değişimi kaymaya yol açabilir. Kullanıcının bir düğmeye basmak isterken başka öğeye basması deneyimi bozabilir. Görsel alanlarının baştan ayrılması ve içerik değişimlerinin dikkatle tasarlanması yararlıdır. ## Bir cümlede uygulaması Bir kart görseli yüklenmeden önce genişlik ve yükseklik oranını ayırmak. ## Neyle karıştırılmamalı? CLS kaymanın ne kadar sürdüğünü değil, yerleşimdeki beklenmeyen değişimin etkisini ölçer. ## Tam dokunacakken yer değiştiren düğme. Bir yazıyı okurken aşağıdaki bağlantıya dokunmak üzeresin. Üstteki görsel sonradan açılıyor, paragraf aşağı itiliyor ve parmağın başka bir bağlantıya denk geliyor. CLS, bu tür beklenmedik yerleşim hareketlerini değerlendirmek için kullanılan görsel kararlılık ölçüsüdür. Sorun yalnız estetik değildir. Kullanıcının gözle takip ettiği satır, dokunacağı hedef ve sayfaya duyduğu güven aynı anda etkilenebilir. Hızlı açılan ama sürekli yer değiştiren bir sayfa rahat bir deneyim sunmaz. Yaygın başlangıç noktası medyaya yer ayrılmamasıdır. Tarayıcı görselin boyutunu öğrenene kadar boşluğu hesaplayamazsa sonraki içerik yanlış konumda çizilebilir. Genişlik ve yükseklik bilgisi ya da doğru oranlı bir kapsayıcı bu alanın önceden kurulmasına yardım eder. Ancak her görsele sabit yükseklik vermek de çözüm değildir; farklı ekranlarda kırpma, oran ve içerik ihtiyacı tasarımla birlikte ele alınmalıdır. Font değişimi, üstten eklenen bildirimler, sonradan gelen reklamlar veya boyutu bilinmeyen gömülü içerikler de düzeni hareket ettirebilir. Örneğin bir rezervasyon alanı başlangıçta tek satırken veri geldikten sonra üç satıra dönüşebilir. Tasarım yalnız dolu ve ideal durumu çizmişse yüklenme anı hesaba katılmamıştır. İçeriğin yokluğu, yüklenmesi, başarısızlığı ve uzun hâli aynı yerleşim kararının parçalarıdır. Her hareket kötü değildir ve her animasyon CLS üretmez. Kullanıcının bir bölümü açmasıyla beklediği genişleme ile sebepsiz bir sıçrama aynı deneyim değildir. Yine de bir hareketin ölçüme dahil olmaması otomatik olarak rahat olduğu anlamına gelmez. Uzun animasyonlar, yanlış odak yönetimi veya ekrandan kaçan bir düğme ayrı sorunlar yaratabilir. Ölçünün sınırlarını bilmek, tasarım sorumluluğunu ölçünün içine sıkıştırmamak demektir. Bir içerik kartının yüklenme iskeleti de gerçek karta yakın bir alan kullanmalıdır. İki satırlık başlık için tasarlanmış dar bir yer tutucu, gerçek dört satırlık başlık geldiğinde komşularını itebilir. Ancak bütün kartlara aşırı büyük boşluk vermek de sayfanın ritmini bozar. Gerçek içerik dağılımına bakarak oran, minimum alan ve metin akışını birlikte seçmek daha dengeli olur. Kullanıcının yazı boyutunu artırdığı durumda alanların genişleyebilmesi gerekir. Kararlılığı içerik keserek elde etmeye çalışmak erişilebilirlik sorununu gizler; amaç görünür bilgiyle birlikte sakin bir yerleşim kurmaktır. ### Ayrılmış alan Görsel, video ve gömülü içerik gelmeden önce hangi alanı kaplayacak? Oran bilgisi ile responsive genişlik birlikte çalışmalı. Boş durumda sıfır yüksekliğe düşen alan, sonradan bütün sayfayı yeniden düzenlemek zorunda kalabilir. ### Metin Gerçek başlık uzunlukları, çeviriler ve font davranışıyla düşün. Tek satırlık kısa örnekle çizilen kart, gerçek içerikte üç satır olabilir. Tasarımın değişken metinleri taşıması, yalnız yüklenme anını değil içerik sürdürülebilirliğini de iyileştirir. ### Zaman Sayfayı yalnız ilk açılışta değerlendirme. Sonradan gelen bildirim, açılan bir medya alanı veya uzun kullanımda yüklenen içerik de yerleşimi etkileyebilir. Gerçek ziyaretin süresi laboratuvardaki kısa kayıttan daha uzun olabilir. ## Açılmak başka, ansızın sıçramak başka. ### Beklenen değişim Kullanıcı içindekiler düğmesine basar ve menü kontrollü biçimde açılır. Tetikleyici ile sonuç arasında anlaşılır bir ilişki vardır; odak ve okuma sırası korunur. Böyle bir etkileşimde bile panelin hedefi ekran dışına sürüklememesi ve hareket azaltma tercihine uyması gerekir. Beklenebilirlik tasarımın bir özelliğidir. ### Beklenmeyen kayma Kullanıcı herhangi bir işlem yapmadan üstte yeni alan belirir ve dokunmak istediği hedef yer değiştirir. Bu, kişinin kurduğu konumsal hafızayı bozar. Sonradan gelen içerik için alan planlamak veya bildirimi akışı daha az bozan bir yerde sunmak gerekebilir. Çözüm yalnız animasyon süresini değiştirmek değildir. ## İçerik yüklenirken yerini korumak CLS, beklenmeyen yerleşim hareketlerini incelemeye yardımcı olur. Görseller için alan ayırmamak, sonradan üstten eklenen içerik veya yazı tipi değişimi sayfayı kaydırabilir. Kullanıcının okumakta olduğu bölgenin hareket etmesi yalnız estetik sorun değil, yanlış tıklama sebebi de olabilir. - Görsel ve video için başlangıçtan itibaren alan ayır. - Geç gelen duyuru ve bileşenleri mevcut içeriği itmeden yerleştir. - Yazı tipi değişiminde satır kırılmalarını kontrol et. ## CSS transform CLS oluşturur mu? Transform normal belge akışını değiştirmediği için yerleşim kaymasıyla aynı mekanizma değildir. Yine de büyük veya beklenmedik hareket kullanıcıyı rahatsız edebilir. Bir ölçümün düşük olması bütün hareketlerin iyi tasarlandığı anlamına gelmez. ## Bu karar, işinin neresinde? CLS kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) ## Karar masası ### CLS için iyi değer ne anlama gelir? Core Web Vitals kapsamında iyi CLS eşiği 0,1 ve altıdır; değerlendirmede ziyaretlerin yüzde 75'lik dilimi kullanılır. Bu bir saniye değeri değildir. Ölçüm, kaymanın ekrandaki etkisi ve uzaklığıyla ilgili puanlardan oluşur. Tek bir kısa kaydın temiz çıkması bütün ziyaretlerde sorun olmadığını göstermez. Özellikle geç yüklenen alanları ve uzun sayfa kullanımını ayrıca düşünmek gerekir. ### Bütün içerikleri sabit yüksekliğe kilitlemek gerekir mi? Hayır. Sabit yükseklik uzun metni kesebilir, mobilde taşma yaratabilir veya erişilebilir yazı boyutlarında içeriği gizleyebilir. Amaç uygun alanı önceden tahmin etmek ve değişken içeriği taşıyan bir düzen kurmaktır. Görsel oranları, makul minimum yükseklikler ve gerçek veriye göre tasarlanmış durumlar farklı araçlardır. Hangi aracın kullanılacağı içeriğin niteliğine bağlıdır; tek bir CSS kuralı bütün alanlara uygulanmaz. ### Font seçimi kararlılığı etkiler mi? Evet, farklı fontların harf genişlikleri ve satır ölçüleri değişebilir. Başlangıçta kullanılan yazı tipi sonradan gelen fontla farklı satırlara kırılıyorsa çevredeki alanlar hareket edebilir. Font yükleme stratejisi kadar uygun fallback ölçüleri ve gerçek başlıklarla tasarım da önemlidir. Marka fontunu kaldırmadan önce hangi değişimin ne kadar yerleşim farkı yarattığını anlamak daha kontrollü bir karar sağlar. ### CLS düşükse bütün hareketler doğru mu? Hayır. Büyük bir görselin sürekli ölçeklenmesi, göz yoran arka plan hareketi veya düğmenin basınca küçülmesi başka kullanılabilirlik sorunları yaratabilir. Bunlar aynı ölçüyle bütünüyle açıklanmaz. Kararlı yerleşim, rahat hareket dili ve erişilebilir etkileşim birlikte düşünülür. Özellikle okuma yüzeyinde dekoratif hareketin içerikle yarışmaması gerekir. Bir metriğin iyi olması bütün tasarım kararlarının onaylandığı anlamına gelmez. ## Okuma çizgisini koru. Bir makale sayfasını kapak, başlık, yazı, öneriler ve footer olarak böl. Her bölüm için içerik gelmeden önceki alanı düşün. Kullanıcının gözünün ve parmağının hangi konumu beklediğini tarif et. - [ ] Kapak görselinin gerçek oranını belirle ve farklı ekranlarda ayrılan alanı tasarla. Gelişigüzel sabit piksel yüksekliği yerine kırpma kararını açıkla. Görsel yüklenemediğinde de çevredeki metnin konumunu koruyan bir durum düşün. - [ ] Uzun başlık, büyük yazı boyutu ve geç yüklenen marka fontuyla yerleşimi değerlendir. Satır sayısı arttığında kartın hangi komşularıyla hizalı kalması gerektiğini yaz. Metni kesmek yerine düzenin hangi noktada genişleyebileceğini belirle. - [ ] Sayfa açıldıktan sonra eklenen bir bildirim senaryosu oluştur. Bildirimin mevcut okuma noktasını ne kadar taşıyacağını ve kapatıldığında ne olacağını göster. Kullanıcının verdiği kararla oluşan değişimi kendiliğinden gelen içerikten ayır. - [ ] Her olası kaymaya bir neden ve bir çözüm eşleştir. Görsel alanı eksikse oranı, font farkıysa metin ölçülerini, belirsiz veri alanıysa yüklenme durumunu ele al. Tek bir dev minimum yükseklikle bütün sayfaya gereksiz boşluk ekleme. Kararlı bir sayfa, içeriğin nereye geleceğini önceden düşünür. Kullanıcı düğmenin peşinden koşmaz; tasarım, onun bıraktığı yerde kalır. ## Bağlantılı kavramlar - [LCP](https://androverse.com.tr/sozluk/lcp) — LCP, sayfanın görünür alanındaki en büyük uygun içerik öğesinin gösterilme zamanını ölçen bir yükleme metriğidir. - [INP](https://androverse.com.tr/sozluk/inp) — INP, bir sayfanın kullanıcı etkileşimlerine görsel yanıt verme gecikmesini değerlendiren etkileşim metriğidir. - [Responsive tasarım](https://androverse.com.tr/sozluk/responsive-tasarim) — Responsive tasarım, arayüzün farklı ekran ölçülerinde içerik ve etkileşim önceliklerini koruyarak uyarlanmasıdır. ## Konuyu uygulamaya taşı - [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) — CLS kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [“Biraz daha wow” kaç piksel?](https://androverse.com.tr/blog/biraz-daha-wow-kac-piksel) — CLS ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [web.dev — Web Vitals](https://web.dev/articles/vitals) - [web.dev — Cumulative Layout Shift](https://web.dev/articles/cls) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)