CLS: Düzen Kaymaları

Kullanıcının Sabrını Taşıran Kaymalar: CLS

Okumaya çalıştığınız metnin bir anda aşağı kayması veya tam tıklayacakken butonun yer değiştirmesi kadar kötü bir deneyim azdır. Google, Cumulative Layout Shift (CLS) metriği ile bu istikrarsızlığı ölçer ve 0.1'in altını "iyi" kabul eder.

CLS Neden Oluşur?

• Boyutları belirtilmemiş görseller ve videolar.
• Gecikmeli yüklenen fontlar (FOIT/FOUT sorunu).
• Dinamik olarak eklenen reklam alanları veya widget'lar.
• Geç yüklenen CSS dosyaları nedeniyle stil değişimleri.

Çözüm Yolları

• Tüm <img> ve <video> taglarına width ve height değerleri ekleyin.
• CSS'de aspect-ratio özelliğini kullanarak alan rezervasyonu yapın.
• Font yüklemeleri için font-display: swap kullanırken, fallback fontun boyutlarını ana fontla hizalayın.
• Reklam alanları için sabit yükseklikli container'lar oluşturun.