Lazy Load (Tembel Yükleme) Nedir?

PDF Olarak İndir

Lazy Load Nedir?

 

Örneğin web sitemizin referanslar kısmında 50 tane görsel olduğunu varsayalım. Bu 50 görsel için optimize işlemlerini yaptınız ve toplam boyutu 5 MB’ta kadar düşürdünüz. Buraya kadar her şey harika.

 

Kullanıcı referanslar sayfanızı açtığı zaman sunucuya giden istek 50 görselin hepsini barındırdığı için 5 Mb’lık verinin tamamı yüklenene kadar sayfanız kullanıcıya gösterilmek üzere tamamen hazır hale gelememiş olacak. Bu gecikme pagespeed skorunuzdaki Hız İndeksi ve Etkileşim Süresi değerlerinizi olumsuz yönde etkileyecektir.

 

Bunu istemeyiz öyle değil mi? İşte tam burada imdadımıza yetişen bir sistem var. Lazy Load!

 

 

Kısaca açıklarsak lazy load; bir nesnenin yüklenme işleminin ihtiyaç duyulan ana kadar ertelenme işlemidir.

 

Örneğimize geri dönecek olursak, referanslar sayfanız ilk kez açıldığında sadece görünebilecek durumda olan görsellerin -diyelim ki 10 adet- yüklenmesini sağlasak ve geriye kalan görseller ise kullanıcı scroll down yaptıkça yükletsek nasıl olurdu?

 

Bu sayede sayfa ilk kez açıldığında sadece 10 görsel için 1 Mb’lik veri yüklemesi yapmış olacağımız için page speed skorumuz da, kullanıcı deneyimimiz de, mobil uyumluluğumuuz da olumlu yönde etkilenecektir.

Lazy Load Nedir – muratyuksektepe.com

 

Lazy Load Nasıl Çalışır?

 

  1. Görseller, videolar, müzikler, yazı tipi dosyaları gibi nispeten daha çok yer kaplayan dosyaları sadece ihtiyacımız olduğu anda yükletebilmek için sayfanın ilk açılışında yüklenmesine engel olmamız gerekir. Bunun için ise örneğin web sitemizde ki bir görselin sayfamız derlendiğinde yüklenmesini istemiyorsak src etiketine dosya yolunu yazmamamız gerekir.

 

<img class="lazy" src="">

 

 

  1. Fakat yüklenmesi gereken görselin yoluna daha sonra ihtiyacımız olacak. Bu yüzden başka bir etiket içerisinde saklamalıyız. Görseller için genelde kullanılan etiket “data-src”.

 

<img class="lazy" src="" data-src="/images/lazy-load-nedir.jpg">

 

 

  1. Bundan sonraki işlem ise görselimizin görüntülenen alana girdiğini tespit etmek ve data-src içerisindeki dosya yolunu alıp src etiketine atamak. Bunun için JavaScript kullanmamız gerekiyor. Google’un kendi web sitesinde ki lazy load kodları şöyle ( https://codepen.io/malchata/pen/YeMyrQ );

 

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

 

 

Tabii ki bu işlemi Jquery kullanarak da yapmak mümkün. Aşağıda lazy load işlemleri için hazırlanmış birkaç kütüphanenin linkini paylaşacağım. Buradaki dokümanları inceleyerek nasıl kullanılacağını öğrenebilirsiniz.

 

https://plugins.jquery.com/lazyload/

https://github.com/verlok/lazyload

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

 

 

Google Chrome için Lazy Load Ayarı

 

Bu kısım kullanıcılar için;

Eğer daha hızlı bir web deneyimi yaşamak istiyorsanız Google Chrome tarayıcınız da 75 versiyonundan sonra gelen bir özellik ile lazy load işlemini aktifleştirebilirsiniz. Bunun için tarayıcınızı açın ve adres çubuğuna şunu yapıştırın ve gerekli ayarları yapın;

chrome://flags/#enable-lazy-image-loading

 

 

 

 

Geliştiriciler için devam edelim;

 

 

Google Chrome’un sağladığı bu lazy load işlemine en acele şekilde web sitelerinizi adapte etmek için şu etiketi kullanmaya başlamalısınız.

loading= "lazy"

 

 

Kaynaklar

https://medium.com/@filipvitas/lazy-load-images-with-zero-javascript-2c5bcb691274

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

Bir cevap yazın