Width/height ve CLS

Görsel boyutlarıyla cumulative layout shift'i azaltmayı öğrenirsin.

CLS nedir?

Sayfa yüklenirken görselin yerleşmesi diğer içerikleri kaydırırsa okuyucu rahatsız olur. Bu kaymaya cumulative layout shift (CLS) denir. CLS ne kadar küçükse o kadar iyi.

Bir görselin genişlik ve yüksekliğini baştan yazarsan tarayıcı, görsel için yeri rezerve eder. Böylece görsel sonra gelince sayfa zıplamaz. <img width="800" height="600"> yazman yeterlidir.

Boyutlar nasıl yazılır?

width ve height öznitelikleri piksel değer alır; ancak px birimi yazılmaz. Yani width="800" doğrudur, width="800px" değil.

Bu değerler görselin doğal boyutlarını verir. CSS ile görüntülenen boyutu farklı olabilir; tarayıcı yine de oranları korur. Bu sayede görsel küçültülse bile sayfa zıplamaz.

Uygulama Boyutlu, tembel ve arka planda çözülen görsel yaz

Body içine tek bir <img> ekle. Bu img'de şunlar bulunsun: src (örnek /gorseller/urun.jpg), boş olmayan alt, sayısal width ve height, loading="lazy" ve decoding="async".

Örnek çözümü göster

<body>
  <img src="/gorseller/urun.jpg"
       alt="Ürün"
       width="400"
       height="300"
       loading="lazy"
       decoding="async">
</body>

Kendini test et

Bir görselin width ve height özniteliklerini yazmak neyi önler?
- Görselin yeniden boyutlanmasını
- Sayfa yerleşim kaymasını (CLS)
- Görselin tembel yüklenmesini
- Görselin arka planda çözülmesini
Cevabı göster

Sayfa yerleşim kaymasını (CLS) — Doğru. width ve height tarayıcıya yeri önceden söyler; kayma olmaz.

img'e width ve height ekle

<img src="/gorseller/urun.jpg" alt="Ürün" ____>

Cevabı göster

<img src="/gorseller/urun.jpg" alt="Ürün" width="400" height="300">

Terimi anlamıyla eşleştir

width

Yatay piksel boyu
height

Dikey piksel boyu
CLS

Yerleşim kayması
oran

width/height korunur

Sıradaki ders: Preload ve prefetch

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler