Lazy Load nedir? Nasıl uygulanır? İşte 6 kolay yöntem

Lazy Load, web sayfalarının yavaş yüklenme sorununu çözen bir tekniktir. Sayfa üzerindeki içerik, kullanıcının ihtiyaç duyduğu anda yüklenir, böylece sayfa yüklenme hızı artar. Lazy Load’un 6 kolay yöntemiyle uygulanmasını öğrenin ve web sitenizin performansını artırın.

Görüntüler, bir web sitesinin toplam boyutunun genellikle %50'sinden fazlasını oluşturur ve kendi web sitenizi incelediğinizde benzer bir durumu fark edebilirsiniz. Sayfa yükleme sürelerini önemli ölçüde iyileştirmek için öncelikle resimlerinizle ilgilenmek mantıklıdır. Bu, düşük hemen çıkma oranları ve daha yüksek Google sıralamaları gibi birçok fayda sağlar.

Online Resim Optimize Edici gibi araçlar, büyük resimlerinizin boyutunu önemli bir kalite kaybı olmadan azaltmanıza yardımcı olur. Ancak, resimler hala web sayfasının yüklenme sürecinde ağırlık oluşturur. İşte devreye Lazy Load yani tembel yükleme girer. Bu yöntem, web sayfasının yüklenirken sadece görünen resimlerin eşzamanlı olarak yüklenmesini veya koşullu olarak yüklenmesini sağlar. Yani, kullanıcı sayfayı aşağı doğru kaydırmadıkça bazı resimler hiç yüklenmez. Bu, birçok web sitesinde karşılaştığımız bir tekniktir.

Lazy Load, bir ögenin sayfada ihtiyaç duyulmadığı durumlarda çağrılmaması veya yüklenmemesi prensibiyle çalışır. Bu yazıda, resim yükleme için en iyi 6 Lazy Load yöntemini basit ve otomatik olarak uygulayabileceğiniz şekilde inceleyeceğiz. Bu yöntemlerle web sitenizin performansını kolaylıkla artırabilirsiniz.

Web sitenizde JavaScript kullanarak basit bir Lazy Load yöntemi uygulayabilirsiniz. İşte adımlar:

1. İlk olarak, web sitenizin HTML dosyasında, yüklemek istediğiniz resimlerin src özelliğini boş bırakın veya bir yer tutucu görüntü atayın.

2. Ardından, Intersection Observer API'sini kullanarak resimlerin görünüp görünmediğini takip edecek bir JavaScript kodu ekleyin.

3. JavaScript kodunda, Intersection Observer'a bir callback fonksiyon atanacak. Bu fonksiyon, gözlemlediğimiz resimlerin ekrana girdiği anda tetiklenecek.

4. Callback fonksiyonunda, resimlerin data-src veya benzeri bir özelliğinde gerçek resim URL'si tutulacak. Bu özelliğe gerçek URL atanmayacak, çünkü resimleri asenkron olarak yükleyeceğiz.

5. Resimler ekran görüntüsüne geldiğinde, JavaScript kodunda src özelliği resim URL'siyle güncellenecek. Böylece resimler görüntülenecek ve yüklenmiş olacak.

Bu yöntem, sayfa yükleme sürelerini iyileştirerek resimlerin sadece görüntülendiği zamanda yüklenmesini sağlar. Ayrıca, kullanıcılar sayfayı aşağı kaydırmadan önce gereksiz yere resimlerin yüklenmesini engeller.

Unutmayın, Lazy Load yöntemini uygulamak için JavaScript kullanmanız ve tarayıcıların `Intersection Observer` API'sini desteklemesi gerekmektedir.

İlk Lazy Load yöntemi sadece 7 satır JavaScript kodundan oluşur ve sayfanın ilk açılma süresini optimize etmek için yeterlidir. Yüklenmesi ertelenmesini istediğiniz resimlerin `src` özelliğini boş bırakın veya yükleme simgesi gösteren bir değerle değiştirin. Ardından, gerçek resim yolunu `data-src` gibi özel bir etikete tanımlayın. Böylece resimler otomatik olarak yüklenir ve sayfa yükleme süreleri iyileştirilir.

Yüklenmesini ertelemek istediğiniz görüntülerin "src" etiketini boş bırakın veya yükleme simgesi gösterecek şekilde değiştirin ve sonradan yüklenmesi gereken gerçek görüntü yolunu "data-src" gibi özel bir etikete tanımlayın:

src="empty.webp" data-src="img/photo.webp"

Yukarıdaki ilk img etiketindeki orijinal "src" özelliği basitçe Base 64 şeffaf bir gif'i işaret ediyor. Ardından, sayfadaki tüm resimleri taramak ve sayfa tamamen yüklendikten sonra tanımlanmış bir data-src özniteliğine sahip olanları Lazy Load olarak yüklemek için sayfanızın altına aşağıdaki JavaScript'i ekleyin:

window.addEventListener('load', function(){
    var allimages= document.getElementsByTagName('img');
    for (var i=0; i         if (allimages[i].getAttribute('data-src')) {
            allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
        }
    }
}, false)

Bu optimizasyonun temel amacı, sayfa yüklendikten sonra gerçek resimleri yüklemektir. Görüntüleri sayfa yüklenmesinden sonra eşzamanlı olarak yükleyerek, sayfa açılma hızını artırır.

Ancak, bu tekniğin dezavantajı, görüntülerin görünüp görünmemesine bakılmaksızın sayfadaki her görüntünün yine de yüklenmesidir. Bu durumda, gereksiz veri transferi gerçekleşebilir.

Echo.js, web sayfalarında tembel yükleme (lazy loading) işlemini gerçekleştiren bir JavaScript kütüphanesidir. Tembel yükleme, sayfa yüklendiğinde görüntülerin veya diğer medya öğelerinin sadece görünür hale geldiğinde yüklenmesini sağlayarak sayfa performansını artırır.

Echo.js, küçük bir boyuta sahip (1 KB) ve jQuery veya başka bir bağımlılık gerektirmez. Bu nedenle, hafif ve bağımsız bir şekilde kullanılabilir. Echo.js, tarayıcının "Intersection Observer" API'sini kullanarak görüntülerin görülebilirlik durumunu izler ve yüklemeyi başlatır.

Echo.js, resimlerin "src" özelliğini boş bırakarak veya yüklenme simgeleri göstererek yükleme işlemini geciktirebilir. Ardından, gerçek görüntü yollarını "data-src" gibi özel bir özellikle belirtir. Bu şekilde, görüntüler yalnızca tarayıcının penceresinde görüntülendiğinde yüklenir.

Echo.js'in avantajlarından biri, küçük boyutu ve bağımlılık gerektirmemesidir. Ayrıca, kaydırılabilir div içindeki görüntülerle de uyumludur. Ancak, Echo.js'in kendine özgü bir görüntü geçişi veya yükleme animasyonu yoktur.

Özetlemek gerekirse, Echo.js basit, hafif ve bağımsız bir tembel yükleme kütüphanesidir. Sayfa performansını artırmak ve kullanıcıların daha hızlı bir şekilde içeriğe erişmesini sağlamak için kullanılabilir.

bLazy, web sayfalarında tembel yükleme (lazy loading) işlemini gerçekleştirmek için kullanılan bir JavaScript kütüphanesidir. Görüntülerin veya diğer medya öğelerinin sadece görüş alanına girdiğinde yüklenmesini sağlar, böylece sayfa yükleme süresini optimize eder ve kullanıcı deneyimini iyileştirir.

bLazy, hafif ve basit bir kütüphanedir. Başka bir JavaScript kütüphanesine veya bağımlılığa ihtiyaç duymaz, bağımsız olarak kullanılabilir. Tarayıcının "Intersection Observer" API'sini kullanarak görüntülerin görünürlük durumunu izler ve yükleme işlemini başlatır.

Kullanımı oldukça kolaydır. Görüntüleri tembel olarak yüklemek istediğiniz HTML elemanlarının "src" özelliğini boş bırakarak veya yüklenme simgeleri ile değiştirerek başlayabilirsiniz. Ardından, gerçek görüntü yolunu "data-src" gibi özel bir özellikle belirtirsiniz. bLazy, sayfa kaydırıldıkça veya görüntü alanı görünür hale geldikçe bu görüntüleri otomatik olarak yükler.

bLazy'nin avantajlarından biri, basit ve hafif olmasıdır. Görüntülerin akıllıca yüklenmesini sağlar, böylece sayfa performansını iyileştirir ve veri kullanımını azaltır. Ayrıca, resimlerin yanı sıra arka plan görüntüleri ve iframeler gibi farklı içerik türlerini de destekleyebilir.

BLazy, Echo.js'den biraz daha büyük olmasına rağmen (1.6kb), bu ekstra boyutlar sayesinde birçok ek özellik elde edersiniz. Görüntüleri ve arka plan görüntülerini tembel olarak yüklemenin yanı sıra, cihaz boyutlarına göre farklı tembel görüntüler sunabilirsiniz. Örneğin, 480 piksel veya daha küçük cihazlar için bir görüntü ve 720 piksel veya daha küçük cihazlar için başka bir görüntü. Ayrıca, retina özellikli cihazlar için yüksek çözünürlüklü görüntüler de yükleyebilirsiniz. Bu yöntem aynı zamanda kaydırılabilir div konteynerlerinde de tembel yükleme işlevini yerine getirebilir.

Bu tekniğin avantajları arasında, 1.6 kb boyutunda dosya yapısına sahip olması ve jQuery gibi kütüphane bağımlılığı olmaması bulunmaktadır. Lazy Load görüntü yükleme özelliğine ek olarak, farklı cihaz genişliklerine ve retina cihazlarına özel görüntüler sunabilme yeteneği de bulunmaktadır.

Özetlemek gerekirse, bLazy, kullanıcıların daha hızlı bir şekilde içeriğe erişmesini sağlamak ve sayfa performansını artırmak için kullanılan hafif ve basit bir tembel yükleme kütüphanesidir.

jQuery Lazy, web sayfalarında tembel yükleme (lazy loading) işlemini gerçekleştirmek için kullanılan bir jQuery eklentisidir. Bu eklenti, jQuery kütüphanesine bağımlı olduğu için kullanmadan önce jQuery'nin sayfaya dahil edilmesi gerekmektedir.

jQuery Lazy, görüntülerin veya diğer medya öğelerinin sadece görüntülenecekleri zaman yüklenmesini sağlar. Sayfa açıldığında tüm görüntülerin yüklenmesi yerine, kullanıcının sayfayı kaydırdıkça veya görüntü alanı görünür hale geldikçe görüntüleri otomatik olarak yükler. Bu, sayfa yükleme süresini optimize eder, veri kullanımını azaltır ve kullanıcı deneyimini iyileştirir.

Kullanımı oldukça kolaydır. jQuery Lazy eklentisi, tembel yüklemeyi etkinleştirmek istediğiniz görüntülerin veya medya öğelerinin seçicisini belirtmenizi sağlar. Örneğin, belirli bir sınıfa veya etikete sahip tüm görüntülerin tembel yüklemesini etkinleştirebilirsiniz.

Eklenti, kullanıcının sayfayı kaydırdıkça veya görüntü alanı görünür hale geldikçe yükleme olaylarını algılar. Yükleme olayları tetiklendiğinde, belirtilen görüntülerin "src" özelliğine gerçek görüntü yolunu atar ve yükleme işlemini başlatır.

jQuery Lazy'nin avantajlarından biri, jQuery kütüphanesine dayanması nedeniyle jQuery'nin diğer özelliklerinden ve eklentilerinden faydalanabilmenizdir. Ayrıca, eklenti, tembel yükleme işlemini özelleştirmek için çeşitli seçenekler sunar. Örneğin, yükleme animasyonu, geçiş efektleri veya farklı yükleme gecikmeleri gibi özellikleri ayarlayabilirsiniz.

Özetlemek gerekirse, jQuery Lazy, jQuery kütüphanesine dayanan ve tembel yükleme işlemini gerçekleştirmek için kullanılan bir eklentidir. Sayfada görünen öğelerin yalnızca ihtiyaç duyulduklarında yüklenmesini sağlar ve sayfa performansını artırır.

jQuery Lazy, kompakt bir jQuery Lazy Image eklentisidir (1.27kb boyutunda) ve yukarıdaki komut dosyalarından farklı şekillerde ayrılır. Bu eklentinin en dikkat çekici özelliği, görüntüleri hem yatay hem de dikey olarak tembel olarak yükleyebilme yeteneğidir, özellikle kaydırılabilir yatay bir "carousel" gibi durumlarda faydalı olabilir. Ayrıca eklenti diğer içerik türleri (Iframe, JavaScripts, ses, video vb.) için tembel yükleme yeteneğine sahip ek isteğe bağlı eklentilerle birlikte gelir (toplamda 2.27kb başka bir eklenti). Son olarak, eklentilerin CDN tarafından barındırılan sürümleri mevcuttur, bu nedenle sunucunuza herhangi bir dosya yüklemeniz gerekmez.

Bu yöntemin avantajları arasında, jQuery kullanıyor olmanız durumunda kolay entegrasyon sağlaması ve ekstra özellikler sunması bulunmaktadır. jQuery Lazy eklentisi, hem resimler hem de diğer içerik türleri için tembel yükleme yeteneğine sahip olmasıyla esnek bir çözüm sunmaktadır.

Lazy Load XT jQuery, web sayfalarında tembel yükleme (lazy loading) işlemini gerçekleştirmek için kullanılan bir jQuery eklentisidir. Bu eklenti, jQuery kütüphanesine bağımlı olduğu için kullanmadan önce jQuery'nin sayfaya dahil edilmesi gerekmektedir.

Lazy Load XT jQuery, sayfa açıldığında görüntülerin veya diğer medya öğelerinin tamamını yüklemek yerine, yalnızca ihtiyaç duyulan görüntülerin yüklenmesini sağlar. Kullanıcının sayfayı kaydırdıkça veya görüntü alanı görünür hale geldikçe, görüntüler otomatik olarak yüklenir. Bu, sayfa yükleme süresini azaltır, veri kullanımını optimize eder ve kullanıcı deneyimini iyileştirir.

Kullanımı oldukça basittir. Lazy Load XT jQuery eklentisi, tembel yüklemeyi etkinleştirmek istediğiniz görüntülerin veya medya öğelerinin seçicisini belirtmenize olanak tanır. Seçicileri kullanarak, belirli bir sınıfa, etikete veya diğer özelliklere sahip görüntülerin tembel yüklemesini ayarlayabilirsiniz.

Eklenti, sayfa kaydırıldıkça veya görüntü alanı görünür hale geldikçe yükleme olaylarını algılar. Yükleme olayları tetiklendiğinde, belirtilen görüntülerin "src" özelliğine gerçek görüntü yolunu atar ve yükleme işlemini başlatır.

Lazy Load XT jQuery'nin birçok özelliği vardır. Örneğin, cihaz genişliğine veya retina özellikli cihazlara göre farklı görüntüler sunabilme, varsayılan yükleme animasyonunu ayarlama, görüntü geçiş efektleri ekleyebilme gibi seçeneklere sahiptir. Ayrıca, eklenti ile diğer içerik türlerini de tembel yüklemeye ekleyebilirsiniz, böylece Iframe'ler, JavaScript'ler, ses ve video gibi öğeler de tembel olarak yüklenebilir.

Lazy Load XT, yaklaşık 3 kb boyutunda bir Lazy Load eklentisidir. Kaydırılabilir içerikler, hem dikey hem de yatay düzenler ve "sonsuz kaydırma" kurulumları içinde tembel yükleme görüntülerini destekler. Görüntüler yüklenirken varsayılan bir animasyon göstermek isterseniz, sadece başka bir .css dosyasına başvurmanız yeterlidir. Animate.css, Lazy Load XT ile birlikte çalışarak sayısız efekt sağlar. Ayrıca, cihaz boyutuna göre farklı görüntüler sunmak için "response image" eklentisini kullanabilirsiniz.

Özetlemek gerekirse, Lazy Load XT jQuery, jQuery kütüphanesine dayanan ve tembel yükleme işlemini gerçekleştirmek için kullanılan bir eklentidir. Görüntülerin yalnızca ihtiyaç duyulduklarında yüklenmesini sağlar ve sayfa performansını artırır. Ek olarak, çeşitli özelleştirme seçenekleri sunar ve diğer içerik türlerini de tembel olarak yükleyebilme yeteneği sağlar.

a3 Lazy Load, WordPress tabanlı web sitelerinde kullanılan bir Lazy Load eklentisidir. Bu eklenti, sayfa yükleme süresini iyileştirmek için resimleri tembel yüklemeyi sağlar. a3 Lazy Load, kullanıcının web sitesini ziyaret ettiğinde sadece görünür olan resimleri yükler ve diğer resimleri sayfayı aşağı kaydırdıkça yükler. Böylece, sayfa açılış hızı artar ve bant genişliği kullanımı azalır.

a3 Lazy Load, özellikle büyük resimlerin olduğu web sitelerinde etkilidir çünkü bu tür resimler sayfa yükleme süresini olumsuz etkileyebilir. Eklenti, resimlerinizi otomatik olarak tembel yükler ve kullanıcılar sayfayı kaydırdıkça görüntüleri eşzamanlı olarak yükler. Bu, kullanıcıların hızlı bir şekilde sayfaya erişmesini sağlar ve buna bağlı olarak site performansını artırır.

a3 Lazy Load, WordPress admin panelinden kolayca yapılandırılabilir ve özelleştirilebilir. Eklenti, resimlerin yanı sıra iframe'leri, videoları ve diğer içeriği de tembel yükleme özelliğiyle destekler. Ayrıca, resimlere geçiş efektleri eklemek veya yükleme göstergeleri kullanmak gibi ek özellikler sunar.

Bu eklenti, sitenizin yükleme sürelerini iyileştirmek ve kullanıcı deneyimini optimize etmek için Lazy Load teknolojisini kullanmanızı sağlar.

Sonuç olarak, Lazy Load, web sayfalarının yükleme sürelerini iyileştirmek ve kullanıcı deneyimini optimize etmek için kullanılan bir tekniktir. Görüntülerin sadece görüntüleneceği zaman yüklenmesini sağlayarak sayfa performansını artırır. Bu yazıda, 5 farklı kolay yöntemle Lazy Load'ın nasıl uygulanabileceğini gördük.

Görüntülerinizi optimize etmek, hemen çıkma oranlarını azaltmak ve Google sıralamalarını yükseltmek gibi pek çok fayda elde etmek için Lazy Load yöntemini kullanabilirsiniz. JavaScript, jQuery veya hazır eklentiler gibi çeşitli yöntemlerle bu teknolojiyi uygulamak mümkündür.

Sitenizin hızını artırmak ve kullanıcıların daha iyi bir deneyim yaşamasını sağlamak için Lazy Load'ı düşünmek kesinlikle mantıklı bir adımdır. Bu yöntemlerin her birini uygulayarak web sitenizin performansını iyileştirebilir ve kullanıcılarınızın daha hızlı bir şekilde içeriğe erişmesini sağlayabilirsiniz.

Lazy Load'ın gücünden faydalanarak, web sitenizi daha etkileyici ve verimli hale getirebilirsiniz. Unutmayın, kullanıcıların beklentilerini karşılamak ve rekabetçi bir çevrede öne çıkmak için sürekli olarak performans optimizasyonu yapmanız önemlidir.