CLS Değeri Neden Yükselir ve Görsel Kararlılık Nasıl Sağlanır?

CLS Nedir ve Core Web Vitals’taki Yeri (2026 Güncel Durum)

CLS (Cumulative Layout Shift), bir sayfa yüklenirken ya da etkileşim sırasında görünür içeriğin kullanıcı etkileşimi olmadan yer değiştirmesini ölçen bir Google metriğidir. SEO sözlüğünde CLS terimini ve diğer Core Web Vitals kavramlarını detaylı biçimde inceleyebilirsiniz. Okumakta olduğunuz bir metnin aniden kayması, tıklamak üzere olduğunuz butonun yerini değiştirmesi ya da form alanlarının görseller yüklenince aşağı inmesi — tüm bu durumlar CLS skoruna katkıda bulunur ve kullanıcı deneyimini doğrudan olumsuz etkiler.

Google web.dev’in resmi CLS metrik tanımına göre, CLS değeri iki bileşenin çarpımıyla hesaplanır: impact fraction (kayman öğenin görünür ekran alanındaki yüzde oranı) ve distance fraction (kaymanın gerçekleştiği mesafenin görünür alan yüksekliğine oranı). Örneğin, ekranın %60’ını kaplayan bir görsel, ekran yüksekliğinin %30’u kadar kayarsa 0.60 × 0.30 = 0.18 CLS skoru üretir. Bu değer, oturum boyunca tüm layout shift pencerelerinin toplamını temsil eder.

Google’ın belirlediği eşik değerleri şu şekildedir:

• İyi: 0.1 ve altı
• Geliştirilmesi gereken: 0.1 ile 0.25 arası
• Zayıf: 0.25 üzeri

Google, bir sitenin “iyi” kategorisinde değerlendirilebilmesi için ziyaretlerin en az %75’inde CLS değerinin 0.1 altında kalmasını temel hedef kriter olarak belirler. Bu eşikler 2026 itibarıyla değişmemiş olup sabit kriterler olarak geçerliliğini korumaktadır. Mart 2024’te Google’ın First Input Delay (FID) yerine Interaction to Next Paint (INP) metriğini Core Web Vitals’a dahil etmesiyle birlikte görsel kararlılık ve etkileşim hızı artık birlikte değerlendirilen iki temel SEO sinyali haline gelmiştir; bu değişim CLS’nin öncelik sıralamasını daha da yükseltmiştir.

CLS Değerini Yükselten 5 Temel Neden

CLS sorunlarının büyük bölümü belirli birkaç yaygın hatadan kaynaklanır. Bu nedenleri tanımak, doğru çözümü hızla uygulamanın ilk adımıdır.

1. Boyutsuz Görseller ve Medya Elementleri

Width ve height atribütü tanımlanmamış görseller, tarayıcının HTML’yi ayrıştırırken görsel için ne kadar alan ayıracağını bilememesine neden olur. Görsel sunucudan indirilip boyutu öğrenilince çevreleyen içerik aşağı kayar. Bu, CLS değerini yükselten en yaygın ve en kolay düzeltilebilen nedendir; e-ticaret ürün listelerinde ve blog içeriklerinde sıkça karşılaşılır.

2. Font Yükleme Kaynaklı Metin Kaymaları

Web fontları asenkron yüklendiğinde tarayıcı iki farklı davranış sergiler: FOUT (Flash of Unstyled Text) durumunda metin önce sistem fontuyla gösterilir ve web fontu yüklenince değişir; FOIT (Flash of Invisible Text) durumunda ise metin, web fontu gelene kadar tamamen gizlenir. Her iki senaryoda da iki font arasındaki ölçü farkı metin bloklarının kaymasına yol açar ve CLS değerini artırır.

3. Dinamik Reklam, iframe ve Embed Alanları

Sayfa yüklendikten sonra JavaScript aracılığıyla eklenen reklam birimleri, sosyal medya embed’leri veya iframe’ler, mevcut içeriği aşağı iterek ciddi layout shift üretir. Google’ın CLS optimizasyon rehberine göre, özellikle header altında veya içerik ortasında konumlanan reklam alanları en belirgin CLS kaynakları arasındadır.

4. Yanlış Yapılandırılmış Lazy Loading

loading=”lazy” atribütüyle yüklenen boyutsuz görseller, viewport’a yaklaştıklarında belleğe alınırken çevreleyen içeriği kaydırabilir. Lazy loading ile CLS arasındaki bu ilişki, özellikle mobil cihazlarda sayfa ortasındaki görsellerde sık karşılaşılan bir sorundur. Çözüm, lazy loading’i mutlaka boyut tanımıyla birlikte kullanmaktır.

5. Kullanıcı Etkileşimi Olmadan Görünen Overlay ve Banner’lar

Sayfa yüklendikten sonra otomatik beliren çerez onay banner’ları, bildirim çubukları veya pop-up overlay’ler sayfadaki içeriği aşağı iterek CLS’ye katkıda bulunur. Kullanıcının hiçbir tıklama yapmadan tetiklenen her dinamik element potansiyel bir layout shift kaynağıdır. Yalnızca kullanıcı etkileşimine yanıt olarak eklenen elementler CLS hesabına dahil edilmez.

Görsel Kararlılık Nasıl Sağlanır: Kod ve Tasarım Çözümleri

CLS nedenlerini tespit ettikten sonra uygulayabileceğiniz somut çözümlerin büyük çoğunluğu, az sayıda HTML veya CSS değişikliğiyle hayata geçirilebilir.

Görsellere width ve height Atribütü Ekleyin

Tüm img etiketlerine genişlik ve yükseklik değeri girmek, tarayıcının görsel yüklenmeden önce sayfada doğru miktarda alan rezerve etmesini sağlar. Modern tarayıcılar bu atribütleri kullanarak en-boy oranını otomatik hesaplar; responsive tasarımlarda bile width: 100% CSS kuralıyla birlikte kullanıldığında doğru oranı korur. CSS’e ek olarak aspect-ratio: 4/3 gibi bir tanım da tarayıcının görsel alanını erken rezerve etmesini garantiler.

Web Fontlarını Optimize Edin

CSS @font-face tanımına font-display: swap eklemek, web fontu yüklenene kadar sistem fontunu kullanır ve yüklendikten sonra geçiş yapar. Bu geçiş küçük bir kayma yaratabilse de tamamen görünmez metinden (FOIT) çok daha kabul edilebilirdir. Daha az kayma için font-display: optional tercih edilebilir; ancak bu değer, yavaş bağlantılarda web fontunun hiç uygulanmamasına yol açabilir. Kritik fontlar için link rel=’preload’ etiketi kullanmak, tarayıcının fontu erken indirmesini sağlayarak FOUT süresini minimuma indirir.

Reklam ve Embed Alanlarına Önceden Yer Ayırın

Dinamik yüklenen reklam ve iframe alanlarına min-height ile sabit bir wrapper div yerleştirmek, içerik yüklenmeden önce sayfada alanı rezerve eder. Standart bir banner reklam için 90 piksel minimum yükseklik içeren bir wrapper, reklam yüklenene kadar boş alan tutar; reklam bu alan içinde yüklenir ve mevcut içeriği itmez. Reklam beklenenden küçük gelirse küçük bir boşluk kalır; bu, layout shift yaratmaktan çok daha kabul edilebilir bir kullanıcı deneyimidir.

Animasyonları CSS transform ile Yeniden Yazın

top, left, margin veya width gibi CSS özelliklerini değiştiren animasyonlar, tarayıcının layout’u yeniden hesaplamasını zorunlu kılar ve CLS’ye katkıda bulunur. Bu animasyonları transform: translate() veya opacity kullanacak biçimde yeniden yazmak, tarayıcının composite katmanında çalışmasını sağlar. CSS transform, layout hesabını atlayarak GPU’da işlendiğinden CLS skoru sıfır kalır; bu yaklaşım animasyon performansını da artırır.

Lazy Loading ve CLS İlişkisini Doğru Yönetin

loading=”lazy” atribütünü kullanırken her zaman width ve height atribütlerini de ekleyin. IntersectionObserver ile özel lazy loading uygulamalarında ise görsel belleğe alınmadan önce sayfaya bir placeholder div yerleştirin; görselin boyutlarını bu div üzerinden tanımlayın. Bu yaklaşım, görsel yüklenirken çevreleyen içeriğin sabit kalmasını garanti eder.

CLS Ölçüm Araçları: PageSpeed Insights, Chrome DevTools ve Search Console Karşılaştırması

CLS değerini doğru ölçmek için doğru aracı doğru amaçla kullanmak kritiktir. Her araç farklı bir veri kaynağından beslendiğinden, raporlar arasındaki farkları anlamak hem hata tespiti hem de öncelik belirleme açısından büyük önem taşır.

PageSpeed Insights, hem lab verisi (Lighthouse motoruyla anlık ölçüm) hem de alan verisi (Chrome User Experience Report — CrUX ile gerçek kullanıcı metrikleri) sunar. Lab verisi tekrarlanabilir ve anlık olduğundan hata tespiti için idealdir; ancak Google’ın sıralama kararlarında kullandığı asıl değer, gerçek kullanıcılardan toplanan alan verisidir. Bu iki değer arasındaki fark kritiktir: lab testi kontrollü bir ortamda çalışırken, alan verisi farklı cihaz, ağ hızı ve kullanıcı davranışlarını yansıtır.

Chrome DevTools, element bazlı CLS tespiti için en güçlü araçtır. Performance panelini açıp sayfayı kaydettikten sonra “Layout Shift” olaylarını tıklayarak hangi HTML elementinin kaymaya yol açtığını piksel hassasiyetinde görebilirsiniz. DevTools, her layout shift olayının CLS skoruna katkısını sayısal olarak listeler; bu sayede hangi elementin öncelikle düzeltilmesi gerektiğini net biçimde ortaya koyar. Google Chrome Developers YouTube kanalındaki resmi “Debug layout shifts in Chrome DevTools” videosu bu süreci adım adım görselleştirmektedir.

Google Search Console ise 2025–2026 döneminde CLS raporlarına sayfa grubu bazında granülerite ekledi. Artık “zayıf” veya “geliştirilmesi gereken” CLS’ye sahip URL gruplarını toplu biçimde görebilir, hangi şablon veya sayfa tipinin sorunlu olduğunu çok daha hızlı tespit edebilirsiniz.

SEOYEN site sağlığı aracı, Türkçe arayüzüyle CLS hatalarını sayfa bazında önceliklendirir ve hangi sayfaların önce düzeltilmesi gerektiğini açıkça ortaya koyar. Ahrefs veya SEMrush gibi araçların İngilizce site audit raporlarından farklı olarak SEOYEN, yerel Türk pazarına uyarlanmış TL bazlı fiyatlandırma ve Türkçe destek sunar; bu da küçük işletmeler ve Türkiye’deki SEO uzmanları için önemli bir avantajdır. SEOYEN abonelik planlarını incelemek için fiyatlandırma sayfasını ziyaret edebilirsiniz.

Gerçek Bir E-ticaret Sitesinde CLS Optimizasyonu: Önce/Sonra Vaka Analizi

CLS optimizasyonunun pratikte nasıl işlediğini somutlaştırmak için, giyim kategorisinde faaliyet gösteren bir e-ticaret sitesinde yürütülen optimizasyon sürecini inceleyelim. Başlangıç CLS skoru 0.38 olup Google’ın zayıf eşiğinin (0.25) belirgin biçimde üzerindeydi; bu durum ürün sayfalarında arama görünürlüğünü olumsuz etkiliyordu.

Chrome DevTools Performance panelinde yapılan incelemede en yüksek layout shift puanını ürün görseli carousel’i üretiyordu. Carousel görselleri width ve height atribütü olmadan yüklendiğinden, her görsel değişiminde içerik aşağı kayıyordu. İkinci büyük kayma kaynağı ise sayfanın üst bölümüne JavaScript ile eklenen bir reklam bandıydı.

Uygulanan düzeltmeler ve her birinin CLS skoruna katkısı:

• Carousel görsellerine width/height eklenmesi: CLS 0.38’den 0.22’ye indi (0.16 puanlık iyileşme)
• Reklam alanına min-height:90px wrapper eklenmesi: CLS 0.22’den 0.11’e indi (0.11 puanlık iyileşme)
• Header fontuna font-display: swap eklenmesi: CLS 0.11’den 0.07’ye indi (0.04 puanlık iyileşme)

Nihai CLS skoru 0.38’den 0.07‘ye geriledi; bu değer Google’ın “iyi” eşiğinin oldukça altındadır. Değişiklikler canlıya alındıktan yaklaşık 4–6 hafta sonra Google Search Console alan verisi güncellendi ve ürün kategori sayfalarında organik sıralama yükselişi gözlemlendi. Sıralama takibini sürdürmek için düzenli izleme yapmak, Core Web Vitals iyileştirmelerinin SEO’ya yansımasını somut biçimde belgelemenizi sağlar.

WordPress ve Next.js’te CLS Sorunlarını Giderme: Framework Rehberi

Farklı platformlarda CLS sorunları farklı kanallardan kaynaklanır. Framework’e özgü yaklaşımlar, genel çözümlerin ötesinde daha hızlı ve kalıcı sonuçlar verir.

WordPress’te CLS Giderme

WordPress sitelerinde CLS’nin en yaygın kaynakları şunlardır: tema CSS dosyalarındaki boyutsuz medya elementleri, reklam yönetim eklentilerinin header veya içerik içine dinamik kod enjeksiyonu ve font yüklemeyi yöneten eklentilerin font-display değerini atlaması. WordPress 5.5 ve üzeri sürümler, yeni yüklenen görsellere width ve height atribütünü otomatik ekler; ancak eski içeriklerde bu değerlerin eksik olma ihtimali yüksektir. Reklam eklentileri için her reklam alanına min-height ile wrapper eklenmelidir; tema functions.php dosyasına eklenen filtrelerle lazy loading seçici biçimde yönetilebilir ve CLS riski azaltılabilir.

Next.js ve Nuxt.js’te CLS Giderme

Next.js, next/image bileşeniyle CLS sorunlarını büyük ölçüde otomatik olarak çözer: bileşen, görsel boyutlarını derleme aşamasında algılar ve sayfaya rezervasyon alanını kendiliğinden ekler. Ancak üçüncü taraf kaynaklardan çekilen görsellerde bu otomasyonun devreye girmeyebileceğini ve width ile height prop’larının elle girilmesi gerekebileceğini göz önünde bulundurun. Nuxt.js’te ise nuxt/image modülü benzer bir işlev görür ve lazy loading’i CLS dostu biçimde yönetir.

iframe ve Üçüncü Taraf Embed’lerin CLS Etkisini Azaltın

YouTube, Google Harita veya Twitter gibi üçüncü taraf embed’ler, iframe yüklenmeden önce sayfada yer kaplamaz ve ciddi layout shift yaratabilir. Bu embed’leri Facade Pattern ile değiştirmek — hafif bir yer tutucu görsel kullanmak ve gerçek iframe’i yalnızca kullanıcı tıkladığında yüklemek — hem CLS’yi sıfıra yakın tutar hem de sayfa yükleme süresini kısaltır. aspect-ratio: 16/9 tanımlı bir wrapper div, iframe yüklenmeden önce sayfada doğru oranı rezerve eder.

CLS Değerini Düşürme: Adım Adım Görsel Kararlılık Rehberi

1. PageSpeed Insights ile mevcut CLS skorunu ölçün: Sitenizin URL’sini PageSpeed Insights’a girerek hem lab hem de alan verisi CLS değerlerini not edin; en yüksek skorlu sayfaları öncelik listesine alın.
2. Chrome DevTools ile layout shift kaynaklarını tespit edin: DevTools Performance panelini açın, sayfayı kaydedin ve Layout Shift olaylarını tıklayarak kaymaya neden olan HTML elementini kesin olarak belirleyin.
3. Boyutsuz görsellere width ve height atribütü ekleyin: Tüm img etiketlerine genişlik ve yükseklik değeri girin; gerekiyorsa CSS aspect-ratio özelliğiyle tarayıcının görsel alanını önceden rezerve etmesini sağlayın.
4. Web fontlarını font-display: swap ile optimize edin: CSS @font-face tanımına font-display: swap ekleyin; kritik fontlar için link rel=’preload’ kullanarak FOUT kaynaklı metin kaymasını minimize edin.
5. Reklam ve embed alanlarına sabit placeholder ekleyin: Dinamik yüklenen reklam ve iframe alanlarına min-height ile sabit bir wrapper yerleştirin; içerik bu alan içinde yüklensin ve mevcut öğeleri itmesin.
6. Animasyonları CSS transform ile yeniden yazın: top, left ve margin gibi layout tetikleyen CSS animasyonlarını transform: translate() ile değiştirin; transform layout yeniden hesaplamadığından CLS katkısı sıfırdır.
7. Düzeltme sonrası CLS skorunu doğrulayın: Değişiklikler canlıya alındıktan 24–48 saat sonra PageSpeed Insights ile skoru tekrar ölçün; Search Console alan verisi güncellemesi birkaç hafta sürebilir.

Sıkça Sorulan Sorular