Lazy Loading Nedir? Performans İçin Tembel Yükleme

Bir web sayfası yüklendiğinde, tarayıcı varsayılan olarak sayfadaki tüm görselleri, iframe'leri ve kaynakları hemen indirmeye başlar — kullanıcı onları görecek olsun veya olmasın. Bu durum özellikle uzun sayfalarda gereksiz bant genişliği tüketimine, yavaş ilk yükleme süresine ve kötü kullanıcı deneyimine yol açar. Lazy loading (tembel yükleme), kaynakların yalnızca ihtiyaç duyulduğunda — yani kullanıcının görüntü alanına yaklaştığında — yüklenmesini sağlayan bir optimizasyon tekniğidir.

Native Lazy Loading: loading="lazy"

Modern tarayıcılar, görseller ve iframe'ler için yerleşik lazy loading desteği sunar. Tek bir HTML özniteliği eklemek yeterlidir:

<!-- Görseller için -->
<img src="foto.jpg" alt="Açıklama" loading="lazy" width="800" height="600" />

<!-- iframe için -->
<iframe src="https://youtube.com/embed/xxx" loading="lazy"></iframe>

loading özniteliğinin değerleri:

• lazy — Görüntü alanına yaklaştığında yükle
• eager — Hemen yükle (varsayılan davranış)

Önemli: Sayfanın ilk ekranında (above the fold) görünen görsellere loading="lazy" eklemeyin. Bu görsellerin hemen yüklenmesi gerekir; tembel yükleme uygulamak LCP (Largest Contentful Paint) metriğini olumsuz etkiler.

width ve height Belirtmenin Önemi

Lazy loading kullanırken görsellere mutlaka width ve height veya CSS aspect-ratio tanımlayın. Aksi halde tarayıcı görselin boyutunu bilemez ve sayfa düzeni kayması (Cumulative Layout Shift — CLS) oluşur.

<img
  src="foto.jpg"
  alt="Açıklama"
  loading="lazy"
  width="800"
  height="600"
  style="max-width: 100%; height: auto;"
/>

Intersection Observer API

Daha fazla kontrol istiyorsanız veya görsel dışı elemanları tembel yüklemek istiyorsanız, Intersection Observer API kullanabilirsiniz:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '200px 0px', // 200px erken tetikleme
  threshold: 0.01
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

rootMargin değeri, elemanın görüntü alanına girmeden ne kadar önce yükleme başlayacağını belirler. 200px gibi bir değer, kullanıcı kaydırdığında görselin hazır olmasını sağlar.

Bileşen ve Rota Bazlı Lazy Loading

Modern JavaScript framework'leri, bileşen ve rota bazında kod bölme (code splitting) ile tembel yükleme sunar:

React

import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<Skeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

Next.js

import dynamic from 'next/dynamic';

const DynamicMap = dynamic(() => import('./Map'), {
  loading: () => <p>Harita yükleniyor...</p>,
  ssr: false, // Yalnızca istemci tarafında yükle
});

Vue

const HeavyComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: SkeletonLoader,
  delay: 200,
});

Skeleton Ekranlar

Lazy loading sırasında boş bir alan göstermek yerine, içeriğin yapısını taklit eden iskelet (skeleton) ekranlar kullanın. Bu yaklaşım, kullanıcıya içeriğin yüklendiğini görsel olarak iletir ve algılanan bekleme süresini azaltır.

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Ne Zaman Lazy Loading Kullanmamalısınız?

• Above the fold görseller: Sayfanın ilk ekranında görünen ana görsel ve hero bölümü hemen yüklenmeli
• Çok küçük görseller: Birkaç KB'lık ikonlar için lazy loading overhead yaratır
• Kritik CSS ve JavaScript: Sayfa çalışması için gerekli kaynaklar ertelenmemeli
• SEO açısından önemli içerik: Arama motoru botları JavaScript'i her zaman çalıştırmayabilir; kritik metin içeriğini lazy loading ile gizlemeyin
• Print (yazdırma) senaryoları: Kullanıcı sayfayı yazdırmak isteyebilir; yazdırma stillerinde tüm görsellerin yüklendiğinden emin olun