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

Lazy Load

Lazy load, en kolay tanımıyla içerik yüklendikçe resimlerin DOM’a yüklenmesidir. DOM (Document Object Model), tüm web tarayıcılarda HTML kodlarını bir nesneye dönüştüren programlama arayüzüdür. DOM üzerinden HTML, javascript ve css kodlarınıza müdahale edebilirsiniz.

Google, artık kullanıcıyı daha fazla düşünmektedir. Bundan dolayı günümüzde SEO tekniklerinde değişiklikler olmaya başladı. Daha önceki yazılarım da “Google page speed” in ne kadar önemli olduğunu anlatmıştım. Lazy load sayesinde sayfamız yüklendiğinde tüm resimlerin yüklenmesini engellemektedir. Yani şöyle oluyor kullanıcı siteye giriyor, sitedeki tüm resimler DOM’a yükleniyor (Bunun için developer tools’dan network’e tıklayıp inceleyebilirsiniz). Page speed testlerine baktığınızda sayfa yüklenme süresi ve sorgu atılan sayılar fazladır.

Lazy load’ın mantığı şu şekilde ilerlemektedir;

  • İçerik şuan bu section (bölüm) içerisinde mi?
  • Hayır değil, o zaman resimleri yükleme
  • Evet, o zaman oraya ait resimleri yükle

lazy load şema

Lazy Load Nasıl Yapılır?

Lazy load aslında bir metoddur. Manuel olarak javascript ve HTML’ de attribute (nitelik) özelliğini kullanarak yapabiliriz. Adım adım olarak aşağıda maddeleyeceğim daha sonra ise kodlarını paylaşacağım.

  • HTML’de tüm resim olan elementlere (<img src=”” />) ortak bir class (sınıf) veriyoruz.
  • Javascript’te window.scroll fonksiyonunu kullanıyoruz
  • Ortak verdiğimiz class(sınıf) üzerinden each fonksiyonunu çalıştırıyoruz

En önemli kısıma geldik

  • Burada each’deki this i kullanarak offset fonksiyonun top parametresini kullanarak window en üst değerine bakıyoruz.
  • Eğer statement (durum) uygun ise data-src verdiğimiz image (resim) path (dizin yolunu) src özelliğine atıyoruz.

HTML için

< i m g class="lazy" data-src"image path" />

CSS için

.lazy
{
    display:block;
    width:100%;
}
.text-area
{
  margin:30px 0;
}

Javascript için

$(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'));
          }
			});
  })
})

Özet olarak;

Lazy load metodunu kullanarak sayfada scroll yaptıkça resimleri server’dan client’a yüklüyoruz. Bunun en büyük sebebi ise Google artık kullanıcıya yönelik sıralama oluşturuyor. Ziyaretçilerinizi düşünmeniz, UX deneyimini olumlu yönde arttıracaktır. Google’ın bizi sevmesi için tüm sorunlara çözüm üretmek gerekiyor. Lazy load bu çözümlerden sadece bir tanesidir.

Örnek kodlara buradan ulaşabilirsiniz.

Author:
SEO ve Dijital Pazarlama Ajansı
Comments
  • Lazy load eklentisinin kodları fazla değildi. Ancak sizin verdiğiniz kodlarda pek ala iş görüyor. Az kod ile iş yapmak her zaman için iyidir. Teşekkür ederim.

  • Bunu class kullanmadan yapamaz mıyız? Benim sitem blogspot ve tüm sitemdeki resimleri tek tek elle değiştirmem mümkün değil.

Bir cevap yazın

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

Teklif Al

Bize projenizi anlatın. En kısa süre içerisinde tarafınıza dönüş yapacağız.