Merhaba,
Her fırsatta bahsettiğim gibi web projelerimizde öncelikli işimiz, kullanıcılara hizmet sağlayabilmek amma bu hizmeti olabildiğince performanslı bir şekilde sağlayabilmektir. Bir web sitesinin işleyişi, hizmeti, sınırları ve özellikleri her ne kadar geniş ve zengin olsada, hız bakımından performanslı olmadığı sürece o proje yarı ölü projedir. İşte bu durumda biz yazılımcılara iki görev düşmekte; birincisi, web projelerinde performansı olumsuz etkileyen faktörleri tespit edebilmek ve ikincisi, bunlara çözüm üretebilmektir.
Bu makalemizde performans aleyhine işleyen birçok faktörden sadece birisi olan web sitemizin içeriğinde yahut herhangi bir yerinde kullanılan resimler üzerinde konuşuyor, odaklanıyor ve çözüm üretiyor olacağız.
Biliyorsunuz ki, girdiğimiz web sitelerinin yavaş yüklenmesinin en mühim kaynaklarından birisi ilgili sitede özellikle büyük boyutlu resimlerin yarattığı yükleme boşluğudur. Bu problem yükleme sırasında oluşturduğu trafikten kaynaklı sitenin yavaş açılmasına ve genellikle kullanıcı kaybına sebep olmakta ve hatta SEO vs. gibi bir sitenin beşeriyetteki derecesinde bile olumsuz etki bırakmaktadır. Haliyle biz yazılımcılar üzerinde çalıştığımız web projelerinin asla ve kat’a bu şekilde bir handikapın eşiğinde olmasını istemeyiz.
Peki ne yapacağız? sorunuzu duyar gibiyim… Bir çok yöntem, düşünce, fikir yahut teknik ortaya koyabiliriz. Şimdi sizlere bunlardan sadece bir tanesini(amma dünyada en çok tercih edileni) sunacağım. Lazy Load yöntemi. Bu yöntem sayesinde web sitemizde bulunan resimlerin hepsini tek çelsede yüklemekten ziyade, ihtiyaç oldukça yükleyecek ve bu işlemi jQuery eşliğinde Client tarafında gerçekleştireceğiz.
Daha da detaylandırmak gerekirse, web sitemizde bulunan resimleri kâh sayfada gördükçe, kâh üzerine tıkladıkça veyahut kâh kendi belirlediğimiz durumlarda yükleyecek, bu şekilde işimiz olmayan resimlerin yüklenmesini beklemeyecek, ee haliyle sitenin açılma süresini uzatmamış olacak, performansı spontane olarak gerektiği yerde kullanmış olacağız.
Şimdi dilerseniz ufak örneklendirmeyle Lazy Load yöntemini pratikleştirelim.
Öncelikle bu yöntem için jquery.lazyload.js dosyasını indiriniz.
İlk yapmamız gereken indirmiş olduğunuz jquery.lazyload.js dosyasını projenize entegre ediniz.
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.lazyload.js"></script>
Ardından resimler üzerinde aşağıdaki çalışmayı genelleyin, gerçekleştirin.
<img class="lazy " alt="Resim Açıklaması" src="{Yükleniyor Resmi}" data-original="{Orjinal Resim}" />
Burada dikkat etmemiz gereken “src” ile “data-original” attributelarıdır.
-
src
Orjinal resim yüklenene kadar gösterilecek resmi ayarlıyoruz. -
data-original
Orjinal resmimizi veriyoruz.
Ve son olarak body tagını kapatmadan önce aşağıdaki jQuery kodlarını yazıyoruz.
<script type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload();
});
</script>
Bu işlemden sonra sayfanızdaki resimlerin hepsi bodoslama yüklenmeyecek, sayfada gözüktükçe yüklenecektir.
Şimdi aşağıda bütün olarak örnek bir Lazy Load işleminin uygulandığı sayfa paylaşalım ve ardından video ile nasıl sonuç aldığımızı inceleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.lazyload.js"></script>
</head>
<body>
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0011.jpg" width="500" heigh="500" />
<br />
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
<br />
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
<br />
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0042.jpg" width="500" heigh="500" />
<br />
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
<br />
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
<br />
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0044.jpg" width="500" heigh="500" />
<br />
<img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0045.jpg" width="500" heigh="500" />
<script type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload();
});
</script>
</body>
</html>
Gördüldüğü üzere Lazy Load yöntemiyle resimlerimizi tek çelsede değil, sayfada gözükçe yüklemekteyiz.
Bunun dışında Lazy Load yöntemine belli başlı ayarlamalar çekebilmekteyiz. Şimdi gelin bu ayarları inceleyelim.
Resim Eşiğini Ayarlama
Lazy Load yöntemiyle yüklenecek resmin alt limitini ayarlayabilmekte, haliyle performansı kasmayacak derecedeki resimleri anlık olarak önceden yükletebilmekteyiz. Bu işlem için “threshold” propertysini kullanmaktayız. Verilen değer piksel cinsinden değerlendirilmekte ve işlem yapılmaktadır.
<script type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
threshold: 200
});
});
</script>
Olay İle Yükleme
Biz makalemizde resimler sayfada görüldüğü anda yüklemeyi gerçekleştirdik. Bunun dışında resimlerin yüklenmesini herhangi bir olaya bağlayabiliriz. Bu işlem için “event” parametresini kullanmamız yeterlidir. “event” özelliği; “click”, “mouseover”, “sporty”, “foobar” vs. değerlerini alabilir.
Örneğin aşağıdaki uygulama ile üzerine tıklanan resim serverdan yüklenecektir.
<script type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
event: "click"
});
});
</script>
Efekt Kullanımı
Lazy Load esnasında efekt belirtebiliriz. “effect” özelliği ile “fadeIn” yahut “show” gibi parametrelerle çalışmaktadır.
Aşağıda görüldüğü üzere “click” eventıyla, “fadeIn” efektiyle çalışmasını belirtmiş oluyoruz.
<script type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
event: "click",
effect: "fadeIn"
});
});
</script>
Evet… Görüldüğü üzere Lazy Load yöntemiyle web sitemizdeki resimleri daha performanslı bir şekilde yükleyebilmekte ve hızımıza hız katmaktayız. Bu şekilde büyük bir sorun olan resimleri boyutları önemsemeksizin siteyi kasmadan yükleyebiliyor, kaliteli ve kullanıcı dostu bir site inşa edebiliyoruz.
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…