LazyLoad Nedir? Nasıl Yapılır?

LazyLoad Nedir? Nasıl Yapılır?
REKLAM ALANI
07.06.2020
97
A+
A-

Lazyload, ek bir JavaScript dosyasının kullanımıdır. Görsel yoğunluğun ve sayfa uzunluğunun fazla olduğu sitelerde sayfaların daha hızlı açılabilmesi için kullanılır. Lazyload ile bant genişliği tasarrufu yöntemiyle sitenizin hızını arttırabilirsiniz. En geniş anlamıyla ise ihtiyaç duyulmayan bir nesnenin çağrılmaması durumu olarak ifade etmek mümkündür. Bundan dolayı kullanıcılar bir sayfayı açtıklarında bütün resimlerin yüklenmesinin önüne geçilmiş olur. Bu da daha hızlı açılan sayfalara sahip bir web sitesi ortaya çıkarır.

Google, gün geçtikçe kullanıcılar için daha fazla adım atıyor ve onları daha fazla önemsiyor. Kullanıcı deneyimlerini iyileştirmek için yenilikler geliştiriyor. Web sitelerinin de kullanıcılara en iyi hizmeti vermesini istiyor. Bunun için sadece Google algoritmalarını geliştirmekle meşgul özel bir ekip bulunuyor.

ARA REKLAM ALANI

Aslında Google’ın yaptığı bu çalışmalar, interneti bir bilgi ve veri çöplüğü olmaktan da kurtarıyor. İnternete belli bir standart kazandırmış oluyor. Bu yüzden eğer Google arama sonuçlarında çok iyi sıralar elde etmek istiyorsanız kullanıcı merkezli hareket etmek, kullanıcılarınıza en iyi deneyimi sunmanız gerekiyor. Bunun için sahip olmanız gerekenlerden birisi de hızlı bir sitedir.

Site hızının ne kadar öneli olduğuna dair çok sayıda istatistiki veri bulabilirsiniz. İstatistikler, Google kullanıcılarının bir web sitesini ziyaret ettiğinde bekleme süresinin 3 saniye olduğunu gösteriyor. Bir kullanıcı, bir siteye tıkladığında 3 saniye içinde açılmıyorsa o siteyi terk ediyor. Bu da arama sonucunda ilk sıralarda çıkmanızın avantajını kaybettiriyor. İşte Lazyload bu noktada daha hızlı sayfalara sahip olmanıza imkân tanıyor.

LazyLoad Nedir?

Lazyload hakkında sayfa uzunluğunun ve görsel yoğunluğunun fazla olduğu sitelerde sayfaların daha hızlı açılmasını sağlayacak olan ek bir JavaScript dosyasının kullanımı tanımını yapabiliriz. Lazyload uygulanan sayfalarda, sayfa açıldığında ekranda henüz yer almayan görsellere yer verilmez. Bunların yüklenmesi beklenmez.

Bir internet sayfası açıldığında açılış hızını etkileyen en teme unsurlardan birsi sayfadaki görsellerdir. Çoğu zaman görsellerin çözünürlüğü yüksek ya da sayısı fazla ise sayfalar geç açılır. Bu da bütün bir sayfanın açılış hızının yavaşlamasına neden olur.

Lazyload özellikle e-ticaret siteleri gibi görsel listelemelerin yoğun olduğu sitelerde uygulanır. Yine çok sayıda görselin bulunduğu galeri ve slider yer alan sayfalarda da tercih edilir. Uygulama sayesinde görsellerin fazlalığından kaynaklı sayfa yavaşlığının önüne geçilmiş olur.

Lazyload kullanılmadığı zaman sayfalardaki görsellerin hepsi aynı anda yüklenecek ve bu durumda sayfa hızı yavaşlayacaktır. Lazyload kullanıldığı zaman ise görseller, sayfada aşağı doğru inildikçe yüklenecek, görsellere gerek duyulmadığı taktirde görseller yüklenmeyecektir. Görsellerin yüklenmesi beklenmeyeceği için kullanıcı, sayfa linkinizi tıkladığında sayfanız kısa sürede açılacak, kullanıcı aradığına en hızlı şekilde ulaşma fırsatı bulacaktır. Bu sayede de web sitesinin hızı yükselecek, rakiplerinize göre avantaj sağlamanız mümkün olacaktır.

Malum ki e-ticaret sitelerinde binlerce ürün yer alıyor ve bunlara ait milyonlarca görsel yer alıyor. Bütün bu görsellerin sayfa açıldığında aynı anda yüklenmesi, web sitesinin hızını olumsuz etkileyecektir. Buna bağlı olarak da kullanıcılar, siteyi tıkladıklarında kısa süre bekleyip ayrılacaklar, bir süre sonra ziyareti tamamen keserek rakip sitelere gideceklerdir. Lazyload ile bunun önüne geçilmeye çalışılır.

LazyLoad Faydaları Nelerdir?

Lazyloadkullanmanın siteler için tek avantajı, siteleri hızlandırmak değildir. Bunun dışında pek çok faydası bulunuyor:

  • Site hızının artmasıyla birlikte site performansında da artış olur.
  • Sayfalarınız hızlı açıldığı için kullanıcıların memnuniyeti artar. Bu da sitenizde daha fazla vakit geçirmelerini sağlar. Sitenizden hemen çıkmayan ziyaretçilerin müşteri olma potansiyelleri arttığı gibi sitenizin arama motorları tarafından güvenli site olarak algılanması da artar.
  • Aşırı kaynak kullanımının önüne geçilmiş olur. Sadece kullanıcıların görüntülediği alanlar sunucudan tüketileceği için sunucu verileri verimli kullanılmış olur.
  • Hızlı açılan siteler, kullanıcılara daha iyi deneyim sunar. Kullanıcı deneyimlerinin artması, arama motorlarında sıralamanızın daha iyi noktalara taşınmasına yardımcı olur. Bu sayede hem arama motoru dostu bir web sitesi hem de kullanıcı dostu bir web sitesi haline gelmiş olursunuz.

Lazyload metodu, her sitede kullanılabilir. Fakat görsel yoğunluğun fazla olduğu sitelerde yararları çok daha bariz belli olur. Hatta web siteniz yazılı metinlerin yoğun olduğu bir site ise Lazyload yönteminin kullanılmasını önermiyoruz. Zaten uygulanan metot, dahili bir tarayıcı özelliği değildir. JavaScript dosyasının kullanılmasını gerektiren bir durumla alakalıdır. Bu yüzden de test açısından zorlu bir süreç olduğunu unutmamak gerekir.

Lazyload metodu uygulanırken dikkatli olmakta fayda var. Eğer herhangi bir hata yaparsanız sayfanızı ziyaret eden kullanıcıların hiçbir görseli görüntüleyememesine dahi sebep olabilirsiniz. Yine sayfayı ziyaret eden kullanıcının ekranında görseller en hızlı biçimde yüklenmelidir. Görseller 3 saniyeden daha fazla sürede yükleniyorsa bu, kullanıcı deneyimi açısından olumsuzluktur. Bu da sitenizi ziyaret edenlerin hemen geri çıkma oranlarının hızla artmasına, sitenizin arama motorlarınca itibarının zarar görmesine neden olur.

LazyLoad Nasıl Yapılır?

Başta da belirttiğimiz gibi Lazyload, bir tür metot, bir tür yöntemdir. HTML ve JavaScript’te manuel olarak attribute özelliğini kullanmak kaydıyla gerçekleştirebilirsiniz. Uygulama aşamasında şunları yapmanız gerekmektedir:

  1. HTML ortamında yer alan bütün görsellerde (<imgsrc=”” />) şeklinde ortak class kullanın.
  2. JavaScript’teWindows.scroll fonksiyonu ile işlemi sürdürün.
  3. Ortak class ile each fonksiyonunu çalıştırın.
  4. Each’tethis kısmı bulunuyor. Bunu kullanarak offset fonksiyonunun top parametresini uygulayın. Bu sayede Windows en yükse değieri öğrenirsiniz.
  5. Eğer karşınıza çıkan durum uygun ise data-src verdiğiniz imagepath (dizin yolu)’i src özelliğine aktarın.

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

REKLAM ALANI
YORUMLAR

Henüz yorum yapılmamış. İlk yorumu yukarıdaki form aracılığıyla siz yapabilirsiniz.