Web sitenizin hızı hem kullanıcı deneyiminin hem de SEO performansının önemli bir unsurudur. Web sitenizdeki bir web sayfasına giren kullanıcılar sayfanın hızlı bir şekilde yüklenmesini beklerler. Eğer sayfa yüklenme süresi 3 saniyeyi aşarsa kullanıcılar web sitenizden ayrılabilir ve rakiplerinize yönelebilir. Bu da işletmenizin, blogunuzun veya farklı türde bir dijital platformunuzun gelir kaybetmesine sebebiyet verebilir.
Peki web sitenizin hızını nasıl artırabilirsiniz? İşte burada Lazy Loading, yani tembel yükleme devreye girer. Lazy Load, web sayfasındaki görsel ve medya dosyalarının sadece ekranda göründüğünde yüklenmesini sağlayan bir tekniktir. Bu teknik sayesinde web sayfasının tamamı yüklenmek zorunda kalmaz ve böylece yüklenme süresi kısalır.
Lazy Load Nedir?
Web sitenizde html, php, css, js, resimler, videolar gibi farklı türde dosyalar kullanıyorsanız bu dosyaların sitenizin performansını etkileyebileceğini bilmelisiniz. Özellikle resimler ve videolar gibi büyük boyutlu dosyaların yüklenmesi ziyaretçilerinizin beklemek istemeyeceği kadar zaman alabilir.
Sitenize gelen ziyaretçiler bir sayfayı açtığında sayfadaki içerik yüklenmeye başlar. Tarayıcı bu içeriği önbelleğe alır. Fakat önbelleğe alınan veriler, her kullanıcının sayfadaki her şeyi gördüğü anlamına gelmez.
Sayfanın yüklenmesi uzun sürüyorsa kullanıcılarınız daha fazla beklemek yerine büyük olasılıkla sayfanızı terk edecektir. Bilgi teknolojisi çağında insanlar hızlı bir şekilde bilgi edinmek veya daha hızlı bir kaynak bulmak isterler. Bu yüzden web sitenizin hızlı yüklenmesi modern web kaynaklarının temel bir gereksinimidir.
Bu sorunu çözmek için lazy load kullanımına başvurabilirsiniz. Lazy load sayfada sadece ihtiyaç duyulan içeriği yükler. Kullanıcı sayfayı aşağı kaydırdıkça sayfanın alt kısmı yerine gerçek içerik yüklenir. Böylece sayfanın tüm içeriğini tek seferde yüklemezsiniz. Kullanıcılar sayfayı aşağı kaydırdıkça yüklenir.
Lazy load, tüm içeriğinizi tek seferde indirmek yerine tercih edebileceğiniz bir seçenektir. Web sitenizin tamamını beklemek zorunda kalmadan hedef kitleniz bilgilere daha hızlı ulaşabilir. Sayfanız sadece gerektiğinde yüklenir. Lazy load, site hızının artmasına ve hemen çıkma oranının azalmasına yardımcı olur. Bu da SEO tanıtımınız için olumlu bir etki yapar.
Lazy load, javascript kodundan veya özel eklentilerden yararlanarak uygulanabilir. Görsellere lazy load uygulamak için img etiketinin src özelliğini data-src olarak değiştirmek ve javascript kodu ile src'yi data-src ile değiştirmek yeterlidir.
Lazy Load Nasıl Kullanılır?
Komut Dosyası ile Lazy Load Kullanımı
Lazy Load uygulamak için bir komut dosyası kullanabilirsiniz. Bu komut dosyası, img etiketlerinin src özniteliklerini data-src ile değiştirir. Örneğin:
<img data-src=“image.jpg” alt=“test image”>
Bu img etiketleri CSS'de şöyle tanımlanır:
img[data-src] { opacity: 0; } img { opacity: 1; transition: opacity 0.3s; }
JavaScript ile data-src özniteliği olan img etiketlerinin src özniteliği verilir. Bu şekilde görüntüler yüklendikçe sorunsuz bir şekilde görünür hale gelirler.
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); }; });
Eğer JS çalışmazsa, komut dosyasında bir fallback mekanizması vardır. Ancak bu durumda lazy load özelliği devre dışı kalır ve siteyi ziyaret eden herkes tüm görüntüleri yükler.
Eklenti ile Lazy Load Kullanımı (Lazy Load XT)
Lazy Load XT, bir JavaScript/jQuery eklentisi olan lazy load özelliği sağlayan bir araçtır. Lazy load XT eklentisi, web sitesi sayfalarını hızlandırmak için kullanılan bir eklentidir. Bu eklenti sayfanın ilk yüklenmesinde sadece ekranın içinde kalan görüntüleri yükler. Sayfada aşağı veya yukarı kaydırma yaparken ekranın dışında kalan görüntüler de yüklenir. Dolayısıyla sayfanın ilk yüklenmesinde gereksiz görüntüleri yüklemek yerine sadece ihtiyaç duyulan görüntüler yüklenir. Bu da web sitesinin performansını artırır ve siteyi ziyaret eden kullanıcıların deneyimini iyileştirir.
Lazy Load XT, tembel yüklemenin yanı sıra farklı medya türlerini de destekler. Örneğin; iframe, video veya src özniteliği olan herhangi bir etiketi yükleyebilirsiniz. Bunun yanı sıra retina ekranlar için uyumlu görüntüler, arka plan resimleri veya animasyonlu geçişler gibi ek özellikler de sunar.
Lazy Load XT'yi projenize dahil etmek için iki seçeneğiniz vardır:
jQuery kullanmak istiyorsanız jquery.lazyloadxt.js dosyasını indirin ve sayfanızın sonunda bir script etiketi ile çağırın. Örneğin:
```html
<script src="jquery.js"></script>
<script src="jquery.lazyloadxt.js"></script>
```
jQuery kullanmak istemiyorsanız jqlight.lazyloadxt.min.js dosyasını indirin ve aynı şekilde sayfanızın sonunda çağırın. Örneğin:
```html
<script src="jqlight.lazyloadxt.min.js"></script>
<script src="jquery.lazyloadxt.js"></script>
```
Bu dosyaların ikisi de CDN üzerinden de erişilebilir, yani sunucunuza yüklemenize gerek yoktur.
Lazy Load XT'yi kullanmak için tembelce yüklemek istediğiniz görüntülerin src özniteliğini data-src ile değiştirin. Örneğin:
```html
<img data-src="lazy.jpg" width="100" height="100" alt="test image">
```
Bu şekilde Lazy Load XT eklentisi bu görüntüyü otomatik olarak algılayacak ve sayfada uygun bir konuma geldiğinde yükleyecektir.
Eğer tembelce yüklemek istediğiniz öğeleri kendiniz belirtmek isterseniz bunu da yapabilirsiniz. Bunun için öğeleri seçip lazyLoadXT() fonksiyonunu çağırmanız yeterlidir. Örneğin:
```javascript
$(elements).lazyLoadXT();
```
Lazy Load XT eklentisi çeşitli eklentilerle de zenginleştirilebilir. Bunlardan bazıları şunlardır:
- jquery.lazyloadxt.spinner.css eklentisini eklerseniz görüntüler yüklenene kadar ilgili alanda dönen bir simge gösterebilirsiniz.
- animate.min.css dosyasını projenize ekler ve $.lazyLoadXT.onload.addClass = 'animated bounceOutLeft'; satırını JS dosyanıza yazarsanız Animate.css kütüphanesinden herhangi bir animasyon efektini görüntülere uygulayabilirsiniz. bounceOutLeft efekti istediğiniz başka bir efektle değiştirilebilir.
Lazy Load XT Eklentisinin Avantajları
- CDN desteği sayesinde sunucunuza ekstra dosya yüklemenize gerek kalmaz.
- IE6-11 ve Opera Mini gibi eski veya farklı tarayıcılarda da sorunsuz çalışır.
- Sayfada sabit veya kaydırılabilir herhangi bir konumda tembelce yüklenen görüntüler kullanabilirsiniz. Olanaklar sınırsızdır.
- Eklentilerle ekstra özellikler ve görsel zenginlik kazanabilirsiniz.
- Tarayıcıda JS devre dışı bırakıldığında, görüntüler normal şekilde yüklenir.
Lazy Load XT eklentisi web sitenizi hızlandırmak ve kullanıcı deneyimini artırmak için harika bir araçtır. Bu eklentiyi kullanmak için jQuery gibi tam bir kütüphaneye ihtiyacınız yoktur. Sadece birkaç basit adımla projenize entegre edebilirsiniz.