+90 216 599 0495
+90 216 599 0495

Lazy Loading Nedir?

Lazy Loading Nedir? Web sitelerinde bulunan görsellerin yoğunluğunun ve sayfaların uzunluğunun çok fazla olduğu web sitelerinde web sayfalarının daha hızlı açılabilmesi için kullanılan bir JavaScript dosya kullanımıdır. Lazy loading, bant genişliğinde tasarrufa gidilerek sitelerin daha hızlı açılmasını sağlamaktadır. Daha geniş bir şekilde açıklamak gerekirse lazy loading web sitelerinde ihtiyaç duyulmayan nesnelerin çağırılmamasını sağlayarak hızdan tasarruf elde etmektedir. Bu sayede web sitelerini ziyaret eden kullanıcıların sayfaya tıkladıklarında tüm fotoğraflar anında yüklenerek önüne gelir ve çok daha hızlı bir şekilde açılan bir web sitesi elde edilmiş olur. Ayrıca lazy loading web sitelerinden erken çıkma oranını da düşürmektir. Peki, lazy loadingin web siteler için önemi nedir?

Lazy Loading Önemi

Lazy loading genellikle e-ticaret sitelerinde yoğunlukla kullanılmaktadır. Bunun dışında çok sayıda görsel yüklenen slider ya da galeri bölümü bulunan web siteleri de lazy loading uygulamasını kullanmalıdır. Çünkü web sitesinde çok fazla fotoğraf olması sitenin yavaş açılmasına neden ve dolayısıyla sitede bekleme oranını yükseltir. İnternet kullanıcıları ise ziyaret ettikleri web sitelerinin geç yüklenmesinden pek hoşlanmazlar. Bu durum ziyaretçilerin siteden çıkmasına neden olmaktadır. Lazy loadingin diğer faydalarını aşağıdaki gibi sıralamak mümkündür.

  • Lazy loading, web sitelerinin performansını da arttırmaktadır.
  • Lazy loading, kullanıcıların web sitenizde çok daha fazla vakit geçirmesini sağlar. Bu sayede web sitenizin hemen çıkma oranı düşer.
  • Lazy loading sayfaların hızlı açılmasını sağladığı için kullanıcılara eşsiz bir deneyim imkanı sunar.

Peki, lazy loading nasıl yapılır?

Lazy Loading Yapılışı

Yukarıda da bahsedildiği gibi lazy loading bir metottur. JavaScript ve HTML’de manuel olarak lazy loading özelliğini kullanabilmeniz mümkündür. Uygulamayı kullanırken aşağıdaki aşamaları izleyebilirsiniz.

  • HTML ortamında var olan görsel ögelerin hepsine ortak bir sınıf verin.
  • JavaScript’te bulunan Windows.scroll kısmına tıklayarak aşamaları izlemeye devam edin.
  • Ortak sınıf ile each fonksiyonunu çalıştırın.
  • Each kısmında bulunan this butonunu kullanıp ofset fonksiyonunun top parametresini kullanmalısınız. Bu sayede Windowsun en üst değerini öğrenebilmeniz mümkündür.
  • Bu adımları izledikten sonra karşınıza uygun bir durum çıkıyorsa dara-src verdiğiniz image path’i src özelliğine atayabilirsiniz.

Yükselmeye hazır mısınız?