Lazy Load, sözcük anlamı itibariyle “tembel yükleme – işten kaçınma” demektir. Daha çok e – ticaret sitelerinde kullanım alanı bulan lazy load, web site performansını artırmak ve sistem kaynaklarını kurtarmak amacıyla nesnelerin yüklenmesini geciktirmek işlemi için başvurulan uygulamadır. Bu uygulama, bir web sitenin tüm içerikleriyle birlikte görüntülenmesinin zaman alıcı olması ve dolayısıyla can sıkıcı bir durum olmasına karşın pratik bir çözüm olarak karşımıza çıkar.
Web sitenin tam anlamıyla yüklenmesi için geçen süre, genellikle görsellerin yüklenmesi için kullanılır. Web sitede bulunan yüzlerce görsel, e – ticaret sitesi gibi hacimli sitelerde binlerce görsel içerik yüklenirken hayli gecikme yaşanır. Bu durum, kullanıcıların web site deneyimini önemli ölçüde düşürür. Hiçbir web site sahibi veya yöneticisi, yavaş yüklenen ve kullanıcı deneyimi açısından son derece başarısız bir web siteye sahip olmak istemez.
Web sitelerin yavaş yüklenmesinin önüne geçmek, tüm içeriklerin yüklenmesi için gereken süreyi kısaltmak için web sitede yer alan görsel içeriklerin sayısını azaltmak kalıcı bir çözüm olmadığı gibi başarılı sonuçlar da vermeyecektir. İşte bu noktada lazy load işlemine başvurulur. Bu çalışma sayesinde, çalışmaya konu web sitesinin yüklenme süresinde önemli ölçüde iyileştirmeler sağlanırken ziyaretçilerin edindiği deneyimde de ivmeli bir artış sağlanır.
Bazı web siteleri görsel içerik açısından yoğun ve uzun sayfa yapısına sahiptir. Özellikle e – ticaret siteleri, bu tür sitelere örnek olarak verilebilir. Söz konusu siteler, yapısı nedeniyle daha geç yükleneceği için kullanıcı deneyimini önemli ölçüde düşürür ki bu durum, hiçbir web site sahibi veya yöneticisi tarafından istenmez. Bu noktada, sayfaların daha hızlı açılmasını sağlamak, bu sayede kullanıcı deneyimini artırmak amacıyla ek bir JavaScript dosyasına başvurulur.
Lazy load işlemi, site yüklenme hızını artıran ve bunun için bant genişliği tasarrufunda bulunan pratik bir uygulamadır. Lazy load’a ilişkin yalın bir tanımlama yapmak gerekirse; gereksinim duyulmayan bir nesnenin çağrılmaması olarak ifade edilebilir. Lazy load işlemi sayesinde, kullanıcı tarafından açılan bir web sayfasında tüm görsel içeriklerin yüklenmesinin önüne geçilerek ilgili sayfanın daha hızlı açılması ve bu sayede kullanıcının gereksiz vakit kaybı yaşamasına engel olunur.
Google, kullanıcılarına önem veren, kullanıcıların deneyimlerini önemseyen ve arama sonuç sayfalarında sıralama yaparken kullanıcı deneyimi yüksek web sitelerini daha üst sıralarda konumlandıran popüler arama motorudur. Web sitesinin daha başarılı bir sıralamaya sahip olmasını isteyen site yöneticileri, web sitelerini ziyaret eden Google kullanıcılarının nasıl bir deneyim edindiğini önemsemeli ve bu deneyimi artırmak adına web site hızında iyileştirmeler yapmalıdır.
Lazy load kullanımı, ilgili web sayfasında bulunan görsel içeriklerin tamamının aynı anda yüklenmesine engel olur ve bu nedenle sayfanın yüklenme süresini önemli ölçüde düşürür. Bu da kullanıcı deneyiminde ciddi bir artış sağlar. Lazy load uygulaması sayesinde, web sayfasında bulunan görseller bir anda ve tamamen değil, kullanıcı aşağı indikçe yüklenir. Başta web site hızını ve kullanıcı deneyimini artıran lazy load uygulamasının diğer faydaları şu şekilde sıralanabilir:
Lazy load metodu; JavaScript ve HTML için manuel bir şekilde nitelik (attribute) özelliği kullanılarak yapılabilir. Metot uygulanırken ilk olarak;
Sıralanan adımları takip ettikten sonra, aşağıda yer alan tablodaki talimatları uygulayın.
| HTML | <img class="lazy" data-src"image path" /> | |
| CSS | .lazy{ .text-area{ | |
| 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’)); } }); }) }) |
Lazy load uygulaması sayesinde web sitelerin daha hızlı görüntülenmesi ve bu sayede kullanıcı deneyiminin iyileştirilmesi mümkündür. Faydalarına ve nasıl uygulanabileceğine değindiğimiz içeriğimizde, WordPress tabanlı web siteleri için kullanılabilecek lazy load eklentilerini sıralayalım:
Lazy load, oldukça pratik bir metot olup son derece basit bir kullanıma sahiptir. Lazy load uygulaması sayesinde birçok önemli avantaj elde edilir. Ancak, uygulamanın yanlış veya hatalı kullanılması çeşitli sorunları beraberinde getirecektir. Bu nedenle, doğru kullanım talimatlarına uygun hareket etmek en doğru yaklaşım olacaktır. Lazy load işlemine konu edilecek web site seçimi son derece önemlidir. Bu uygulama, görsel içerik sayısının fazla olduğu sitelerde tercih edilmelidir.
Lazy load çalışmasında dahili tarayıcı özelliği kullanılmamalıdır. Şayet dahili tarayıcı özelliği kullanılırsa geliştirme ve test süresi uzayacaktır. Eksiksiz ve hatasız bir yapı kurulmasına özen gösterilmelidir. Aksi takdirde, ziyaretçiler yanlış içeriklere yönlendirilir. Oldukça basit kullanılan ve pratik bir metot olan lazy load’a ilişkin dikkat edilmesi gereken hususlar da bu şekilde. Tüm bunları gözeterek hareket etmeniz halinde oldukça sağlıklı sonuçlar elde edebilirsiniz.
