Özet - Performans galerisi

Tüm performans teknikleriyle bir görsel galerisi yazarsın.

Bu grupta öğrendiklerimiz

Bu grupta görsellerin performansını artıran beş tekniği gördün:

loading="lazy": tembel yükler
decoding="async": arka planda çözer
srcset ve sizes: duyarlı görsel
width/height: yerleşim kaymasını önler
preload ve prefetch: erken yükleme

Şimdi hepsini bir performans galerisinde birleştireceğiz.

Uygulama Performans galerisi yaz

Body içine iki <figure> ekle. Her figure içinde bir <img> ve bir <figcaption> olsun. Her img'de src, boş olmayan alt, sayısal width ve height, loading="lazy" ve decoding="async" bulunsun. Figcaption'lardaki metinler sırasıyla Sokak kedisi ve Park köpeği olsun.

Örnek çözümü göster

<body>
  <figure>
    <img src="/gorseller/kedi.jpg" alt="Sokak kedisi"
         width="800" height="600"
         loading="lazy" decoding="async">
    <figcaption>Sokak kedisi</figcaption>
  </figure>
  <figure>
    <img src="/gorseller/kopek.jpg" alt="Park köpeği"
         width="800" height="600"
         loading="lazy" decoding="async">
    <figcaption>Park köpeği</figcaption>
  </figure>
</body>

Kendini test et

Tekniği amacıyla eşleştir

loading="lazy"

Tembel yükler
decoding="async"

Arka planda çözer
srcset

Çözünürlük adayları
width/height

Yerleşim kaymasını önler
preload

Kritik kaynağı erken yükler

loading ve decoding birlikte

<img src="/gorseller/orman.jpg" alt="Orman" ____>

Cevabı göster

<img src="/gorseller/orman.jpg" alt="Orman" loading="lazy" decoding="async">

Bir blog yazısında, ekranın üstünde görünen kapak görseli için en performanslı yaklaşım hangisidir?
- loading="lazy" ile tembel yükle
- decoding="sync" ile hemen çöz
- rel="prefetch" ile önbelleğe al
- rel="preload" ile erken yükle
Cevabı göster

rel="preload" ile erken yükle — Doğru. Üstteki kapak görseli kritik olduğu için preload ile erken yüklenir; lazy değil.

Sıradaki ders: Picture ve source

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler