Daha Önce Ads Reklam Vermeyenler İçin Google' dan 16.500 TL' ye Kadar Reklam Fırsatı Daha fazla bilgi al

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

Lazy Load, sözcük anlamı itibariyle “tembel yükleme – işten kaçınma” demektir. Daha çok e – ticaret sitelerinde kullanım alanı bulan lazy load, web site performansını artırmak ve sistem kaynaklarını kurtarmak amacıyla nesnelerin yüklenmesini geciktirmek işlemi için başvurulan uygulamadır. Bu uygulama, bir web sitenin tüm içerikleriyle birlikte görüntülenmesinin zaman alıcı olması ve dolayısıyla can sıkıcı bir durum olmasına karşın pratik bir çözüm olarak karşımıza çıkar.

İçerik Tablosu

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

Web sitenin tam anlamıyla yüklenmesi için geçen süre, genellikle görsellerin yüklenmesi için kullanılır. Web sitede bulunan yüzlerce görsel, e – ticaret sitesi gibi hacimli sitelerde binlerce görsel içerik yüklenirken hayli gecikme yaşanır. Bu durum, kullanıcıların web site deneyimini önemli ölçüde düşürür. Hiçbir web site sahibi veya yöneticisi, yavaş yüklenen ve kullanıcı deneyimi açısından son derece başarısız bir web siteye sahip olmak istemez.

Web sitelerin yavaş yüklenmesinin önüne geçmek, tüm içeriklerin yüklenmesi için gereken süreyi kısaltmak için web sitede yer alan görsel içeriklerin sayısını azaltmak kalıcı bir çözüm olmadığı gibi başarılı sonuçlar da vermeyecektir. İşte bu noktada lazy load işlemine başvurulur. Bu çalışma sayesinde, çalışmaya konu web sitesinin yüklenme süresinde önemli ölçüde iyileştirmeler sağlanırken ziyaretçilerin edindiği deneyimde de ivmeli bir artış sağlanır.

Lazy Load Ne Demek, Ne İşe Yarar?

Bazı web siteleri görsel içerik açısından yoğun ve uzun sayfa yapısına sahiptir. Özellikle e – ticaret siteleri, bu tür sitelere örnek olarak verilebilir. Söz konusu siteler, yapısı nedeniyle daha geç yükleneceği için kullanıcı deneyimini önemli ölçüde düşürür ki bu durum, hiçbir web site sahibi veya yöneticisi tarafından istenmez. Bu noktada, sayfaların daha hızlı açılmasını sağlamak, bu sayede kullanıcı deneyimini artırmak amacıyla ek bir JavaScript dosyasına başvurulur.

Lazy load işlemi, site yüklenme hızını artıran ve bunun için bant genişliği tasarrufunda bulunan pratik bir uygulamadır. Lazy load’a ilişkin yalın bir tanımlama yapmak gerekirse; gereksinim duyulmayan bir nesnenin çağrılmaması olarak ifade edilebilir. Lazy load işlemi sayesinde, kullanıcı tarafından açılan bir web sayfasında tüm görsel içeriklerin yüklenmesinin önüne geçilerek ilgili sayfanın daha hızlı açılması ve bu sayede kullanıcının gereksiz vakit kaybı yaşamasına engel olunur.

Google, kullanıcılarına önem veren, kullanıcıların deneyimlerini önemseyen ve arama sonuç sayfalarında sıralama yaparken kullanıcı deneyimi yüksek web sitelerini daha üst sıralarda konumlandıran popüler arama motorudur. Web sitesinin daha başarılı bir sıralamaya sahip olmasını isteyen site yöneticileri, web sitelerini ziyaret eden Google kullanıcılarının nasıl bir deneyim edindiğini önemsemeli ve bu deneyimi artırmak adına web site hızında iyileştirmeler yapmalıdır.

Lazy Load Kullanmanın Faydaları Nelerdir?

Lazy load kullanımı, ilgili web sayfasında bulunan görsel içeriklerin tamamının aynı anda yüklenmesine engel olur ve bu nedenle sayfanın yüklenme süresini önemli ölçüde düşürür. Bu da kullanıcı deneyiminde ciddi bir artış sağlar. Lazy load uygulaması sayesinde, web sayfasında bulunan görseller bir anda ve tamamen değil, kullanıcı aşağı indikçe yüklenir. Başta web site hızını ve kullanıcı deneyimini artıran lazy load uygulamasının diğer faydaları şu şekilde sıralanabilir:

  • Site hızı ve performansına bağlı olarak sitenin genel sağlığını iyileştirir.
  • Kullanıcılarca açılan ve çok kısa bir sürede görüntülenen sayfalar, geç açılan ve bu nedenle kullanıcılarca terk edilen sayfalara kıyasla ziyaretçilerin daha fazla vakit geçireceği sitelerdir. Bu tür sitelerde, ziyaretçilerin hemen çıkma oranında düşüş yaşanır.
  • Aşırı kaynak kullanımı engellenir. Sadece kullanıcılarca görüntülenen web sayfası bölümleri sunucu kaynağından tüketilir.
  • Kısa sürede yüklenen sayfalar daha yüksek kullanıcı deneyimi sunar. Web sitenizin sunduğu kullanıcı deneyimi ne kadar yüksekse, web sitenizin arama sonuç sayfalarında edindiği sıralama da o denli yüksek olacaktır. Bu sayede gerek SEO performansı gerekse kullanıcı deneyiminde önemli bir artış yaşanır.
  • Çok sayıda görsel içerik kullanılan ve uzun sayfa yapısına sahip olan web siteleri için oldukça ideal bir uygulamadır.

Lazy Load Nasıl Yapılır?

Lazy load metodu; JavaScript ve HTML için manuel bir şekilde nitelik (attribute) özelliği kullanılarak yapılabilir. Metot uygulanırken ilk olarak;

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

Sıralanan adımları takip ettikten sonra, aşağıda yer alan tablodaki talimatları uygulayın.

HTML

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

 
CSS

.lazy{
display:block;
width:100%;
}

.text-area{
margin:30px 0;
}

 
JavaScript

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

 

Lazy Load Eklentileri (WordPress)

Lazy load uygulaması sayesinde web sitelerin daha hızlı görüntülenmesi ve bu sayede kullanıcı deneyiminin iyileştirilmesi mümkündür. Faydalarına ve nasıl uygulanabileceğine değindiğimiz içeriğimizde, WordPress tabanlı web siteleri için kullanılabilecek lazy load eklentilerini sıralayalım:

  • Lazy Load by WP Rocket,
  • A3 Lazy Load,
  • JCH Optimize,
  • Lazy Loader,
  • Speed Up- Lazy Load,
  • WordPress Infinite Scroll- Ajax Load More.

Lazy Load Kullanımında Dikkat Edilmesi Gerekenler

Lazy load, oldukça pratik bir metot olup son derece basit bir kullanıma sahiptir. Lazy load uygulaması sayesinde birçok önemli avantaj elde edilir. Ancak, uygulamanın yanlış veya hatalı kullanılması çeşitli sorunları beraberinde getirecektir. Bu nedenle, doğru kullanım talimatlarına uygun hareket etmek en doğru yaklaşım olacaktır. Lazy load işlemine konu edilecek web site seçimi son derece önemlidir. Bu uygulama, görsel içerik sayısının fazla olduğu sitelerde tercih edilmelidir.

Lazy load çalışmasında dahili tarayıcı özelliği kullanılmamalıdır. Şayet dahili tarayıcı özelliği kullanılırsa geliştirme ve test süresi uzayacaktır. Eksiksiz ve hatasız bir yapı kurulmasına özen gösterilmelidir. Aksi takdirde, ziyaretçiler yanlış içeriklere yönlendirilir. Oldukça basit kullanılan ve pratik bir metot olan lazy load’a ilişkin dikkat edilmesi gereken hususlar da bu şekilde. Tüm bunları gözeterek hareket etmeniz halinde oldukça sağlıklı sonuçlar elde edebilirsiniz.

Diğer Makalelerimizi İncelediniz Mi?
Merhaba 👋 Nasıl Yardımcı Olabiliriz?