Lazy Loading Nedir?

Buket Çataroğlu
Jan 6 · 2 min read

Lazy Loading, sayfada yer alan bir ögenin ihtiyaç duyulmadığı takdirde çağrılmaması prensibi ile çalışan bir JavaScript + CSS ve HTML kod kombinasyonudur. Paketleri farklı modüllere ayırarak uygulamamızın açılış süresini hızlandırır ve kaynak tüketimini azaltır.

Lazy loading Avantajları

· Başlangıç ​​yükleme süresini azaltır Bir web sayfasının lazy loading olarak yüklenmesi sayfa ağırlığını azaltır ve daha hızlı . Sayfa yükleme süresini sağlar

  • Bant genişliğinin korunması Lazy loading yükleme, yalnızca istendiğinde kullanıcılara içerik sağlayarak bant genişliğini korur.
  • Sistem kaynağının korunması Lazy loading yükleme hem sunucu hem de istemci kaynaklarını korur, çünkü yalnızca bazı resimlerin, JavaScript ve diğer kodların oluşturulması veya yürütülmesi gerekir.
    SQL sorgularının gereksiz şekilde çalıştırılması engellenir.

Lazy Loading Dezavantajları

· İlk olarak Lazy loading uygulamak için mevcut kodlara eklenecek ekstra kod satırları, kodu biraz karmaşık hale getirir.

· İkincisi Lazy loading, yüklenen içeriğin yanlış endekslenmesi nedeniyle bazen web sitesinin arama motorlarındaki sıralamasını etkileyebilir.

· Lazy Loading, görsel yoğunluğu fazla olan sayfalarda kullanılmalıdır. Aksi takdirde bir işe yaramaz.

· Yanlış bir kurgu yapmamak gerekmektedir. Yoksa kullanıcılar hiçbir fotoğrafa ulaşamaz.

Lazy Loading Hangi Siteler Kullanmalıdır?

Görsel açıdan zengin olan e-ticaret siteleri ile haber siteleri Lazy Loading yöntemini kullanılması tavsiye edilmektedir.

Lazy Loading Nasıl Kullanılır?

HTML’de Kullanılacak Kod

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

CSS’de Kullanılacak Kod

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

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

WordPress Lazy Loading Kullanımı

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

    Buket Çataroğlu

    Written by

    Turuncu Internet Solutions

    Kazanma isteği, başarılı olma isteği ve tam potansiyelimize ulaşma isteği, bir kelimeye anlatılabilir “Mükemmellik”. Uygulama geliştirmenin her aşamasında, planlamadan teslimata kadar mükemmellik işimizin sırrıdır.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade