Günümüzde internet kullanıcılarının neredeyse yarısı, bir web sitesinin 3 saniyeden fazla yüklenmesi durumunda siteden çıkıyor. Site içi çalışmalar işte bu noktada daha fazla önem kazanıyor. Çünkü bir sitenin hızı, siteye kullanıcı çekmekle direkt bir ilişki içerisinde bulunuyor. Özellikle e-ticaret sitelerinde görsel sayıları fazlaysa sitenin hızı maalesef olumsuz anlamda etkilenmektedir. Bu da sitedeki hemen çıkma oranın artmasına neden olur haliyle de site sıralamada düşük bir yere yerleşir.
Peki site hızı ile ilişkili bir kavram olan Lazy Load nedir? Ve ne işi yarar?
Lazy Load, sayfa uzunluğu ve görsel yoğunluğu fazla olan sitelerde sayfaların daha hızlı açılmasını sağlayan bir yöntemdir. Bu yöntem bir JavaScript dosyasının kullanılmasıyla gerçekleştirilmektedir. Bant genişliği üzerinden tasarruf ederek, sitenin hızının arttırılması hedeflenmektedir. Net bir açıklama getirecek olursak “O an lazım olmayan bir nesnenin siteye çağrılmaması” olarak da ifade edilebilir. Buna şu şekilde örnek vermemiz mümkündür. Diyelim ki sitede 50 adet görsel var. Bu sayfa açıldığı zaman karşınıza ilk olarak 5 tane görsel çıkıyorsa sunucudan sadece bu resimler çağrılmış anlamına gelmektedir. Fare ile sayfada aşağı doğru inildiği zaman resimler de teker teker yüklenecektir. Yani Lazy Load özelliği sayesinde bir anda 50 görsel değil de o an ihtiyaç duyulan kadar görsel yüklenmektedir. Bu da sitenin hızını olumlu anlamda etkiler.
Lazy Load’ı Nasıl Yapabiliriz?
Lazy Load, HTML’de manuel bir biçimde uygulanabilen metottur. Bu uygulamayı kullanabilmek için belli başlı kodları bilmek gerekmektedir. Bu kodlar;
HTML:
<img class="lazy" data-src"resim.jpg" />
CSS:
.lazy {
display: block;
width: 100%;
}
.text-area {
margin: 30px 0;
}
jQuery:
$(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'));
}
});
});
});
Lazy Load’ı Hangi Siteler Kullanmalıdır?
Özellikle görsel açıdan zengin olan e-ticaret siteleri ile haber sitelerini Lazy Load yöntemini kullanması tavsiye edilmektedir. Öte yandan bu görseller için galeri oluşturmak da sitenin hızına büyük katkı sağlamaktadır.
Lazy Load’ın Faydaları Nelerdir?
- Sitenin hızı ciddi anlamda yükselir. Hal böyle olunca da yüksek performans gösterir.
- Sayfalar hızlı açılacağı için hemen çıkma oranları da düşer. Bu sayede SEO çalışmalarına da katkı sağlanmış olur.
- Siteye giren kullanıcılar tüm görsellerin açılmasını beklemek zorunda kalmaz. İhtiyacı olanı direkt olarak alır.
- İhtiyaç dışı kaynak kullanımı önlenir.
- Kullanıcı deneyimini geliştirir.
- Kullanıcıların daha fazla içerik keşfetmesini sağlar.
Hangi Noktalara Dikkat Edilmesi Gerekmektedir?
Lazy Load, görsel yoğunluğu fazla olan sayfalarda kullanılmalıdır. Aksi takdirde bir işe yaramaz.
Bu özellik tarayıcı özelliği değildir bu nedenle JavaScript dosyasına ihtiyaç vardır.
Yanlış bir kurgu yapmamak gerekmektedir. Yoksa kullanıcılar hiçbir fotoğrafa ulaşamaz.
