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

Lazy Load özelliği ile hızlı web sitesine sahip olmak en çok kullanılan yöntemlerden biridir. Bildiğiniz gibi Google açısından web sitelerin açılış hızı oldukça önemlidir. Elbette Google bir kenara ziyaretçiler içinde hızlı bir web sitesi olması gereklidir. Site hızı üzerinde ise görsellerin etkisi büyüktür. İşte tam bu noktada Lazy Load özelliği kullanılmalıdır. Bu yazımda sizlere Lazy Load nedir ve Lazy Load nasıl kullanılır sorularının cevaplarını vereceğim. Bu yazımdaki verdiğim kodlar sayesinde eğer kullandığınız temada yok ise manuel olarak sizde sitenize Lazy Load özelliği kazandırabilirsiniz.

Lazy Load Nedir?

Giriş kısmında görsellerin site hızı üzerindeki oldukça önemli etkisi olduğundan söz etmiştim. Bu kapsamda bir siteye girdiğiniz zaman görsellerin hepsinin aynı anda yüklenmesi açılış hızını olumsuz etkileyecektir. Ancak bunun yerine ziyaretçi görselin olduğu kısıma geldiğinde ilgili görsel açılsa daha iyi olur değil mi? İşte Lazy Load nedir dersek kısaca görsellerin ziyaretçiye uyumlu şekilde açılmasının sağlanması uygulaması diyebilirim.

Terimsel açıdan bakacak olursak Lazy Load bir Document Object Model (DOM) yüklemesidir.  Peki DOM nedir dersek kısaca HTML kodlarını bir görsele (nesneye) dönüştüren programlama ara yüzüdür. İşte Lazy Load uygulaması için DOM üzerinden  javascript, HTML ve css kodlarında değişiklik yapabilirsiniz.

Adım Adım Lazy Load Nasıl Yapılır?

Öncelikle WordPress kullanıyorsanız şanlısınız. Hatta temanızı Mythemeshop veya ThemeForest‘ten aldıysanız biraz daha şanlısınız diyebilirim. Bu siteleri bende kendi sitelerim ve müşterilerim için yaptığım sitelerde kullanıyorum. Daha önce yazmış olduğum ThemeForest Tema Almak ve MyThemeShop Tema Satın Almak başlıklı yazılarımda bu siteler hakkında gerekli bilgilere değinmiştim. Buradan aldığınız temaların ayar kısmında Lazy Load açık veya kapalı olması için ayar bulunmaktadır. Elbette tasarımcıdan tasarımcıya yeri değişse bile mantık anlattığım şekilde işlemektedir. Peki otomatik olarak diyelim ki Lazy Load kullanımı ayarlanmıyor ise bu durumda ne yapacaksınız? Elbette kod ekleme yöntemi ile buna çözüm bulabilirsiniz.

Öncelikle aşağıdaki adımları uygulayarak başlayalım.

• HTML ortamındaki tüm görsel olan nesnelere (<img src=”” />) ortak olacak şekilde class yani sınıf verelim.
• Javascript’te window.scroll fonksiyonu ile devam ediyoruz,
• Verdiğimiz ortak class ile each fonksiyonunu çalıştırın,
• Each te gördüğümüz  this kısmını kullanarak offset fonksiyonun top parametresini kullanarak window en üst değerini öğrenin, eğer durum (statement) uygun ise data-src verdiğimiz image (görsel) path yani dizin yolunu src özelliğine atıyoruz.

Bu aşamadan sonra sıra geldi ekleyeceğimiz kodlara. Aşağıda başlıklar halinde nereye hangi kodu kullanacağınızı belirtiyorum.

HTML Kısmı İçin:

Bu kısım için

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

kodunu kullanın.

CSS Kısmı İçin:

Bu kısım içinde

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

kodunu kullanın.

Javascript Kısmı İçinde:

Bu kısım içinde

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

kodunu kullanın.

WordPress için Lazy Load Eklentisi Kullanmak

Bu kısma kadara Lazy Load nedir ve Lazy Load nasıl kullanılır sorularının cevaplarını verdim. Bu kısma kadar manuel olarak Lazy load metodunu sitenize uygulamanız için gerekli bilgileri verdim. Ancak WordPress kullanıcılarının ise şanslı olduğunu başta belirtmiştim. Aldığınız temanın ayar kısmında bu özelliğin aktif veya pasif olması için muhtemelen bir ayar vardır. Eğer yok ise WordPress eklentiler yardımı ile hemen bir WordPress Lazy Load eklentisi yükleyebilirsiniz.

Eğer yukarıdaki bilgileri ben uygulamak istemiyorum derseniz kesinlikle bir eklenti kullanmanız iyi olacaktır. Bu konuda size önerim ise

• BJ Lazy Load (bence ideal olan)
• Unveil Lazy Load (Uzun süredir güncellenmiyor)
• a3 Lazy Load

eklentilerinden biri olacaktır. Bu eklentiler oldukça hafif ve kısa yoldan işinizi görecek düzeydedir. Birini seçip sitenize yükleyebilirsiniz.

Lazy Load uygulaması site performansınızı iyileştirme yöntemlerinden sadece biridir. Eğer WordPress kullanıyorsanız sitenizi iyileştirmek adına WordPress Site Performansı Arttırma başlıklı yazıma göz atmanız iyi olacaktır. Ayrıca örnek kodlar için codepen.io adresini ziyaret edebilirsiniz. Yazımı beğendiyseniz sosyal medya hesaplarınızda paylaşabilirsiniz. Ayrıca beni Facebook, Twitter ve Instagram hesaplarımdan takip edebilirsiniz.