Lazy Loading Nedir?

Lazy loading, sayfa açılır açılmaz gerekli olmayan içeriklerin daha sonra yüklenmesidir. Genellikle ekranın altında kalan görseller, videolar, harita bileşenleri, yorum alanları veya ağır JavaScript modülleri için kullanılır.

Amaç ilk render sırasında tarayıcının indirmesi gereken dosya sayısını ve boyutunu azaltmaktır. Böylece kullanıcı sayfayı daha hızlı görür, mobil veri tüketimi düşer ve sunucu gereksiz isteklerle daha az meşgul olur.

Nasıl Uygulanır?

Native image lazy loading: Görsellerde loading="lazy" kullanılır.
Intersection Observer: Bir öğe ekrana yaklaşınca JavaScript ile yükleme tetiklenir.
Dynamic import: Ağır bileşenler ihtiyaç anında ayrı paket olarak indirilir.
Route-level code splitting: Uygulamanın yalnızca açılan sayfaya ait kodu yüklenir.

Dikkat Edilecek Noktalar

Lazy loading yanlış uygulanırsa performansı iyileştirmek yerine bozabilir. Sayfanın ilk görünümündeki hero görseli veya ana başlık için lazy loading kullanmak LCP değerini kötüleştirebilir. Görseller için genişlik/yükseklik alanı ayrılmazsa içerik kayması oluşur ve Core Web Vitals içinde CLS etkilenir.

SEO açısından kritik metin içeriği yalnızca geç çalışan JavaScript’e bırakılmamalıdır. Görsellerde alternatif metin, doğru boyutlandırma ve modern formatlar görsel optimizasyonu ile birlikte ele alınmalıdır. Etkiyi ölçmek için Core Web Vitals metrikleri izlenir.

Barlas Dijital’de lazy loading kararları genellikle site hız optimizasyonu çalışmasının parçası olarak, gerçek kullanıcı verileriyle doğrulanır.