CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Performans galerisi

HTML kursu · İleri seviye · Ders 6/56

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

  1. 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

  2. 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">

  3. 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.

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi