Web dünyasında kullanıcı deneyimi, artık sadece içerik kalitesiyle değil, bu içeriğin sunumundaki profesyonellikle ölçülüyor. Bir makaleyi okurken aniden sayfanın kayması, tıklamak istediğiniz butonun yer değiştirmesi veya bir reklamın içeriği aşağı itmesi; kullanıcıların en çok şikayet ettiği konuların başında gelir. Google, bu can sıkıcı durumu teknik bir metriğe bağlayarak adına Cumulative Layout Shift (CLS) demiştir. Seojen.com olarak hazırladığımız bu kapsamlı rehberde, CLS metriğinin derinliklerine inecek, neden "görsel kararlılık" kavramının SEO’nun vazgeçilmez bir parçası olduğunu detaylandıracağız.
Cumulative Layout Shift (CLS), bir web sayfasının yaşam döngüsü boyunca gerçekleşen tüm "beklenmedik" düzen değişikliklerinin toplam puanını ölçen bir Core Web Vitals metriğidir. Teknik olarak, bir kullanıcının ekranında (viewport) görünen bir öğenin, iki kare arasında başlangıç konumunu değiştirmesi durumunda bu olay bir "düzen kayması" olarak kaydedilir.
Basit bir örnekle; bir haber sitesine girdiniz ve bir butona tıklamak üzeresiniz. Tam o saniyede üstten bir reklam yükleniyor ve buton 2 santimetre aşağı kayıyor. Siz butona tıkladığınızı sanırken aslında reklam alanına veya yanlış bir linke tıklıyorsunuz. İşte bu kararsızlık, CLS puanınızın yükselmesine neden olur. CLS, sayfanın ne kadar "sabit" ve "güvenilir" bir yükleme süreci geçirdiğini ölçerek kullanıcıyı bu tür kazalardan korumayı amaçlar.
CLS metriği, bir web sitesinin görsel kararlılığını denetlemek için kullanılır. Temel işlevi, kullanıcı deneyimini (UX) negatif etkileyen yapısal hataları tespit etmektir. Bir sayfanın hızlı yüklenmesi kadar, yüklendiği haliyle kalması da önemlidir. CLS, geliştiricilere sayfanın hangi noktalarında "kararsız öğeler" olduğunu gösteren bir geri bildirim mekanizması sağlar.
CLS optimizasyonu yapılmış bir site:
Kullanıcıların yanlış tıklama yapmasını önler.
Hemen çıkma oranlarını (bounce rate) düşürür.
Dönüşüm oranlarını (conversion rate) artırır.
Kullanıcıların içerikle etkileşime girmesini kolaylaştırır.
Özellikle mobil cihazlarda ekran alanı kısıtlı olduğu için, küçük bir kayma bile sayfanın tamamının kullanılamaz hale gelmesine neden olabilir. CLS, bu teknik sorunu bir puanlama sistemine dökerek sitelerin kalitesini artırmaya yarar.
.jpg)
CLS ölçümü, tarayıcının iki oluşturulan kare arasındaki öğe hareketlerini takip etmesiyle gerçekleşir. Bu ölçüm hem laboratuvar ortamında (simülasyon) hem de saha verileri (gerçek kullanıcı deneyimi) ile yapılabilir.
| Araç Türü | Kullanılan Araçlar |
| Saha Araçları (RUM) | Chrome User Experience Report (CrUX), PageSpeed Insights, Search Console |
| Laboratuvar Araçları (Lab) | Lighthouse, WebPageTest, Chrome DevTools (Performance Sekmesi) |
Laboratuvar araçları, sayfa henüz geliştirme aşamasındayken potansiyel kaymaları yakalamak için harikadır. Ancak asıl önemli olan, gerçek kullanıcıların (saha verileri) yaşadığı deneyimdir. Google, sıralama değerlendirmesi yaparken son 28 günlük saha verilerini baz alır.
CLS optimizasyonu, tarayıcıya öğelerin boyutlarını önceden bildirmek ve sayfa yapısını dondurmakla ilgilidir. İşte en etkili optimizasyon yöntemleri:
En yaygın CLS sebebi, boyutu belirtilmemiş görsellerdir. <img> etiketlerinizde her zaman width ve height niteliklerini kullanın. Bu, tarayıcının görsel henüz inmeden o alan için yer ayırmasını sağlar.
Reklamlar dinamik olarak yüklendiği için içeriklerin aşağı kaymasına neden olur. Reklam konteynerlarına (div) CSS ile sabit veya minimum bir yükseklik vererek bu alanı önceden rezerve edin.
Mevcut bir içeriğin üzerine, kullanıcı etkileşimi (tıklama vb.) olmadan asla yeni bir öğe eklemeyin. Eğer bir onay kutusu veya bildirim gelecekse, bunu içeriği itmeyecek şekilde konumlandırın.
Yazı tipi dosyası inene kadar tarayıcı yedek bir font gösterir. Font yüklendiğinde metnin boyutu değişebilir ve kaymaya neden olur. <link rel="preload"> kullanarak fontları önceden yükleyin.
Google, Core Web Vitals metrikleri için belirli eşik değerleri tanımlamıştır. CLS puanı 0 ile 1 arasında bir değer alır ve 0'a ne kadar yakınsa o kadar iyidir.
İyi (Good): 0.1 ve altı. (Hedeflenen puan)
İyileştirilmesi Gerekiyor (Needs Improvement): 0.1 - 0.25 arası.
Kötü (Poor): 0.25 ve üzeri.
Sitenizdeki sayfaların en az %75'inin 0.1 puanın altında kalması, Google'ın sitenizi "görsel olarak kararlı" kabul etmesi için yeterlidir. Bu eşik değerleri hem mobil hem de masaüstü cihazlar için geçerlidir.
CLS puanını düşürmek için "kararsız öğeleri" tespit edip dondurmanız gerekir. PageSpeed Insights raporunda "Büyük düzen kaymalarından kaçının" bölümüne bakarak hangi DOM öğesinin kaymaya sebep olduğunu görebilirsiniz.
Teknik Adımlar:
CSS aspect-ratio Kullanımı: Modern tarayıcılarda resimlerin oranını korumak için aspect-ratio özelliğinden yararlanın.
Font-Display Kullanımı: CSS'de font-display: swap kullanarak metin kaymalarını yönetin.
Yer Tutucular (Skeletons): Veri yüklenirken boş alan göstermek yerine, içeriğin şeklini taklit eden gri yer tutucular kullanın.
Animasyonlarda Transform Tercih Edin: Genişlik veya yükseklik değiştiren animasyonlar yerine transform: scale() kullanın; çünkü transform düzen kaymasına neden olmaz.
2021 yılından itibaren Google, Page Experience güncellemesiyle CLS'yi resmi bir sıralama sinyali haline getirdi. Bu durum, CLS'nin doğrudan SEO performansınızı etkilediği anlamına gelir.
Eğer iki site aynı içerik kalitesine sahipse, Google görsel olarak daha kararlı (CLS puanı düşük) olan siteyi üst sıralara taşır. Ayrıca, yüksek CLS puanı kullanıcıların sitenizi hızla terk etmesine neden olur. Google botları, "hemen çıkma oranı" yüksek ve kullanıcıyı hayal kırıklığına uğratan sitelerin sıralamasını zamanla düşürür. Kısacası CLS, hem teknik bir sıralama faktörü hem de kullanıcı tutma stratejisidir.
Düzen kayması puanı, tek bir karedeki kaymanın şiddetini ölçer. Formül oldukça basittir ancak etkisi büyüktür:
Layout Shift Score = Impact Fraction (Etki Oranı) * Distance Fraction (Mesafe Oranı)
Kararsız öğenin iki kare arasındaki toplam kapladığı alanı ifade eder. Örneğin, bir öğe ekranın %50'sini kaplıyorsa ve %25 oranında aşağı kaymışsa, etki oranı bu iki alanın birleşimi olan %75 (0.75) olur.
Öğenin ekran üzerinde kat ettiği en büyük mesafenin, ekranın en büyük boyutuna (genişlik veya yükseklik) bölünmesidir. Eğer öğe ekran yüksekliğinin %25'i kadar hareket ettiyse mesafe oranı 0.25'tir.
Örnek Hesaplama: 0.75 (Etki) * 0.25 (Mesafe) = 0.1875 CLS Puanı.
İnternet dünyasında rekabet artık milisaniyeler üzerinden dönüyor. Kullanıcıların %20'si, 1 saniyelik bir gecikmede veya rahatsız edici bir sayfa kaymasında siteyi terk ediyor. CLS, özellikle E-Ticaret siteleri için hayati önem taşır. Yanlış bir butona tıklanması sonucu sepete yanlış ürün eklenmesi veya ödeme sayfasının kayması, doğrudan satış kaybı demektir.
Ayrıca, marka itibarı açısından kararsız bir site "amatör" görünür. Google, kullanıcılarına en profesyonel ve sorunsuz deneyimi sunan siteleri ödüllendirme misyonuna sahiptir. Bu nedenle CLS'yi optimize etmek, sadece Google botlarını değil, gerçek insanları da mutlu etmektir.
CLS sorunlarının %90'ı şu beş temel nedenden kaynaklanır:
| Neden | Açıklama |
| Boyutsuz Görseller | Genişlik ve yüksekliği belirtilmemiş resimler. |
| Dinamik Reklamlar | Sayfa yüklendikten sonra aniden beliren bannerlar. |
| Embed İçerikler | YouTube videoları veya sosyal medya widgetları (Iframe). |
| FOIT/FOUT | Yazı tipi yüklenirken metinlerin boyut değiştirmesi veya parlaması. |
| JS ile İçerik Ekleme | Sayfanın üst kısmına DOM manipülasyonu ile yeni element eklenmesi. |
Google PageSpeed Insights testinde "Büyük yerleşim değişikliklerinden kaçının" (Avoid large layout shifts) uyarısı alıyorsanız, bu sitenizde ciddi bir görsel kayma olduğu anlamına gelir.
Çözüm Yolu:
Öğeyi Tespit Edin: GSC veya Lighthouse raporunda kaymaya sebep olan DOM öğesini bulun.
Statik Alan Ayırın: Eğer sorun bir reklamsa, reklamın kapsayıcı div'ine min-height değeri vererek alanın beyaz boşluk olarak kalmasını sağlayın.
Resimleri Optimize Edin: Görsellerin srcset ve sizes özelliklerini doğru kullanarak her cihazda doğru oranda yüklenmesini sağlayın.
Ağ Onaylarını Beklemeyin: Sayfa düzenini bir API'den gelecek veriye göre kurmayın; veri gelmeden önce alanın boyutunu sabit tutun.
CLS, bir web sayfasının görsel kararlılığını ölçer. Puanın sıfıra yakın olması, sayfa yüklenirken hiçbir öğenin beklenmedik şekilde hareket etmediği anlamına gelir. Bu da en iyi kullanıcı deneyimini ve en yüksek SEO performansını sağlar.
CLS bir zaman metriği değil, bir puan metriğidir. İyi bir skor 0.1 puanın altıdır. 0.25 puanın üzeri ise "kötü" kabul edilir.
Evet, bu en temel ve en etkili çözümdür. Tarayıcı, resim henüz yüklenmeden bu değerlere bakarak sayfada bir boşluk bırakır ve resim yüklendiğinde içerik aşağı kaymaz.
Reklamlar genellikle sayfa içeriğinden daha geç yüklenir. Eğer reklam için bir alan ayrılmamışsa, reklam yüklendiği anda altındaki tüm metin ve görselleri aşağı iter, bu da büyük bir düzen kayması yaratır.
Dikkatli kullanılmalıdır. swap, yazı tipi inene kadar sistem fontunu gösterir. Eğer sistem fontu ile web fontunun boyutları çok farklıysa metin kaymasına neden olabilir. Bu yüzden preload ile desteklenmelidir.
Ekran boyutları ve işlemci hızları farklı olduğu için düzen kaymaları her cihazda farklı sonuçlar verir. Genellikle mobil cihazlarda, dar ekran alanı nedeniyle kaymalar daha yüksek puanlanır.
Hayır. CLS sadece "konum" değişikliğiyle ilgilidir. Boyut, renk veya opaklık değişiklikleri diğer öğelerin yerini değiştirmediği sürece CLS'yi etkilemez.
Eğer içeriği sayfanın en altına ekliyorsanız sorun olmaz. Ancak sayfanın üst kısmına (above the fold) bir öğe eklerseniz, altındaki her şeyi iteceği için CLS puanınız yükselir.
Şart değil. CLS hız metriği değil, kararlılık metriğidir. Çok yavaş ama sarsıntısız yüklenen bir sitenin CLS puanı mükemmel olabilir.
Lighthouse simüle edilmiş bir ortamda (lab) test yapar. Search Console ise gerçek kullanıcıların (field) deneyimlerini raporlar. Saha verileri her zaman daha gerçektir.
En kritik özellik aspect-ratio'dur. Ayrıca animasyonlarda top/left yerine transform: translate() kullanmak kaymaları önler.
Evet, bu widgetlar dışarıdan veri çektiği için geç yüklenirler. Bu alanlar için mutlaka CSS ile önceden yer (placeholder) ayrılmalıdır.
Doğrudan bir ceza yoktur ancak sıralama kaybı yaşanır. Google, daha iyi kullanıcı deneyimi sunan rakiplerinizi sizin önünüze geçirir.
Bir öğenin hem eski konumunda hem de yeni konumunda ekranın toplamda ne kadarlık bir alanını etkilediğinin yüzdesidir.
Kullanıcı girişinden (tıklama, kaydırma) sonraki 500ms içinde gerçekleşen kaymalar "beklenen kayma" sayılır ve CLS puanına dahil edilmez.
Doğrudan etkilemez. Alt metinler SEO ve erişilebilirlik içindir; CLS ise tamamen görsel boyut ve konumla ilgilidir.
SPA sitelerde içerik dinamik yüklendiği için "Skeleton Screen" (iskelet ekran) kullanımı CLS'yi düşük tutmak için zorunludur.
WP Rocket veya Perfmatters gibi eklentilerle görsel boyutlarını otomatik ekleyebilir ve kritik CSS'i optimize ederek hızlı sonuç alabilirsiniz.
Kullanıcı tam bir işlemi tamamlayacakken sayfanın kayması güven kaybına ve sinire neden olur. Kullanıcı işlemi tamamlamak yerine siteyi terk etmeyi tercih eder.
Google botu sayfayı render ederken (oluştururken) gerçekleşen tüm yapısal değişiklikleri Layout Instability API aracılığıyla takip eder.
Evet. Tema mobil uyumlu olsa bile görsellere boyut verilmediyse veya reklamlar optimize edilmediyse yüksek CLS puanı çıkacaktır.
Basit hatalar eklentilerle çözülebilir ancak karmaşık JS ve CSS sorunları için teknik bir SEO uzmanı veya ön yüz (frontend) geliştirici desteği almak daha sağlıklıdır.
Evet. Google Discover trafiği büyük ölçüde sayfa deneyimine bağlıdır. CLS puanı kötü olan siteler Keşfet akışına girmekte zorlanabilir.
Eğer en üstteki görsellere (LCP öğesi) lazy load uygulanırsa ve boyut belirtilmezse, resim geç yüklendiğinde sayfa kayacaktır. Üst görsellere lazy load uygulanmamalıdır.
İskelet ekranlar, içeriğin geleceği alanı kapladığı için büyük kaymaları önler ancak tam olarak sıfırlamaz. Boyutların birebir tutması gerekir.
İçerik şablonunuz aynıysa değişmez. Ancak farklı bir reklam yerleşimi veya boyutsuz görsel eklerseniz o sayfa özelinde puan değişebilir.
Sıklıkla bozar. Slider yüklendiğinde altındaki metni itiyorsa yüksek CLS çıkar. Slider konteynerına sabit yükseklik verilmelidir.
Site çok hızlı açılır ama yüklenirken sarsılır. Google bu durumu "kötü sayfa deneyimi" olarak işaretler ve sıralamanız olumsuz etkilenir.
Öğenin dikey veya yatayda kat ettiği en uzun mesafenin, ekranın en büyük boyutuna oranıdır.
Seojen ekibi olarak sitenizin DOM yapısını inceliyor, kaymaya sebep olan CSS ve JS hatalarını gideriyor ve Core Web Vitals skorlarınızı "Yeşil" alana taşıyarak SEO performansınızı zirveye çıkarıyoruz.
Yorum Yap