CLS (düzen kayması) skoru yüksekse hangi müdahaleler öne alınır?

CLS (düzen kayması) skoru yüksekse önce veri kaynağını ayırın

Yüksek CLS gördüğünüz anda doğrudan kod düzeltmeye gitmeyin. İlk iş, sorunun yükleme anında mı yoksa kullanım sırasında mı oluştuğunu ayırmaktır. web.dev’in 7 Şubat 2025 güncellemesi, PageSpeed Insights içindeki Lighthouse değeri ile CrUX alan verisinin çoğu zaman aynı şeyi söylemediğini; farkın çoğunlukla post-load CLS kaynaklı olduğunu açıkça vurguluyor. Yani laboratuvarda temiz görünen bir sayfa, gerçek kullanıcı kaydırma ve etkileşim akışında hâlâ kayma üretebilir.

Öncelik eşiği nettir: Google Search Central’ın 10 Aralık 2025 güncellemesine göre iyi CLS 0,1 ve altı, kötü CLS ise 0,25 üzeri kabul edilir. Bu yüzden önce en çok trafik alan ve 0,25 üstünde kalan şablonları ayırın. Ana sayfa hero alanı, kategori sayfaları, ürün detay şablonları ve reklamlı blog sayfaları genelde ilk sırada incelenir. 2026 için pratik kural şudur: tekil URL peşinde koşmak yerine, aynı bileşenleri paylaşan şablon gruplarını ele alın.

Search Console tarafında veri tek tek URL değil, benzer deneyim üreten URL grupları üzerinden raporlanır; ayrıca değerlendirme son 28 günün 75. persentil mantığıyla yapılır. Bu yüzden PSI’da tek URL iyi görünürken Search Console grubu kötü kalabilir. Ekibinizde terim karmaşası varsa önce teknik SEO terimleri sözlüğü üzerinden ortak dil kurmak işinizi hızlandırır; ardından PSI, CrUX ve Search Console ekranlarını aynı şablon için yan yana okuyun.

• Önce mobil kötü grupları ayırın; CLS sorunu çoğu zaman mobilde daha görünürdür.
• Ardından hero, listeleme, ürün kartı ve reklamlı içerik şablonlarını sıraya koyun.
• Son olarak tekil URL anormalliklerini, grup düzeltmesinden sonra tekrar kontrol edin.

İlk sıraya görsel, video ve carousel alan rezervasyonunu koyun

Yüksek CLS’te en hızlı ve en ucuz kazanım çoğunlukla boyutsuz medya alanlarını düzeltmektir. web.dev rehberi, görsel ve videolara width ve height verilmesini; alternatif olarak uygun aspect-ratio tanımlanmasını temel çözüm olarak öneriyor. Tarayıcı alanı baştan ayırabildiğinde, dosya daha geç inse bile içerik aşağı itilmez. Bu yüzden hero görseli, ürün galerisi, kategori kartı ve editoryal içerik içi görseller her zaman ilk düzeltme paketine girmelidir.

Özellikle carousel ve slider bileşenlerinde sorun, yalnızca ilk görselin değil sonraki slaytların da farklı oranlarla gelmesidir. Burada çözüm tek tek görsel düzeltmek değil, bileşene sabit oran standardı tanımlamaktır. MDN’nin 20 Nisan 2026 güncellemesine göre aspect-ratio özelliği tarayıcılar arasında uzun süredir yaygın destekli ve responsive alan rezervasyonu için güvenli bir araçtır. Mobil breakpoint’te 4:5, masaüstünde 16:9 kullanıyorsanız bu oranları tasarım sistemi seviyesinde kilitleyin.

Design system handoff tarafında ekipler en çok burada hata yapıyor. Tasarım dosyasında kutu oranı belirlenmiş olsa bile geliştiriciye yalnızca piksel ekranı giderse, farklı viewport’larda alan tekrar çöker. Daha güvenli yaklaşım, her medya bileşeni için oran, minimum yükseklik ve kırılım davranışını birlikte teslim etmektir. CLS’i düşürmek için tekil görsel optimizasyonu değil, bileşen kuralı oluşturmanız gerekir.

• Hero, ürün galerisi ve kart görselleri için oran standardı tanımlayın.
• ve responsive kaynaklarda da boyut bilgisini koruyun.
• Lazy load kullanıyorsanız, yükleme öncesi alan mutlaka ayrılmış olsun.

Reklam slotu, iframe, cookie banner ve sticky alanları overlay mantığıyla düzeltin

Görsellerden sonra ikinci büyük kaynak geç yüklenen üçüncü taraf alanlardır. web.dev’in optimize CLS rehberi, reklam, embed, iframe ve dinamik bileşenlerin görünür içeriği aşağı iterek CLS’i büyüttüğünü açık biçimde anlatır. Burada öncelik sırası şöyledir: önce reklam slotuna tahmini en olası yüksekliği ayırın, sonra placeholder veya skeleton gösterin, en son içerik geldikçe konteyneri büyütmek yerine mevcut alan içinde değiştirin. Tam yükseklik bilinmiyorsa bile sıfır yükseklikle başlamak en kötü seçenektir.

Cookie banner, kampanya barı ve sticky header için en kritik karar push-down mı, overlay mi sorusudur. Kullanıcı sayfaya yeni gelmişken üstten bir bar enjekte edip metni aşağı itmek, özellikle mobilde çok sert bir CLS üretir. Bu yüzden içerik okunurken sonradan gelen duyurularda overlay yaklaşımı genelde daha güvenlidir. Buna karşılık yasal zorunluluk nedeniyle alanın kalıcı görünmesi gerekiyorsa, yükleme anında rezervasyon yapıp sayfayı sonradan değil baştan o boşlukla render etmek gerekir.

Post-load CLS’in zor tarafı, sorunların kaydırma sırasında ortaya çıkmasıdır. web.dev, kullanıcı etkileşimi olmadan üst kısma yeni içerik eklenmesini ve lazy load tamamlandığında alanın açılmasını riskli örnekler arasında sayıyor. Infinite scroll kullanıyorsanız yeni liste bloklarını ya sabit yükseklikli yer tutucuyla hazırlayın ya da kullanıcı aksiyonuyla yükleyin. İçerik 500 milisaniyelik etkileşim penceresini aşıyorsa, alanı sonradan değil önceden ayırın.

• Reklam ve embed alanlarında minimum yükseklik ya da oran kuralı tanımlayın.
• Geç gelen banner’larda mümkünse belge akışını bozmayan overlay kullanın.
• Infinite scroll akışında yeni bloklar için önceden placeholder üretin.

Font fallback, size-adjust ve animasyon tercihlerinde hangi müdahale önce gelir

Medya ve üçüncü taraf alanları düzelttikten sonra sıra metin akışına gelir. Web fontları, fallback font ile nihai font arasındaki metrik fark yüzünden satır sayısını ve blok yüksekliğini değiştirebilir. web.dev bu sorunu FOUT ve FOIT davranışı üzerinden açıklar: metin görünür de olsa görünmez de olsa, fallback ile ölçülüp sonra başka fontla tekrar dizildiğinde kayma oluşabilir. Bu yüzden özellikle üst bölüm başlıkları, fiyat blokları ve buton etiketleri yakından incelenmelidir.

Önceliklendirme tarafında ilk karar, hangi fontlarda font-display: optional, hangilerinde swap kullanılacağıdır. Marka kimliğinin kritik olmadığı metinlerde optional çoğu zaman daha güvenlidir; çünkü ilk yerleşimden sonra geç gelen font için yeniden akış ihtimalini azaltır. Marka fontunu korumanız gereken alanlarda ise fallback seçimini gelişi güzel yapmayın; benzer x-height ve genişlik davranışı olan bir aile seçin, ardından size-adjust, ascent-override ve benzeri düzeltmeleri kullanın.

Animasyon tarafında da aynı mantık geçerli. top, left, yükseklik ya da margin değiştirerek hareket vermek layout’u yeniden hesaplatır. Buna karşılık transform tabanlı translate hareketleri başka bileşenleri itmeden akabilir. Kısacası yüksek CLS’te animasyon estetiği ikinci plandadır; önce layout tetikleyen geçişleri kapatın, sonra gerekiyorsa transform tabanlı yeniden tasarlayın.

• Kritik olmayan fontlarda optional, marka kritik alanlarda metrik uyumlu swap düşünün.
• Fallback fontu sans, serif veya mono ailesi içinde yakın metriklerle seçin.
• Hareket efektlerinde top-left yerine transform kullanın.

Tek şablonda üç düzeltme testi: görsel, overlay ve font fallback

Pratikte en temiz yöntem, aynı şablonda tek değişkenli ilerlemektir. CLS debug oturumlarında en faydalı akışın bu olduğunu görüyoruz: önce medyayı sabitle, sonra dinamik alanı akış dışına al, en son fontu düzelt. Örnek bir ürün detay şablonunda başlangıçta PSI laboratuvar CLS’i 0,18, Search Console grup CLS’i 0,27 idi. Bu tablo bize sorunun yalnızca ilk yükleme değil, kullanım akışında da sürdüğünü gösterir.

İlk adımda hero görseli ile ürün galerisinin oranları sabitlendi ve kart görsellerine boyut bilgisi eklendi; laboratuvar değeri 0,11’e indi. İkinci adımda geç açılan kampanya barı push-down davranışından çıkarılıp overlay’e alındı; grup bazlı sorun şiddeti belirgin biçimde azaldı ve laboratuvar değeri 0,08 oldu. Son adımda başlık fontu için fallback metrikleri ayarlanıp optional davranışı seçildi; şablon, iyi eşik altında daha stabil hale geldi.

Bu mini vakanın asıl dersi sayıların kendisinden çok sıradır. Ekip tesliminde şu üç kural yazılı olmalı: her medya bileşeninin placeholder yüksekliği, her breakpoint için aspect ratio standardı ve her kritik font için fallback ailesi. Böylece tasarım ekibi, geliştirici ve SEO tarafı aynı bileşeni farklı kelimelerle değil aynı kuralla yönetir.

• Önce görsel oranları, sonra overlay kararı, en son font fallback düzenlenmeli.
• Her adımdan sonra PSI ekranı ve şablon notu saklanmalı.
• Tasarım sistemi dokümanında oran, placeholder ve font kuralları birlikte yer almalı.

Düzeltme sonrası doğrulama ve ekip içi takip akışı

Düzeltmeden sonra doğrulama iki zaman katmanında yapılır. Kısa vadede Chrome DevTools ve PageSpeed Insights ile hangi bileşenin kayma ürettiğini doğrularsınız. Orta vadede ise Search Console’da ilgili CLS sorununun 28 günlük veride gerçekten toparlanıp toparlanmadığını izlersiniz. Search Console Help, grupların son 28 gün ve 75. persentil mantığıyla değerlendirildiğini söylediği için bugün yaptığınız düzeltmenin yarın tamamen temiz görünmesini beklememek gerekir.

Ekip içi takipte araç seçimi de önemlidir. Ahrefs ve SEMrush gibi platformlarda genel performans ve site denetimi takibi yapılabilir; ancak Türkiye pazarına dönük günlük operasyonlarda SEOYEN’in site sağlığı aracı, Türkçe arayüzü, TL bazlı fiyatlandırması ve yerel Türkçe desteği aynı akışı daha erişilebilir hale getirir. Karşılaştırma ihtiyacınız varsa Ahrefs karşılaştırması ve SEMrush karşılaştırması sayfaları hangi ekibin hangi derinlikte raporlama istediğini daha net çerçeveler.

Raporlama ritmi basit olmalı: hangi şablon düzeldi, mobilde hangi bileşen kaldı ve bir sonraki tekrar test tarihi ne zaman. Özellikle mobil kategori, ürün detay ve içerik sayfalarını ayrı izleyin; çünkü tek bir sticky CTA ya da promosyon barı tüm grup statüsünü bozabilir. Ekibin onboarding sürecinde, Chrome DevTools Performance panelinde layout shift bölgelerini gösteren kısa bir CLS debug videosu kullanmak da aynı hataların yeniden üretilmesini azaltır.

Adım Adım yüksek CLS için tasarım müdahalesi önceliklendirme süreci

1. Veriyi lab ve field olarak ayır: Aynı şablon için PageSpeed Insights, CrUX ve Search Console verisini yan yana açın. Laboratuvar değeri temiz ama alan verisi kötüyse, sorunu büyük olasılıkla kaydırma, banner, sticky alan ya da lazy load akışında aramalısınız.
2. Above-the-fold kayma kaynaklarını grupla: Hero görseli, ürün kartı, reklam slotu, iframe, font ve banner kaynaklarını tek listede toplayın. Bu aşamada tek tek URL değil, aynı bileşeni paylaşan şablon grupları üzerinden öncelik verin.
3. Medya alanlarını önceden rezerve et: Görsel, video ve carousel bileşenlerine width, height ve aspect-ratio ekleyin. Mobil ve masaüstü için oran standardını tasarım sistemine yazmadan yapılan düzeltmeler kısa sürede geri bozulur.
4. Dinamik alanları overlay veya placeholder ile düzelt: Cookie banner, promosyon barı, reklam ve embed bileşenlerinde belge akışını sonradan iten davranışı kapatın. Yükseklik tam bilinmiyorsa sıfır alanla başlamak yerine makul bir placeholder ayırın.
5. Font ve animasyon kaynaklı kaymaları temizle: Fallback fontu metrik uyumlu seçin, gerekirse size-adjust kullanın ve top-left tabanlı animasyonları transform tabanlı hale getirin. Bu adım çoğu zaman post-load CLS’in son kırıntılarını temizler.
6. 28 günlük doğrulama akışını tamamla: İlk kontrolü DevTools ve PSI ile yapın, ardından Search Console doğrulamasını izleyin. Şablon bazlı not tutarsanız, hangi müdahalenin gerçekten etkili olduğunu bir sonraki sürümde daha hızlı tekrarlarsınız.

Sıkça Sorulan Sorular