LazyLoad Nedir, Nasıl Yapılır?

Lazy Load, bir web sitesindeki resimlerin ve videoların yalnızca kullanıcının sayfayı aşağı kaydırdıkça yüklenmesini sağlayan bir tekniktir. Bu teknik, web sayfasının yükleme hızını arttırır ve sayfa yükleme süresini azaltır. Ayrıca, kullanıcının internet bağlantısı yavaş olsa bile sayfanın hızlı bir şekilde yüklenmesine yardımcı olur. SEO açısından da önemlidir çünkü hızlı bir web sitesi, arama motorlarının daha fazla beğenisini kazanır ve daha üst sıralarda yer alır.

LazyLoad Nasıl Yapılır?

1. WordPress Eklentileri: WordPress kullanıcıları, sayfalarında Lazy Load kullanmak için birçok eklentiye sahiptir. Bu eklentiler sayesinde resimler ve videolar, sayfanın yalnızca görüntülendiği anda yüklenir. Bunun için WP Rocket, Smush, Lazy Load gibi eklentileri kullanabilirsiniz.
2. JavaScript Kullanımı: Lazy Load için birçok JavaScript kitaplığı mevcuttur. Bu kitaplıklar sayesinde, resimler ve videolar sayfa açıldığında yüklenmez, sayfa aşağı kaydırıldığında yüklenir. Bu yöntem için jQuery, Vanilla Lazy Load, Intersection Observer API gibi kitaplıkları kullanabilirsiniz.
3. CSS Grid ve Flexbox: Lazy Load yapmak için CSS Grid ve Flexbox kullanmak da mümkündür. Bu yöntemde, resimler ve videolar önceden yüklenir ve sayfa aşağı kaydırıldığında görünür hale gelir. Bu yöntem, daha eski tarayıcılarda çalışmayabilir ve daha fazla CSS kodu gerektirebilir.

LazyLoad Nasıl Kurulur?

1- HTML Kodlarına Lazy Load Sınıfı Ekleme

İlk olarak, resimlerinizi HTML kodlarında tanımlamanız gerekiyor. Resim etiketlerine "lazyload" sınıfını ekleyerek, lazy load özelliğini aktif hale getiriyoruz. Örneğin:

html
<img class="lazyload" src="placeholder-image.jpg" data-src="your-image.jpg" alt="Image description">

Yukarıdaki kodda, "lazyload" sınıfı ekleyerek resmi lazy load özelliğine dahil ettik. Ayrıca, "data-src" özelliği sayesinde resmin gerçek yolu belirtiliyor.

2- CSS Kodlarına Stil Ekleme

Lazy load özelliği eklediğiniz resimlerin yükleme esnasında nasıl görüneceğini belirlemek için CSS kodlarına stil eklemeniz gerekiyor. Örneğin:

CSS kodlarına stil eklemeniz gerekiyor. Örneğin:

.lazyload {
  opacity: 0;
  transition: opacity 500ms;
}.lazyloaded {
  opacity: 1;
}

Yukarıdaki kodda, "lazyload" sınıfına sahip resimlerin varsayılan olarak sayfada görünmez olduğunu belirttik. Resim yüklendikten sonra, "lazyloaded" sınıfı otomatik olarak eklenir ve resim görünür hale gelir.

3-JavaScript Kodlarına Kodlama Ekleme

Son olarak, lazy load özelliğini aktif hale getirmek için JavaScript kodlarına bazı kodlama eklemeniz gerekiyor. Aşağıdaki örnek kodda, resimlerin sayfa yüklendiğinde değil de, sayfa kaydırıldığında yüklenmesi sağlanmaktadır.

document.addEventListener("DOMContentLoaded", function(){var lazyloadImages = document.querySelectorAll(".lazyload");
var lazyloadThrottleTimeout;
function lazyload (){if(lazyloadThrottleTimeout){clearTimeout(lazyloadThrottleTimeout);
}lazyloadThrottleTimeout = setTimeout(function(){var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img){if(img.offsetTop < (window.innerHeight + scrollTop)){img.src = img.dataset.src;
img.classList.remove('lazyload');
}});
if(lazyloadImages.length == 0){document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}}, 20);
}document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});

Yukarıdaki kodda, sayfa yüklendiğinde resimlerin yüklenmesi beklenmez.

Tüm adımları tamamladığınızda, web sayfanızdaki resimler, sayfa yüklendiğinde yüklenmek yerine, sayfa ziyaretçisi tarafından görüntülendikçe yüklenir. Bu, sayfa yükleme süresini azaltacak ve sayfanızın performansını artıracaktır.