CLS

Eş anlamlılar: Cumulative Layout Shift

CLS (Cumulative Layout Shift), sayfa yüklenirken görsel öğelerin beklenmeyen kayma miktarını ölçen Core Web Vitals metrikidir. İyi skor 0.1 altıdır. Yanlış yüklenen resimler, reklamlar ve web fontları CLS'yi yükseltir. Kullanıcı deneyimini doğrudan etkiler.

CLS Nedir?

CLS (Cumulative Layout Shift — Kümülatif Düzen Kayması), bir web sayfası yüklenirken sayfadaki görsel öğelerin beklenmeyen şekilde yer değiştirmesinin kümülatif ölçümüdür. Google'ın Core Web Vitals üçlüsünün ikinci metriğidir. Kullanıcı bir butona tıklamaya çalışırken sayfa kayarsa ve yanlış yere tıklarsa, bu CLS sorununa işaret eder.

Google'ın CLS Hedefleri

  • İyi: 0.1 altı
  • Geliştirilmesi gerek: 0.1-0.25
  • Kötü: 0.25 üzeri

CLS Neden Oluşur?

  • Görsellere width ve height atanmamış
  • Reklam/iframe yüklenirken boyut ayrılmamış
  • Web fontları yüklenirken text boyutu değişiyor (FOIT/FOUT)
  • Dinamik içerik (banner, cookie notice) üstten iniyor
  • Slider, carousel yüklenirken sıçrama
  • Lazy-load yanlış yapılandırılmış
  • CSS animasyon layout-triggering property kullanıyor

CLS İyileştirme Yöntemleri

1. Görsel Boyut Atamaları

<img src="hero.jpg" width="800" height="600" alt="...">

Modern CSS ile aspect-ratio:

img { width: 100%; height: auto; aspect-ratio: 4/3; }

2. Font Loading

  • font-display: optional veya swap
  • preload kritik fontlar
  • System font stack fallback

3. Reklam ve Embed Alanları

Önceden yeri rezerve et:

.ad-slot { min-height: 250px; width: 300px; }

4. Dinamik İçerik

  • Cookie banner position: fixed bottom — layout'u etkilemez
  • Newsletter popup modal içinde
  • Skeleton loader ile placeholder

5. Transform Kullan

Animasyonlarda top, left, margin değil transform: translate() kullan — layout'u tetiklemez.

CLS Ölçme

  • PageSpeed Insights
  • Chrome DevTools Performance sekmesi → Experience bölümü
  • Web Vitals Chrome eklentisi — anlık görsel gösterge
  • Search Console Core Web Vitals raporu
  • Layout Shift Inspector (Chrome flag)

CLS ve Mobile

Mobil görünümde CLS daha kritiktir — küçük ekranda kayma büyük etki yaratır. Google mobil-first indexing nedeniyle mobil CLS'yi daha ağır tartar.

CLS İstisna Durumları

Kullanıcı etkileşimiyle (tıklama) oluşan kaymalar CLS'ye dahil edilmez (500ms içinde). Örneğin "devamını oku" tıklaması sonrası içerik açılması normaldir.

CLS Test Araçları

  • Chrome DevTools: Rendering panelinde "Layout Shift Regions"
  • Lighthouse: Detaylı CLS raporu, en çok etki eden öğeler
  • WebPageTest: Filmstrip view
  • Layout Shift GIF Generator

WordPress CLS İyileştirmesi

  • Lazy load eklentisi "native" modda
  • Image dimensions otomatik doldur
  • Web font preload
  • Cookie notice bottom sticky
  • Hero banner sabit boyutlu

MeoHost ve CLS

MeoHost hosting paketlerinde LSCache image optimization eklentisi görsel boyutlarını otomatik doldurur, font preload uygular ve CLS skorunu 0.05-0.08 bandına çeker. WordPress sitelerinde ilk kurulumdan itibaren Core Web Vitals uyumluluğu sağlanır.

İlgili Terimler