Sonuçları görmek ve/veya aramayı sonlandırmak için "esc" tuşuna basın.

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

SEO’nun vazgeçilmezi Lazy Load hakkında en çok merak edilen Lazy Load Nedir? Lazy Load Ne İşe Yarar? Lazy Load Kullanmanın Faydaları? Lazy Load Nasıl Kullanılır? gibi soruları sizler için yanıtlayacağız. Öncelikle işin temelinden başlayalım.

Lazy Load Nedir?

Lazy Load, sayfada yer alan bir ögenin ihtiyaç duyulmadığı takdirde çağrılmaması prensibi ile çalışan bir JavaScript + CSS ve HTML kod kombinasyonudur. Lazy Load kullanılarak, ziyaretçinin fare hareketine göre, sayfanın ilk açılışta görünmeyen kısmının, kullanıcı aşağı indikçe yüklenmesi sağlanır. Böylelikle SEO ve kullanıcı deneyimi açısından oldukça önemli olan sayfa açılış hızı oldukça düşecektir. Ziyaretçilerin %95’inin ziyaret ettikleri sitenin açılışının 3 saniyeden uzun sürmesi durumunda siteyi ziyaret etmekten vazgeçtikleri düşünüldüğünde, her saniye daha değerli hale geliyor. Site hızının SEO’yu ne kadar etkilediğini öğrenmek için daha öcne sizler için hazırlamış olduğumuz “Site Hızının SEO’ya Etkisi Ne Kadar?” başlıklı yazımızı inceleyebilirsiniz.

Lazy Load ile alakalı bir örnek vermek gerekir ise ; https://www.indir.com/haberler sitesini ziyaret edebilirsiniz.

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

Yukarıda vermiş olduğumuz adresi ziyaret ettiğinizde karşınıza yukarıdaki ekran görüntüsünde yer alan veya benzeri bir ekran çıkacaktır. Karşınıza çıkan ekran aslında sitenin tamamı. Tabi siz fare ile aşağı inene kadar!

Lazy Load kullanımı sayesinde aşağı doğru hareket sağlanmadıkça ekranın içerisinde yer almayan ögeler yüklenmez. Siteyi ziyaret ettiğinizde aşağı yönlü hızlı bir hareket yaptığınızda diğer ögelerin sonradan yüklendiğini görebilirsiniz.

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

Başka önemli bir ayrıntı ise sayfada aşağı yönlü hareket gerçekleştiğinde sayfanın geri kalanında yer alan ögelerin tamamının yüklenmiyor olması. Tıpkı ilk açılışta olduğu gibi aşağı yönlü hareket gerçekleştiğinde sadece ekranda yer alan ögeler yüklenir. Diyelim ki sitede 500 öge yer alıyor ve siz sadece 1/4’ünü görecek kadar aşağı indiniz ve sayfayı terk ettiniz. Kalan 375 öge yüklenmeyecektir. Lazy Load kullanılmadığı düşünüldüğünde sayfayı açtığınızda 500 ögenin tamamı yüklenecektir. Özellikle mobil internet kullanımı düşünüldüğünde ziyaretçilere ögeleri gerekmedikçe göstermemek oldukça önemli hale geliyor.

Lazy Load Nasıl Kullanılır?

Lazy Load nedir? başlığında açıkladığımız gibi Lazy Load HTML, CSS ve JavaScript’in birlikte kullanımı ile kullanılabiliyor. Şimdi sizler için hem HTML, hem CSS, hem de JavaScript’te kullanılacak kodları paylaşacağız.

HTML’de Kullanılacak Kod

<img class="lazy" data-src="Görselin Adresi veya Sitedeki Yolu" />

Yukarıda yer alan kodda kırmızı ile işaretlediğimiz alan CSS’de yer alan Lazy Load ile alakalı class’ın adı.

CSS’de Kullanılacak Kod

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

Yukarıda yer alan kodda kırmızı ile işaretlediğimiz alan Lazy Load kullanımı için verilecek class adı. Eğer .lazy kısmını .lazyle yaparsanız. Lazy Load kullanılacak ögenin class’ını da lazyle olarak değiştirmelisiniz.

JavaScript’te Kullanılacak Kod

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

Yukarıda yer alan kodda kırmızı ile işaretlediğimiz alan bu JavaScript kodundan etkilenecek ögelerin sahip olması gereken class anlamına geliyor. Kırmızı ile işaretlenen alan Lazy Load için kullandığınız class adı ile aynı olmalıdır.

Yine yukarıda yer alan kodda yeşil ile işaretli alan ise içerik kaynağının hangi öge özelliğinden alınacağı ile alakalı. Yani HTML’de Kullanılacak Kod bölümünde yer alan data-src özelliği bizim Lazy Load’da kullanacağımız veri çekme alanımız.

WordPress Lazy Load Kullanımı

WordPress Lazy Load kullanımı için yukarıdaki kodları tema kaynak kodları içerisine ekleyebilir yada daha kolay yol olan Lazy Load WordPress eklentileri sayesinde kolayca Lazy Load’ı kullanabilirsiniz.

Umarım yazımız sizler için yararlı olmuştur. Aklınıza takılan sorular için aşağıda yer alan yorum kısmını kullanabilirsiniz.

Yorumlar

1 Yorum

2018 Kasım Ayı Özeti - Hasan Yaşar

[…] Lazy Load Nedir, Nasıl Kullanılır? […]


Yorum yap

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.