Lazy Load Nedir, Lazy Load Nasıl Kullanılır?
Kullanıcı deneyimi, sayfa açılış hızı ve seo için çok önemli olan lazy load nedir? Lazy load nasıl kullanılır? Lazy Load Kullanmanın Faydaları? gibi soruları yanıtlamaya çalışalım.Bir web sitesindeki görsel öğeler, web site içeriğini daha iyi anlatmak ve web site tasarımını daha ilgi çekici hale getirmek için önemlidir. Bir web sitesi logosuz, verilen hizmet ve ya ürün görselleri olmadan kötü bir tasarıma sahip olacaktır. Fakat bu görseller site açılış hızını yavaşlatmaktadır. Bu nedenle görselleri kaldırmak yerine lazy load kullanarak site açılış hızını düşürebilirsiniz.
Lazy Load Nedir?
Lazy load; web sitesindeki ihtiyaç duyulmayan öğelerin çağrılmamasına yarar. Yani web sitesine gelen kullanıcı sayfanın üst kısmındaki içerik yüklendikten sonra sayfayı aşağı kaydırdıkça görseller yüklenir. Bu sayede ekranda görünmeyen görseller yüklenmez ve gereksiz yük oluşturulmamış olur. Bu sayede sayfa ilk açılışda daha hızlı şekilde yüklenir.Lazy Load Ne İşe Yarar?
Lazy load; görsellerin çok olduğu veya sayfa içeriğinin uzun olduğu web sitelerinde sayfanın daha hızlı açılması, bant genişliği tasarrufu vb durumlarda kullanılır. Lazy Load kullanılan sayfalarda, web sitesi ilk açıldığında ekranda yer almayan görseller yüklenmeyecektir. Bu sayede web sitesi açıldığında tüm görseller açılmayacak ve görseller yüklenmeyecektir.Lazy Load Kullanmanın Faydaları?
Yukarda da bahsettiğimiz gibi lazy load görselleri kullanıcı o ekrana geldikçe yükleyecektir. Bu sayede;- Site daha hızlı açılacak ve kullanıccı deneyimi artacaktır.
- SEO açısından oldukça önemli olan sayfa açılış hızı düşecektir.
- Siteniz hızlı çalışacağı için kullanıcılar sitenizde daha fazla gezecek ve hemen çıkma oranı düşecektir.
- Sitenizdeki veri kullanımı azalacağı için bant genişliği tasarrufu sağlanacaktır.
Google’da çok iyi sıralamalara çıkmak istiyorsanız sitenize gelen ziyaretcilere iyi bir web site deneyimi sunmanızdır. Web sitene gelen bir kullanıcı, web sitesi 3 saniyeden daha fazla sürede yükleniyorsa web sayfasını terk etmektedir. İşte bu konuda Lazy Load ile daha hızlı web sayfalarına sahip olabilirsiniz.
Lazy load nasıl kullanılır?
Lazy Load ile web sitesinde aşağı doğru hareket ettiğinizde diğer ögeler yüklenecektir. Şimdi sizlerle HTML, CSS, JavaScript’te kullanılacak kodları paylaşacağız.HTML: img class etiketine lazy-load ekleyin ve görsellerinizi src yerine “data-src” yolu ile çağırın.
Örnek : <img class="lazy-load" data-src="Resmin yolu" />
CSS: lazy-load classı oluşturun.
.lazy-load
{
display:block;
width:100%; // burası size göre değişir
}
Javascript: Bildiğimiz Javascript :)
$(document).ready(function(){
$(window).scroll(function(){
$('.lazy-load').each(function(){
if( $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) )
{
$(this).attr('src', $(this).attr('data-src'));
}
});
})
})