Lazy Load nasıl uygulanır?

Lazy Load (Tembel Yükleme) nedir ve nasıl uygulanır?

Lazy Load, özellikle web sayfalarında performansı artırmak ve kullanıcı deneyimini iyileştirmek amacıyla kullanılan bir tekniktir. Temel prensibi, sayfa ilk yüklendiğinde tüm içerik yerine yalnızca görünür alandaki (viewport) öğeleri yüklemek, diğerlerini ise kullanıcının sayfayı aşağı kaydırmasıyla birlikte yüklemektir. Bu yaklaşım, sayfa yüklenme süresini kısaltır ve bant genişliği kullanımını optimize eder.

İlk olarak, görsel ve diğer medya öğeleri için lazy load uygulaması oldukça yaygındır. HTML5 ile birlikte gelen loading="lazy" özelliği, görsellerde ve iframe’lerde kolayca kullanılabilir. Örneğin:

CODE Copy

12
<img src="resim.jpg" loading="lazy" alt="Açıklama">

Bu, tarayıcının desteklediği durumlarda, görseli sayfa ilk yüklendiğinde yüklemeden, yalnızca görünür alana yaklaştığında yüklemesini sağlar. Ancak, eski tarayıcılar veya daha kontrollü ihtiyaçlar için JavaScript tabanlı çözümler de tercih edilir.

Bir diğer yöntem ise Intersection Observer API kullanmaktır. Bu API, öğelerin viewport içine giriş çıkışını izlemek ve buna göre yüklemeyi tetiklemek için oldukça etkilidir. Örneğin:

CODE Copy

12345678910111213
var observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            var img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
}, { rootMargin: "0px 0px 200px 0px" });
document.querySelectorAll('img[data-src]').forEach(function(img) {
    observer.observe(img);
});

Burada, görsellerin gerçek kaynak adresleri data-src attribute'unda saklanır ve görünür hale geldiğinde yüklenir.

Lazy load uygularken dikkat edilmesi gereken noktalar ise şunlardır:

• Tarayıcı uyumluluğu ve fallback planları
• SEO açısından, içeriğin erişilebilirliğini engellememe
• Kullanıcı deneyimi ve yükleme akışını optimize etme

Sonuç olarak, lazy load, modern web geliştirmede büyük bir performans artışı sağlar ve kullanıcıların sayfa ile etkileşimini hızlandırır. Bu teknik, özellikle görsel ağırlıklı sitelerde ve mobil kullanıcılar için kritik öneme sahiptir.