Lazy Load Nedir? Nasıl Kullanılır?

Lazy Load Nedir? Nasıl Kullanılır?

Görseller, içeriği daha ilgi çekici hale getirmek ve konuyu daha iyi sunmak için her web sitesinde oldukça kritik öneme sahiptir. Bir web sitesini, logo, ürün fotoğrafları, kampanyalar gibi görseller olmadan hayal etmek imkansızdır. Ancak görsellerin boyutları çok büyük ve yüksek çözünürlükte olduğunda web site hızınızı yavaşlatabilirler. Bu durumda görsellerden kurtulmak yerine, lazy load ile web sayfalarınızın onlarla birlikte hızlı yüklenmesini sağlayabilirsiniz.

Lazy Load Nedir?

Lazy load; görüntülerin web sitelerinde eş zamansız olarak yüklenmesidir. Yani ekranın üst kısmındaki içerik tamamen yüklendikten sonra veya ilgili görseli tarayıcı da gördükleri zaman yüklenmesi anlamına gelir.

Lazy load kullanarak ekranda olmayan görsellerin yüklenmesini erteleyip, sitenin daha hızlı açılmasını sağlayabilir, siteye gereksiz yük oluşturmasını engelleyebilirsiniz. Böylece görünüm alanında olmayan görseller ilk sayfa yükleme performansını geliştirir.

Lazy Load Hangi Görsellerde Kullanılmalıdır?

Lazy Load Kullanımı

Lazy load kullanımı ile ilgili temel konu, görselin şu anda yüklenmesinin gerekli olup olmadığıyla ilgilidir. Eğer bir görsel tarayıcı ekranında kullanıcılar tarafından görünmüyorsa o görseli erteleyin. Örnek olarak aşağıdaki türleri ertelemeyi düşünebilirsiniz.

  • İçerik alanındaki görseller,
  • Footer alanındaki logo,
  • Alt bölümde kullanılan sosyal ikonlar,
  • Sidebar görselleri.

Lazy load kullanımı sadece performans için değil, aynı zamanda iyi bir kullanıcı deneyimi sağlamak için de önemlidir. İyi bir kullanıcı deneyimi sunmak site içi SEO‘ya da katkı sağlar. Bu sebeple web sitelerinizde lazy load özelliğini kesinlikle kulanmalısınız.

Lazy Load Nasıl Kullanılır?

Bir web sitesindeki görseller ihtiyaca göre iki şekilde ertelenebilir. Birincisi HTML’e doğrudan <img> etiketi ile eklenen görseller, diğeri de background-image ile eklenen görseller için tercih edilebilir. Şimdi en yaygın olan <img> etiketi ile eklenen görsel kullanımını inceleyim.

<Img> Etiketi ile Lazy Load Yöntemi

Görsellerinizi <img> etiketi kullanarak ekliyorsanız aşağıdaki ilgili kodları kullanmalısınız.

HTML: Class etiketine “lazy” ekleyin ve görsellerinizi “data-src” yolu ile çağırın.

<img class="lazy" data-src="images/gorsel.jpg" width="300" height="50" alt="Kukumav.Net">

CSS: Lazy classı için aşağıdaki css kodunu oluşturun.

.lazy {
    display: block;
    width: 100%;
}

Java Script: Aşağıdaki kodu js kaynağına ekleyin.

$(document).ready(function () {
    $(window).scroll(function () {
        $(".lazy").each(function () {
            if ($(this).offset().top < $(window).scrollTop() + $(window).height() + 100) {
                $(this).attr("src", $(this).attr("data-src"));
            }
        });
    });
});

Background-Image CSS ile Lazy Load Yöntemi

HTML’de <img> etiketi kullanmanın dışında CSS ile “background-image” ile görsel eklemek te oldukça popüler bir yöntemdir. CSS kullanılarak çağırılan görselleri lazy load ile ertelemek için aşağıdaki kodları kullanın.

HTML: Örnek HTML için aşağıdaki kodu inceleyin. Görsel içeren id=”kukumavnet-bg” ve engellemeyi sağlayan class=”lazy” bölümlerini kullanın.

<h2>Örnek Background-image Kullanımı</h2>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

<div id="kukumavnet-bg" class="lazy"></div>

<p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamıştır.</p>

CSS: İlgili id ve classlara CSS’de aşağıdaki kodları ekleyin. Image kodundaki width ve height değerlerini, görsel boyutlarınıza göre güncelleyin.

#kukumavnet-bg.lazy {
   background-image: none;
   background-color: #ebebeb;
}
#kukumavnet-bg {
  background-image: url("https://www.kukumav.net/images/logo.png?tr=w-255,h-48");
  max-width: 255x;
  height: 48px;
  background-repeat: no-repeat 
}

Java Script: Aşağıdaki JS kodunu javascript kaynağınıza ekleyin.

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }
    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

Not: Background-image kimliğine sahip bir bölümde class=”lazy” etiketi eklendiğinde görseli “display:none” olarak ayarlayacaktır. Kullanıcı tarayıcının üst bölümündeyken görsel yüklenmeyecek ancak aşağı kaydırıp görsele geldiğinde “lazy” classını kaldıracak ve görsel görünür olacak.

Eğer WordPress kullanıyorsanız tüm bunlarla uğraşmak zorunda değilsiniz. Hali hazırda Litespeed gibi bir cache eklentisi kullanıyorsanız, eklenti özelliklerinden lazy loading özelliğini etkinleştirerek ekstra kod eklemeden kolayca kullanabilirsiniz.

Lazy Load Kullanmanın Faydaları Nelerdir?

  1. Büyük bir performans avantajı sağlar.
  2. Binlerce ürünü bulunan e-ticaret siteleri için bant genişliği tüketimini azaltır.
  3. Kullanıcı deneyimine olumlu katkı sağlar.
  4. PageSpeed testindeki ilgili uyarılardan kurtarır.

Lazy load özelliğini etkinleştirerek site hızınızı artırdıktan sonra tarayıcı önbellekleme özelliğini de kullanmayı tercih edebilirsiniz. Konuyla ilgili aşağıdaki makaleyi inceleyin.

.Htaccess ile Tarayıcı Önbellekleme

Makalemizin sonuna geldik, umarız bu rehber sizin için yararlı olmuştur. Görselleri erteleme ile ilgili yaşadığınız bir sorun olursa lütfen yorum yapmaktan çekinmeyin.

İlgili Konular

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir