Lazy Load Nedir ve Ne işe yarar ?

Lazy Load, görsel yoğunluğu ve sayfa uzunluğunun fazla olduğu sitelerde, sayfaların daha hızlı açılmasını sağlayacak ek bir JavaScript dosyasının kullanımıdır. Lazy Load, bant genişliği tasarrufu ile sitenizin hızını artırmaya yarayan bir metottur. En geniş anlamıyla ihtiyaç duyulmayan bir nesnenin çağrılmaması durumudur. Bu özellik sayesinde kullanıcı bir sayfayı açtığında tüm resimlerin yüklenmesinin önüne geçilir. Bu sayede de daha hızlı açılan sayfalara sahip olursunuz.

Birçok yazımızda değindiğimiz gibi Google artık kullanıcıları daha fazla önemsiyor. Bu yüzden de kullanıcı deneyimini iyileştirmek yönünde adımlar atıyor. Web sitelerinden de kullanıcı deneyimini en iyi şekilde sunmasını istiyor. Eğer Google’da çok iyi sıralamalar elde etmek istiyorsanız yapmanız gereken en önemli şey kullanıcılara iyi bir deneyim sunmaktır. Bunun için de hızlı bir siteye sahip olmanız gerekir. Site hızının neden önemli olduğunu açık bir şekilde belirtecek bir istatistiği de sizlerle paylaşmak istiyoruz. Google’da arama yapan bir kullanıcı, bir web sitesini ziyaret ettiğinde eğer o web sitesi 3 saniyeden daha fazla sürede açılıyorsa siteyi terk ediyor. İşte bu noktada Lazy Load daha hızlı sayfalara sahip olmanızı sağlıyor.

Lazy Load Nedir?

Lazy Load, görsel yoğunluğu ve sayfa uzunluğunun fazla olduğu sitelerde, sayfaların daha hızlı açılmasını sağlayacak ek bir JavaScript dosyasının kullanılmasıdır. Lazy Load metodunun uygulandığı sayfalarda, sayfa açıldığında ekranda henüz yer almayan görseller yüklenmeyecektir. Kısacası bir sayfayı açtığınızda tüm görsellerin yüklenmesi ve sayfa hızının yavaşlaması engellenir.

Lazy Load, genellikle e-ticaret sitesi gibi görsel listelemenin yoğun ve önemli olduğu sitelerde kullanılır. Ayrıca çok sayıda görselin kullanıldığı slider ve galeri yer alan sayfalarda da kullanılmalıdır. Bu sayede görsellerin fazlalığının neden olduğu sayfa yavaşlığının önüne geçilir. Lazy Load kullanılmadığı zaman sayfada yer alan görsellerin tüm aynı anda yüklenecek ve bu nedenle sayfa yavaşlayacaktır. Lazy Load kullanıldığı zaman ise görseller, sayfada aşağı doğru inildikçe yüklenecektir. Görsellerin gerek duyuldukça yüklenmesi sitenin hızını da artıracaktır. Binlerce ürünün yer aldığı e-ticaret sitelerinde sayfa açıldığında tüm görsellerin aynı anda yüklenmesi diğer web sitelerinin hızındaki olumsuz etkiden daha fazla olacaktır. Buna bağlı olarak da kullanıcılar web sitesini terk ederek arama sonuçlarında çıkan rakip siteleri ziyaret edecektir.

Lazy Load Faydaları Nelerdir?

Lazy Load’un tek faydası elbetteki site hızını artırması değildir. Lazy Load’un diğer faydaları;

1. Site hızına bağlı olarak sitenizin performansını artırır.
2. Hızlı açılan sayfalar kullanıcıların sitenizde daha fazla vakit harcamasını sağlar. Böylelikle sitenizin hemen çıkma oranı düşer.
3. Aşırı kaynak kullanımının önüne geçilir. Yalnızca kullanıcının görüntülediği alanlar sunucu kaynağından tüketilir.
4. Hızlı açılan sayfalar kullanıcılara daha iyi bir deneyim sunar. Sitenizin sunduğu kullanıcı deneyiminin iyileşmesi de sıralamalarınızı etkiler. Böylelikle hem kullanıcı dostu hem de arama motoru dostu bir web sitesi inşa etmeniz kolaylaşır.

Bu metot, görsel içeriğin yoğun olduğu siteler için yararlıdır. Eğer web siteniz yazılı içerik bakımından yoğun sayfalara sahipse bu yöntemin kullanılmasını tavsiye etmeyiz. Ayrıca dahili bir tarayıcı özelliği değil, JavaScript dosyasının kullanılmasını gerektiren bir metottur. Bundan dolayı test açısından zorlu bir süreçtir. Herhangi bir hatada sayfanızı ziyaret eden kullanıcıların görselleri hiç görüntüleyememesine neden olabilirsiniz. Ayrıca sayfayı ziyaret eden kullanıcıların ekranında görseller, olabildiğince hızlı yüklenmelidir. Eğer görseller 3 saniyeden daha fazla sürede yüklenirse kullanıcı deneyimi olumsuz etkilenir. Bu da hemen çıkma oranını yükseltir.

Lazy Load Nasıl Yapılır?

Yukarıda da belirttiğimiz gibi Lazy Load bir metottur. JavaScript ve HTML’de manuel bir şekilde nitelik (attribute) özelliğini kullanarak yapabilirsiniz. Uygulama aşamasında öncelikle:

• HTML ortamında olan görsel ögelerin hepsine (<img src=”” />) şeklinde ortak class (sınıf) verin.
• JavaScript’te window.scroll fonksiyonu ile devam edin.
• Ortak class ile each fonksiyonu çalıştırın.
• Each’de yer alan this kısmını kullanarak offset fonksiyonun top parametresini kullanın. Böylelikle window en üst değeri öğrenebilirsiniz.
• Karşınıza çıkan durum uygunsa data-src verdiğiniz image path’i (dizin yolunu) src özelliğine atın.

En önemli kısmı yaptıktan sonra şimdi sıra ikinci kısımda:

HTML İçin;

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

CSS İçin;

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

JavaScript İç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'));
          }
			});
  })
})