Lazy Loading Nedir?

Lazy Loading, sayfada yer alan bir ögenin ihtiyaç duyulmadığı takdirde çağrılmaması prensibi ile çalışan bir JavaScript + CSS ve HTML kod kombinasyonudur. Paketleri farklı modüllere ayırarak uygulamamızın açılış süresini hızlandırır ve kaynak tüketimini azaltır.

Lazy loading Avantajları

· Başlangıç ​​yükleme süresini azaltır Bir web sayfasının lazy loading olarak yüklenmesi sayfa ağırlığını azaltır ve daha hızlı . Sayfa yükleme süresini sağlar

• Bant genişliğinin korunması Lazy loading yükleme, yalnızca istendiğinde kullanıcılara içerik sağlayarak bant genişliğini korur.
• Sistem kaynağının korunması Lazy loading yükleme hem sunucu hem de istemci kaynaklarını korur, çünkü yalnızca bazı resimlerin, JavaScript ve diğer kodların oluşturulması veya yürütülmesi gerekir.
  SQL sorgularının gereksiz şekilde çalıştırılması engellenir.

Lazy Loading Dezavantajları

· İlk olarak Lazy loading uygulamak için mevcut kodlara eklenecek ekstra kod satırları, kodu biraz karmaşık hale getirir.

· İkincisi Lazy loading, yüklenen içeriğin yanlış endekslenmesi nedeniyle bazen web sitesinin arama motorlarındaki sıralamasını etkileyebilir.

· Lazy Loading, görsel yoğunluğu fazla olan sayfalarda kullanılmalıdır. Aksi takdirde bir işe yaramaz.

· Yanlış bir kurgu yapmamak gerekmektedir. Yoksa kullanıcılar hiçbir fotoğrafa ulaşamaz.

Lazy Loading Hangi Siteler Kullanmalıdır?

Görsel açıdan zengin olan e-ticaret siteleri ile haber siteleri Lazy Loading yöntemini kullanılması tavsiye edilmektedir.

Lazy Loading Nasıl Kullanılır?

HTML’de Kullanılacak Kod

<img class="lazy" data-src="path/to/image.jpg"/>

CSS’de Kullanılacak Kod

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

JavaScript’te Kullanılacak Kod

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

WordPress Lazy Loading Kullanımı

WordPress Lazy Loading kullanımı için yukarıdaki kodları tema kaynak kodları içerisine ekleyebilir yada daha kolay yol olan Lazy Loading WordPress eklentileri sayesinde kolayca Lazy Load’ı kullanabilirsiniz