Kısa cevap: CLS (Cumulative Layout Shift), sayfadaki görünür öğelerin beklenmedik biçimde yer değiştirmesini ölçen Core Web Vitals metriğidir. Örneğin bir yazıyı okurken üstte sonradan yüklenen görsel tüm metni aşağı iterse kullanıcı yanlış bağlantıya dokunabilir. CLS yalnızca sayfanın hızlı açılıp açılmadığına değil, görüntünün ne kadar kararlı olduğuna odaklanır.
CLS puanı nasıl değerlendirilir?
web.dev rehberine göre 75. yüzdelik dilimde 0,1 veya altı iyi, 0,1–0,25 arası iyileştirilmeli, 0,25 üzeri zayıf kabul edilir. CLS değeri milisaniye değildir; kayma etkisine dayalı bir puandır. Kullanıcı eyleminden sonra beklenen değişikliklerle otomatik olarak ortaya çıkan beklenmedik değişiklikler aynı şekilde değerlendirilmez.
En yaygın kayma nedenleri
| Belirti | Olası neden | İlk çözüm |
|---|---|---|
| Görsel gelince metin aşağı kayıyor | Görselin boyut oranı ayrılmamış | width ve height ya da aspect-ratio kullanın |
| Reklam geç yüklenince sayfa sıçrıyor | Reklam kapsayıcısında ayrılmış alan yok | Uygun boyutlarda yer tutucu alan ayırın |
| Yazı tipi gelince satırlar değişiyor | Font metrikleri farklı | Uygun yedek font ve metrik ayarları uygulayın |
| Üstte bant belirip içeriği itiyor | Yeni öğe normal akışa sonradan giriyor | Alanı önceden tasarlayın veya kullanıcıya bağlı gösterin |
Pratik kod örneği: Görsel boyutlarını belirtin
Tarayıcı, görsel indirilmeden önce ayrılması gereken boşluğu hesaplayabilir. Aşağıdaki örnekte görselin gerçek oranı 1200×675’tir ve mobil genişlik için CSS uygulanır:
<img src="/images/rehber.webp" width="1200" height="675"
alt="Sayfa düzeni örneği">
img { max-width: 100%; height: auto; }Görüntüyü farklı oranlarda kırpıyorsanız kapsayıcıdaki oran da doğru seçilmelidir. Amaç yalnızca HTML’ye rastgele sayı yazmak değil, yükleme öncesi gereken yerin belirlenmesidir.
WordPress’te CLS için güvenli kontrol sırası
- Sorunlu sayfayı mobil ekranda kaydetmeden ve önbelleksiz açarak hareketleri gözlemleyin.
- Chrome DevTools Performance panelinde “Layout Shifts” olaylarını kontrol edin.
- Öne çıkan görsel, iframe, reklam ve gömülü video alanlarının oranlarını belirleyin.
- Font değişimi nedeniyle satır kırılmaları yaşanıyorsa yedek fontu karşılaştırın.
- Önbellek veya görüntü optimizasyonu eklentilerini tek tek test ortamında değerlendirin.
- Değişiklikten sonra gerçek kullanıcı verisinin zamanla nasıl değiştiğini izleyin.
Örnek olay: Makale üstü reklam alanı
Başlığın hemen altındaki reklam alanı ilk açılışta sıfır yüksekliğe sahipse reklam yüklendiğinde makale aşağı itilebilir. Alanın desteklenen reklam boyutlarına göre önceden ayrılması bu kaymayı azaltabilir. Ancak her cihazda çok büyük boşluk bırakmak da kullanıcı deneyimini zedeler; duyarlı tasarımda farklı ekran boyutlarına uygun alanlar gerekir.
CLS ve animasyon ilişkisi
top veya left ile öğe taşımak yerleşim hesaplarına yol açabilir. Uygun animasyonlarda transform tercih edilebilir. Bununla birlikte kaymayı düzeltmek için görsel hareketi gizlemek, içerik düzenindeki asıl nedeni ortadan kaldırmayabilir.
İlgili rehberler: PageSpeed Insights, LCP, WebP ve AVIF görselleri.
Kaymanın hangi öğeden başladığını ayırın
Sayfa açılırken başlık aşağı kayıyorsa bunun nedeni her zaman başlığın kendisi değildir. Üstteki görselin, reklam alanının veya geç yüklenen yazı tipinin kapladığı yer değişmiş olabilir. Önce hangi öğenin boyut değiştirdiğini belirleyip yalnız o bölümün yerleşimini düzeltin.
Örneğin 16:9 oranındaki bir kapak için yükleme öncesi alan ayırmak amacıyla uygun HTML width ve height değerleri veya kapsayıcıda aspect-ratio kullanılabilir. Ancak görüntülenen resmin gerçek oranı farklıysa boşluk ya da kırpma sorunu oluşabileceğinden görsel türüne göre test edin.
.article-cover {
aspect-ratio: 16 / 9;
}
.article-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Yazı tipi değişiminde satırların farklı kırılması da içerik yüksekliğini oynatabilir. Yedek fontun ölçülerini ve font yükleme stratejisini kontrol edin. Kayma düzeldikten sonra mobil ve masaüstünde ilk yüklemeyi, yavaş bağlantıyı ve geri/ileri gezintisini ayrı ayrı deneyin.
Sık sorulan sorular
CLS bir süre ölçümü müdür?
Hayır. Zaman yerine beklenmedik kaymaların görsel etkisine ilişkin bir puandır.
Tüm görseller lazy-load yapılırsa CLS düzelir mi?
Hayır. Tembel yükleme tek başına alan ayırmaz; görsel ve kapsayıcı oranları doğru tanımlanmalıdır.