Lazy Load Nedir? Nasıl Yapılır?

Belirli bir web sitesinin tamamen yüklenmesi için uzun süre beklemek zorunda kalmamızın ne kadar sinir bozucu olduğunu hepimiz biliyoruz. Çoğu zaman bu gecikme, resimlerin web sitesine yüklenmesinden kaynaklanır. Bu tonlarca resim, yavaş bir web sitesine ve rahatsız edici bir kullanıcı deneyimine yol açabilir. Hiçbir işletme web sitesini yavaşlatmak istemez ve görseller izlenim yarattığı için görsel sayısını azaltmak da pek uygulanabilir değildir. Bu noktada devreye Lazy Load yöntemi girer.

Lazy Load Nedir?

Lazy Load, görsel yoğunluğu ve sayfa uzunluğunun fazla olduğu sitelerde, sayfaların daha hızlı açılmasını sağlayacak ek bir JavaScript dosyasının kullanımıdır.

Lazy Load özelliği, bant genişliği tasarrufu ile sitenizin hızını artırmaya yarayan bir metottur. En geniş anlamıyla ihtiyaç duyulmayan bir nesnenin çağrılmaması durumudur. Bu özellik sayesinde kullanıcı bir sayfayı açtığında tüm resimlerin yüklenmesinin önüne geçilir. Bu sayede de daha hızlı açılan sayfalara sahip olursunuz.

Google kullanıcıları daha fazla önemsiyor. Bu yüzden de kullanıcı deneyimini iyileştirmek yönünde adımlar atıyor. Web sitelerinden de kullanıcı deneyimini en iyi şekilde sunmasını istiyor. Eğer Google’da çok iyi sıralamalar elde etmek istiyorsanız yapmanız gereken en önemli şey kullanıcılara iyi bir deneyim sunmaktır.

Bunun için de hızlı bir siteye sahip olmanız gerekir. Site hızının neden önemli olduğunu açık bir şekilde belirtecek bir istatistiği de sizlerle paylaşmak istiyoruz. Google’da arama yapan bir kullanıcı, bir web sitesini ziyaret ettiğinde eğer o web sitesi 3 saniyeden daha fazla sürede açılıyorsa siteyi terk ediyor. İşte bu noktada Lazy Load daha hızlı sayfalara sahip olmanızı sağlıyor.

Lazy Load Ne İşe Yarıyor?

Lazy Load, görsel yoğunluğu ve sayfa uzunluğunun fazla olduğu sitelerde, sayfaların daha hızlı açılmasını sağlayacak ek bir JavaScript dosyasının kullanılmasıdır. Lazy Load metodunun uygulandığı sayfalarda, sayfa açıldığında ekranda henüz yer almayan görseller yüklenmeyecektir. Kısacası bir sayfayı açtığınızda tüm görsellerin yüklenmesi ve sayfa hızının yavaşlaması engellenir.

Lazy Load, genellikle e-ticaret sitesi gibi görsel listelemenin yoğun ve önemli olduğu sitelerde kullanılır. Ayrıca çok sayıda görselin kullanıldığı slider ve galeri yer alan sayfalarda da kullanılmalıdır. Bu sayede görsellerin fazlalığının neden olduğu sayfa yavaşlığının önüne geçilir.

Lazy Load kullanılmadığı zaman sayfada yer alan görsellerin tüm aynı anda yüklenecek ve bu nedenle sayfa yavaşlayacaktır. Lazy Load kullanıldığı zaman ise görseller, sayfada aşağı doğru inildikçe yüklenecektir. Görsellerin gerek duyuldukça yüklenmesi sitenin hızını da artıracaktır.

Binlerce ürünün yer aldığı e-ticaret sitelerinde sayfa açıldığında tüm görsellerin aynı anda yüklenmesi diğer web sitelerinin hızındaki olumsuz etkiden daha fazla olacaktır. Buna bağlı olarak da kullanıcılar web sitesini terk ederek arama sonuçlarında çıkan rakip siteleri ziyaret edecektir.

Lazy Load Faydaları Nelerdir?

Lazy Load’un tek faydası elbetteki site hızını artırması değildir. Lazy Load’un diğer faydaları;

1. Site hızına bağlı olarak sitenizin performansını artırır.
2. Hızlı açılan sayfalar kullanıcıların sitenizde daha fazla vakit harcamasını sağlar. Böylelikle sitenizin hemen çıkma oranı düşer.
3. Aşırı kaynak kullanımının önüne geçilir. Yalnızca kullanıcının görüntülediği alanlar sunucu kaynağından tüketilir.
4. Hızlı açılan sayfalar kullanıcılara daha iyi bir deneyim sunar. Sitenizin sunduğu kullanıcı deneyiminin iyileşmesi de sıralamalarınızı etkiler. Böylelikle hem kullanıcı dostu hem de arama motoru dostu bir web sitesi inşa etmeniz kolaylaşır.

Bu metot, görsel içeriğin yoğun olduğu siteler için yararlıdır. Eğer web siteniz yazılı içerik bakımından yoğun sayfalara sahipse bu yöntemin kullanılmasını tavsiye etmeyiz. Ayrıca dahili bir tarayıcı özelliği değil, JavaScript dosyasının kullanılmasını gerektiren bir metottur. Bundan dolayı test açısından zorlu bir süreçtir.

Herhangi bir hatada sayfanızı ziyaret eden kullanıcıların görselleri hiç görüntüleyememesine neden olabilirsiniz. Ayrıca sayfayı ziyaret eden kullanıcıların ekranında görseller, olabildiğince hızlı yüklenmelidir. Eğer görseller 3 saniyeden daha fazla sürede yüklenirse kullanıcı deneyimi olumsuz etkilenir. Bu da hemen çıkma oranını yükseltir.

Lazy Load Nasıl Yapılır?

Yukarıda da belirttiğimiz gibi Lazy Load bir metottur. JavaScript ve HTML’de manuel bir şekilde nitelik (attribute) özelliğini kullanarak yapabilirsiniz. Uygulama aşamasında öncelikle:

• HTML ortamında olan görsel ögelerin hepsine (<img src=”” />) şeklinde ortak class (sınıf) verin.
• JavaScript’te window.scroll fonksiyonu ile devam edin.
• Ortak class ile each fonksiyonu çalıştırın.
• Each’de yer alan this kısmını kullanarak offset fonksiyonun top parametresini kullanın. Böylelikle window en üst değeri öğrenebilirsiniz.
• Karşınıza çıkan durum uygunsa data-src verdiğiniz image path’i (dizin yolunu) src özelliğine atın.

En önemli kısmı yaptıktan sonra şimdi sıra ikinci kısımda:

HTML İçin;

 <i m g class="lazy" data-src"image path" />

CSS İçin;

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

JavaScript İçin;

$(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 Load Eklentileri

Lazy Load, siteler tarafından, tüm web sitesinin hızlı bir şekilde yüklenebilmesi için görüntülerin yüklenmesini geciktirmek veya yavaşlatmak için kullanılır. Tüm görüntülerin bir kerede yüklenmesi, bir web sitesi için daha yavaş yükleme süresine neden olabilir. Bu nedenle, bir web sitesinin daha hızlı yüklenmesini sağlamak için tembel yükleme kullanılır. Görüntüler, bir kullanıcı onları görmek istediğinde yüklenir. Bu teknik çoğunlukla Lazy Load WordPress Eklentileri tarafından yapılır. Bu konuda size daha fazla bilgi vermek için en iyi WordPress Lazy Load eklentilerinin bir listesini derledik

# Lazy Load by WP Rocket Eklentisi

Bir gönderideki resimlerde, küçük resimlerde ve ayrıca widget metnindeki, avatarlardaki, iframe’lerdeki ve suratlardaki resimlerde çalışır. Ayrıca, web sitesinin yükleme süresini daha da hızlandırabilmeniz için YouTube iframe’lerini bir önizleme küçük resmiyle değiştirmenize olanak tanır.

#A3 Lazy Load Eklentisi

Performansı artıran ve bir web sitesini hızlandıran mobil odaklı bir eklentidir. Web sitesinin hangi öğelerinin tembel yüklenmesi gerektiğini ve ne zaman görünür hale geleceğini seçebildiğiniz için kurulumu kolaydır. Bu eklenti tembel, resimleri yazılarınıza, sayfalarınıza, widget’larınıza, küçük resimlerinize, gravatarlarınıza ve diğer içerik alanlarına yükler. Resimlerinizi, videolarınızı, iframe’inizi, gömme yayınınızı, WordPress AMP’nizi ve Gelişmiş Özel Alanlarınızı tembelce yükler.

# JCH Optimize Eklentisi

JCH Optimize eklentisi, özel bir tembel yük WP eklentisi değildir, ancak aynı işlevselliği sağlar. JCH Optimize, web sitenizin hızını artıran ve birçok optimizasyon seçeneği sunan, özellik dolu bir eklentidir. Toplam HTTP isteklerini azaltmak için CSS/JS dosyalarını birleştirir ve ayrıca HTML’nizi küçültür. Bu WordPress hız optimizasyonu eklentisi, web sitesi optimizasyonunun gücüyle resimlerinizi tembelce yüklemenize izin veren tek tıklamayla kurulum özelliğidir.

Lazy Loader Eklentisi

Bu, görüntülerin, videoların, ses öğelerinin ve iFrame’lerin tembel yüklenmesini de destekleyen başka bir ücretsiz ve basit tembel yükleme WP eklentisidir. Hafif tembel boyutlu bir komut dosyası kullanır. Ayrıca, işaretlemenin manuel olarak değiştirilmesinin yardımıyla arka plan resimlerinin, stillerin ve komut dosyalarının tembelce yüklenmesine izin verir. Bu eklenti, tembel yükü etkinleştirmenize veya devre dışı bırakmanıza kolayca yardımcı olmak için birkaç tembel yükleme seçeneğiyle birlikte gelir.

# Speed Up- Lazy Load Eklentisi

Hızlandırma eklentisi tembel yükleme tekniğini uygular ve sayfanın alt kısmındaki resimler gibi ekranda görünmeyen resim ve iframe’lerin kullanıcı tarafından gösterilmesini isteyinceye kadar indirilmesini engeller. Bu, sayfaların yüklenme hızında iyileştirmeler sağlar ve bant genişliğinden tasarruf sağlar.

# WordPress Infinite Scroll- Ajax Load More Eklentisi

Bu tembel yükleme WordPress eklentisi, Ajax destekli sorguların yardımıyla tembel yükleme sayfaları, gönderiler, tek gönderiler, yorumlar vb. içindir. Ajax Daha Fazla Yükle, sonsuz kaydırma için özel olarak tasarlanmıştır. Bu eklenti bir Ajax Daha Fazla Kısa Kod Oluşturucu ile birlikte gelir. Özel WordPress Sorguları oluşturmak için kullanılabilir. Bu eklenti, WooCommerce ve Easy Digital Downloads ile de uyumludur. Bu eklentinin diğer özellikleri arasında Sorgu Parametresi, Tekrarlayıcı Şablonları, Çoklu Örnekler, Ajax Filtreleme ve daha fazlası bulunur.