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