Günümüzde internet kullanıcılarının neredeyse yarısından çoğu 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 sitesinin hızı, siteye kullanıcı çekmekle direkt bir ilişki içerisinde bulunuyor. Özellikle görsel sayıları fazla olan e-ticaret sitelerinde 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?
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 80 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 80 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%;
}
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 ve haber sitelerinin 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.
