CLS (Cumulative Layout Shift) Nedir?

Kullanıcının fark ettiği sorun

Bir habere tıklamak üzereyken üstte bir reklam yüklenir, metin aşağı kayar ve parmağınız başka bir bağlantıya denk gelir. CLS tam olarak bu deneyimi sayısallaştırır. Ölçülen şey hız değil, kararlılıktır: sayfa çok hızlı yüklense bile içerik zıplıyorsa CLS kötü olabilir.

Puan nasıl hesaplanır?

Her tekil kayma için tarayıcı iki oranı çarpar: kayan öğelerin görüntü alanında kapladığı pay (impact fraction) ve öğelerin ne kadar uzağa gittiği (distance fraction, görüntü alanının büyük kenarına oranla). Birbirine bir saniyeden kısa aralıkla gelen kaymalar, en fazla beş saniyelik bir "oturum penceresi" içinde toplanır. Sayfanın CLS değeri, sayfa ömrü boyunca oluşan en kötü oturum penceresinin toplamıdır.

Kullanıcı tıkladıktan, dokunduktan ya da tuşa bastıktan sonraki 500 milisaniye içinde gerçekleşen kaymalar beklenen değişiklik sayılır ve hesaba katılmaz. Örneğin "Devamını oku" düğmesiyle açılan bir bölüm CLS'yi bozmaz. Kaydırma ise bu istisnaya girmez.

En sık nedenler

• Boyutu belirtilmemiş görseller ve videolar: Tarayıcı dosya gelene kadar ne kadar yer ayıracağını bilemez.
• Reklam, gömülü içerik ve iframe'ler: Sonradan yüklenip kendini yeniden boyutlandıran üçüncü taraf alanlar.
• Sonradan eklenen DOM öğeleri: Çerez bildirimi, kampanya şeridi veya mevcut içeriğin üstüne eklenen uyarılar.
• Web fontları: Yedek fonttan web fontuna geçişte metin satırlarının uzayıp kısalması.

Önleme yöntemleri

Temel ilke basittir: içerik gelmeden önce yerini ayırın.

<img src="/urun.webp" width="800" height="600" alt="Ürün görseli">

/* CSS ile oran korunur, görsel yine esnek kalır */
img { max-width: 100%; height: auto; }
.reklam-alani { min-height: 250px; }

• Görsellere ve videolara width/height nitelikleri ya da CSS aspect-ratio verin; responsive tasarımda da oran bu şekilde korunur.
• Reklam ve gömülü içerik alanları için en az yükseklik tanımlayın.
• Bildirimleri içeriği itecek şekilde değil, üst katman (overlay) olarak gösterin.
• Font geçişinin etkisini font-display ayarı ve yedek fontun ölçü ayarlarıyla azaltın.
• Animasyonlarda top/left yerine transform kullanın; transform düzen kayması üretmez.

Lazy loading tek başına CLS'ye yol açmaz; sorun, gecikmeli yüklenen görselin boyutunun önceden belirtilmemesidir.

Nasıl bulunur?

Chrome DevTools'un Performance panelinde "Layout shifts" izi, hangi öğenin ne zaman kaydığını gösterir. Saha verisinde sorun görünüp laboratuvarda görünmüyorsa, kayma büyük olasılıkla sayfa yüklendikten sonra (kaydırma sırasında, geç gelen reklamlarla) oluşuyordur. Hesaplama ayrıntıları web.dev CLS rehberinde yer alır.