Home / SEO / Lazy Load Nedir? Nasıl Yapılır ?
lazy load

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

Lazy load, en kolay tanımıyla içerik yüklendikçe resimlerin DOM’a yüklenmesidir. DOM (Document Object Model), tüm web tarayıcılarda HTML kodlarını bir nesneye dönüştüren programlama arayüzüdür. DOM üzerinden HTML, javascript ve css kodlarınıza müdahale edebilirsiniz.

Google, artık kullanıcıyı daha fazla düşünmektedir. Bundan dolayı günümüzde SEO tekniklerinde değişiklikler olmaya başladı. Daha önceki yazılarım da “Google page speed” in ne kadar önemli olduğunu anlatmıştım. Lazy load sayesinde sayfamız yüklendiğinde tüm resimlerin yüklenmesini engellemektedir. Yani şöyle oluyor kullanıcı siteye giriyor, sitedeki tüm resimler DOM’a yükleniyor (Bunun için developer tools’dan network’e tıklayıp inceleyebilirsiniz). Page speed testlerine baktığınızda sayfa yüklenme süresi ve sorgu atılan sayılar fazladır.

Lazy load’ın mantığı şu şekilde ilerlemektedir;

  • İçerik şuan bu section (bölüm) içerisinde mi?
  • Hayır değil, o zaman resimleri yükleme
  • Evet, o zaman oraya ait resimleri yükle

lazy load nedir

Lazy Load Nasıl Yapılır?

Lazy load aslında bir metoddur.  Manuel olarak javascript ve HTML’ de attribute (nitelik) özelliğini kullanarak yapabiliriz. Adım adım olarak aşağıda maddeleyeceğim daha sonra ise kodlarını paylaşacağım.

  • HTML’de tüm resim olan elementlere (<img src=”” />) ortak bir class (sınıf) veriyoruz.
  • Javascript’te window.scroll fonksiyonunu kullanıyoruz
  • Ortak verdiğimiz class(sınıf) üzerinden each fonksiyonunu çalıştırıyoruz

En önemli kısıma geldik

  • Burada each’deki this i kullanarak offset fonksiyonun top parametresini kullanarak window en üst değerine bakıyoruz.
  • Eğer statement (durum) uygun ise data-src verdiğimiz image (resim) path (dizin yolunu) src özelliğine atıyoruz.

HTML için

< i m g class="lazy" data-src"image path" />

CSS için

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

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

Özet olarak;

Lazy load metodunu kullanarak sayfada scroll yaptıkça resimleri server’dan client’a yüklüyoruz. Bunun en büyük sebebi ise Google artık kullanıcıya yönelik sıralama oluşturuyor. Ziyaretçilerinizi düşünmeniz, UX deneyimini olumlu yönde arttıracaktır. Google’ın bizi sevmesi için tüm sorunlara çözüm üretmek gerekiyor. Lazy load bu çözümlerden sadece bir tanesidir.

Örnek kodlara buradan ulaşabilirsiniz.

1 Star2 Stars3 Stars4 Stars5 Stars 6 Kişi oy verdi, 5 üzerinden ortalama puan: 4,33. Bu yazıya oy vermek ister misiniz?
Loading...

İlginizi Çekebilir

backlink çalışma stratejileri

En Özel Backlink Alma Yöntemleri

Backlink öldü, backlinkler artık tarihi oldu şeklinde her gün yeni bir paylaşımla karşılaşılsa da backlinklerin …

2 yorum

  1. müslüm hocam tema ayarlarından lazy load kısmını aktif etmemiz yeterli olacakmıdır makelede anlatılanları ek olarak yapmamıza gerek var mıdır?

    • Muslum Aslanturk

      Selamlar,
      Bunlar temadan temaya göre fark etmektedir. Benim anlattığım yöntem manuel yapılan işlemdir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir