# Lazy Loading (Tembel Yükleme)

Adres: https://softwaredictionary.org/tr/terimler/lazy-loading
Kategori: Web Geliştirme
Son güncelleme: 2026-09-30
Okunuşu: leyzi loding

Kısaca: Lazy loading, görsel, video, betik gibi kaynakların yüklenmesini gerçekten gerekene, genellikle görünür alana kaydırılana kadar erteleyen tekniktir.

## Lazy loading nedir?

Lazy loading, bir şeyi gerektiği ana kadar yüklememek demektir. Bir web sayfasında, sayfa açıldığında hepsini birden çekmek yerine, kaydırmadan görünen kısmın (fold) çok altındaki görseller ve gömülü videolar yalnızca kullanıcı onlara yaklaşınca çekilir. İlk yükleme küçülür ve hızlanır; o kadar aşağı hiç kaydırmayan ziyaretçiler de bu dosyaları asla indirmez.

Görseller ve iframe'ler için tarayıcılar lazy loading'i yerel olarak destekler: bir `<img>` veya `<iframe>` öğesine `loading="lazy"` ekleyin, tarayıcı da görüntü alanına uzaklığına göre ne zaman çekileceğine karar verir. Özel davranışlar için `IntersectionObserver` API'si, bir öğe görüntü alanına girdiğinde ya da yaklaştığında betiğinize haber verir. JavaScript için lazy loading dinamik `import()` kullanır; böylece bir modül yalnızca bir özellik ilk kez kullanıldığında çekilir. Lazy görsellerin `width` ve `height` değerleri ayarlanmalıdır; böylece tarayıcı yer ayırır ve görseller geldiğinde yerleşim zıplamaz.

Lazy loading, siz oturur oturmaz tüm yemeği masaya koymak yerine her yemeği siz hazır olduğunuzda pişiren bir restoran gibidir. Görsel galerileri, uzun akışlar, ürün listeleri, gömülü haritalar ve videolar, yorum bölümleri ile nadiren kullanılan uygulama özellikleri için yaygın olarak kullanılır. Aynı fikir ORM'lerde de görülür; ilişkili veritabanı kayıtlarını kod ilk eriştiğinde yükleyebilirler.

Yaygın bir hata, çoğu zaman Largest Contentful Paint öğesi olan sayfanın en üstündeki ana görseli lazy load etmektir; bu, en önemli içeriği geciktirir, bu yüzden görünür alandaki görseller hemen, bazen `fetchpriority="high"` ile yüklenmelidir. Lazy loading ayrıca code splitting'den farklıdır: code splitting JavaScript'i derleme zamanında ayrı dosyalara böler, lazy loading ise bir dosyanın ne zaman çekileceğine dair çalışma zamanı kararıdır.

## Önemli noktalar

- Lazy loading, bir kaynağın çekilmesini gerekene kadar erteler.
- Görsellerde ve iframe'lerde `loading="lazy"`, yerel tarayıcı lazy loading'ini etkinleştirir.
- `IntersectionObserver` ve dinamik `import()` özel ve JavaScript durumlarını karşılar.
- Ana kahraman (hero) görseli gibi görünür alandaki içeriği asla lazy load etmeyin.
- Lazy görseller göründüğünde yerleşim kaymalarını önlemek için görsel boyutlarını ayarlayın.

## Örnek: Görseller ve iframe'ler için yerel lazy loading

```html
<!-- Main image at the top: load it right away, with high priority -->
<img src="hero.jpg" alt="Product photo" width="1200" height="600" fetchpriority="high">

<!-- Below the fold: fetched only when the user scrolls near them -->
<img src="gallery-1.jpg" alt="Side view" width="600" height="400" loading="lazy">
<img src="gallery-2.jpg" alt="Back view" width="600" height="400" loading="lazy">
<iframe src="https://maps.example.com/embed?place=store" title="Store location map"
        width="600" height="400" loading="lazy"></iframe>
```

## Sık sorulan sorular

**Lazy loading SEO'ya zarar verir mi?**

Doğru yapıldığında vermez. Arama motorları yerel `loading="lazy"` görsellerini iyi işler; sorunlar, içeriğin yalnızca tıklamalardan ya da tarayıcıların gerçekleştirmediği özel kaydırma olaylarından sonra görünmesiyle ortaya çıkar.

**Tüm görselleri lazy load etmeli miyim?**

Hayır. Katın altındaki görselleri lazy load edin ama ilk ekranda görünenleri, özellikle en büyüğünü hemen yükleyin; yoksa sayfa daha yavaş yükleniyormuş gibi görünür.

**Lazy loading ile eager loading arasındaki fark nedir?**

Eager loading bir kaynağı hemen çeker ve tarayıcının varsayılanıdır; lazy loading ise gerekene kadar bekler. ORM'lerde eager loading ilişkili kayıtları önceden çeker; bu da lazy loading'in yol açabileceği N+1 sorgu sorununu önler.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt