Web sitenizdeki resimler, artan yükleme süresine katkıda bulunan önemli unsurlardan biridir. Daha ağır görüntülerin yüklenmesi daha uzun sürer, bu da kullanıcı deneyimini bozar ve hemen çıkma oranını artırır. Bu sorunun çözümlerinden biri lazy load.
Lazy Load (Tembel Yükleme) Nedir?
Tembel yükleme, bir sonraki alandaki içeriği geciktirirken yalnızca kullanıcı tarafından görülebilir içeriği yükleyen etkili bir optimizasyon tekniğidir. Bu, web sayfanızın kısmen yükleneceği anlamına gelmez. Yalnızca içeriğin kullanıcı tarafından istenmesi durumunda yüklendiği anlamına gelir. Bu, tüm sayfanın tek seferde yüklendiği toplu yüklemenin tersidir.
Örneğin, web sayfanız 4 kattan oluşur. Ziyaretçiler sayfanıza geldiğinde tembel yükleme yalnızca ilk katı yükler ve kullanıcılar bir sonraki kata geçtikten sonra yalnızca bu kat yüklenir.
Bu tür yükleme mantıklıdır çünkü kullanıcılarınız ilk katında alakalı bilgiler bulursa, yükleme sürenizi artırabilecek ve kullanıcı deneyimini bozabilecek web sayfasının tamamını yüklemenize gerek yoktur.
Lazy load için birçok kütüphane ekleyebileceğiniz gibi kendinizde bunla ilgili scriptler yazabilirsiniz.
Lazy Load Faydaları Nelerdir?
- Lazy load’ın tek faydası sitenin hızını arttırması değildir elbette.
- Site hızına bağlı olarak site performansını arttırır.
- Hızlı açılan sayfalar kullanıcının sitede kalma süresini arttırdığı için siteden çıkma oranı da düşer.
- Aşırı kaynak kullanımının önüne geçilebileceği gibi yalnızda kullanıcının odak noktasındaki alanlar sunucu kaynağından tüketilir.
- Hızlı açılmasından dolayı kullanıcıya daha iyi bir deneyim sunar. Kullanıcı deneyiminin iyi olması da sıralamanızı olumlu yönde etkiler. Böylelikle hem kullanıcı dostu hem de arama motoru dostu bir web sitesi inşa etmeniz kolaylaşır.
Lazy load metotu görsel içeriği yoğunlukta olan siteler için yararlıdır. Eğer ki siteniz içerik ve görsel açısından bir yoğunluğa sahipse kullanmanızı tavsiye ederiz. Herhangi bir hata dahilinde ziyaretçiniz görselleri hiç görüntüleyememesine sebep olabilirsiniz. Ziyaretçi ekranında görseller olabildiğince hız yüklenmelidir. Aksi taktirde 3 saniyeden fazla sürerse kullanıcı deneyimi olumsuz etkilenir. Buda hemen çıkma oranını yükseltir.
Lazy Load Nasıl Yapılır?
HTML
<img class="lazy" data-src="1.jpg" src="load.gif" alt="Lazy Load">
CSS
.lazy{
display:block;
width:100%;
margin-bottom: 20px
}
JAVASCRIPT
$(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'));
}
});
})
})
