CLS (Cumulative Layout Shift) Hatası Nedenleri ve Kesin Çözüm Yolları

Okuma Deneyimi Suikastı: Layout Shift Nedir?

Bir makaleyi okumak ya da butona o saniye basmak üzereyken web sayfasındaki nesnelerin yer yerinden oynamışcasına aniden aşağı kaydığı gerilimli durumu hatırlayın. Yanlış butona tıklamanıza veya kaldığınız satırı kaybetmenize sebep olan bu duruma Cumulative Layout Shift (Kümülatif Düzen Kayması - CLS) denir. Google bu durumu kötü amaçlı reklam yerleşimleriyle bile bağdaştırarak ciddi bir UX cezalandırma (Core Web Vitals) metrisine dönüştürdü. CLS puanınızın her halükarda 0.1 ve altında olması şarttır.

CLS Belalarını Sayfaya Getiren Kaynaklar

• Üzerinde net genişlik (width) ve yükseklik (height) boyutu etiketleri bulunmayan görseller / iframe'ler (reklam panoları).
• Geç veya asenkron yüklenen dinamik Javascript blokları, widgetlar.
• Web fontlarının yüklenmesi sırasında kelimelerin patlamasıyla görünen font değişimi flaşları (FOIT / FOUT).

Kesin Çözüm Metodolojileri

Görsel Alanlarına Yükseklik/Genişlik Rezerve Etmek

En kritik adım HTML öğesinde yer açmaktır. Eğer tarayıcı; bir resmin ekrana gelmeden önce 800px genişliğinde ve 600px yüksekliğinde olduğunu önceden koddan okursa (<img src="x.jpg" width="800" height="600" />), o resmin yerini "ayırır" ve resim geldiğinde altındaki metni ötelemez. Boşluk rezerve etme olarak bilinen bu teknik, CSS'in aspect-ratio (en-boy oranı) kurallarıyla da desteklenerek modern ve esnek duyarlılığı (responsive design) sekteye uğratmadan uygulanır.

Web Fontlarında FOIT/FOUT Katliamını Önlemek

Tarayıcı ana yazı tipini (örneğin Roboto) indirene kadar geçici bir anlık standart font (System UI) gösterilir, özel font inince de onunla yer değiştirilir. Eğer inme süresinde fontların piksel kalınlığı aynı değilse sistem kayar. Bunun önüne geçmek için kritik font dosyalarınıza rel="preload" atayarak hızlandırın ve CSS kurallarında font-display: optional; veya alternatif fallback kodlaması kullanın.

Reklam ve İframe Bloklarına Sabit Tavan Belirlemek

Adsense veya benzeri reklam kodları yüklenirken genelde esnek div bloklarına gömülür. Bunlara reklam gelene kadar min-height CSS stilleri vererek CLS sızıntısını ve aşağı ivmeli kaymayı %100 sıfırlayabilirsiniz.