• Web sitemize kayıt olmak ve onay işlemleri ile ilgili genel bilgilendirme için buraya tıklayınız

Bilgi Lazy Load Nedir? XenForo İçin Nasıl Kullanılır?

1337

Lazy Load Nedir?

Lazy Load, sayfada yer alan bir ögenin ihtiyaç duyulmadığı takdirde çağrılmaması prensibi ile çalışan bir JavaScript + CSS ve HTML kod kombinasyonudur. Lazy Load kullanılarak, ziyaretçinin fare hareketine göre, sayfanın ilk açılışta görünmeyen kısmının, kullanıcı aşağı indikçe yüklenmesi sağlanır. Böylelikle SEO ve kullanıcı deneyimi açısından oldukça önemli olan sayfa açılış hızı oldukça düşecektir.

Ziyaretçilerin %95’inin ziyaret ettikleri sitenin açılışının 3 saniyeden uzun sürmesi durumunda siteyi ziyaret etmekten vazgeçtikleri düşünüldüğünde, her saniye daha değerli hale geliyor.

Lazy Load kullanımı için biraz daha detaylı bilgi verecek olursak,

Başka önemli bir ayrıntı ise sayfada aşağı yönlü hareket gerçekleştiğinde sayfanın geri kalanında yer alan ögelerin tamamının yüklenmiyor olması. Tıpkı ilk açılışta olduğu gibi aşağı yönlü hareket gerçekleştiğinde sadece ekranda yer alan ögeler yüklenir. Diyelim ki sitede 500 öge yer alıyor ve siz sadece 1/4’ünü görecek kadar aşağı indiniz ve sayfayı terk ettiniz. Kalan 375 öge yüklenmeyecektir. Lazy Load kullanılmadığı düşünüldüğünde sayfayı açtığınızda 500 ögenin tamamı yüklenecektir. Özellikle mobil internet kullanımı düşünüldüğünde ziyaretçilere ögeleri gerekmedikçe göstermemek oldukça önemli hale geliyor.

Lazy Load Nasıl Kullanılır?
Lazy Load nedir? başlığında açıkladığımız gibi Lazy Load HTML, CSS ve JavaScript’in birlikte kullanımı ile kullanılabiliyor. Şimdi sizler için hem HTML, hem CSS, hem de JavaScript’te kullanılacak kodları paylaşacağız.

XF'de Şablonlarda Kullanılacak Kod

HTML:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Yukarıda yer alan kodda kırmızı ile işaretlediğimiz alan .less’de yer alan Lazy Load ile alakalı class’ın adıdır.
Bu class için .less dosyasına eklememiz gereken kodumuz,


Less:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

JavaScript’te Kullanılacak Kod

Aşağıda yer alan kodda kırmızı ile işaretlediğimiz alan bu JavaScript kodundan etkilenecek ögelerin sahip olması gereken class anlamına geliyor. Kırmızı ile (Lazy) işaretlenen alan Lazy Load için kullandığınız class adı ile aynı olmalıdır.

Yine yukarıda yer alan kodda yeşil ile işaretli alan ise içerik kaynağının hangi öge özelliğinden alınacağı ile alakalı. Yani HTML’de Kullanılacak Kod bölümünde yer alan data-src özelliği bizim Lazy Load’da kullanacağımız veri çekme alanımız.

JavaScript:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!


XenForo Media Gallery eklentisi veya görsellerin çok fazla kullandığı konularda bu sistemi kullanmanız oldukça faydalı olacaktır.

XenForo için Lazy Load Eklentisi Var mı?

Evet var, kullanıcıların bir çoğuna gereksiz eklentileri kullandıkları için hayretle bakıyorum oysa sistemin içerisinde fayda sağlayacak eklentilerin neler olduklarını bilmemeleri çok üzücü.

XenForo için lazy Loader eklentisine ekten ulaşabilirsiniz.

1338
 
Bilgi Kaynak Erişimi
https://xentr.net/

Ekli dosyalar

  • addon-LazyImageLoader-2.1.5.zip
    27.1 KB · Görüntüleme: 28

SelamT

SMS Confirmed
SMS Confirmed
XenTR Üyesi
Katılım
20 May 2019
Mesajlar
279
Çözümler
3
Tepki puanı
177
Puanları
43
Bu yararlı makale için teşekkürler XDinc
Kendi deneyimlediğim bir sıfırdan site kurma noktasında, gerçekten image, js ve css dosyaların büyüklükleri sitenin hızını olumsuz etkilediği gibi, Google tarafından da çok dikkate alınmayan bir site özelliğine bürünebiliyor.
Ben eklentiyi kuruyorum tavsiyeniz üzere.
Ayrıca belki bir XenForo sitesinde olmazsa olmaz eklentiler listesi yayınlama imkanınız olur mu?

Teşekkürler
 

XDinc

Well-known member
Admin
XenTR Mod
Customer
SMS Confirmed
XenTR Üyesi
Katılım
3 Şub 2019
Mesajlar
2,071
Çözümler
13
Tepki puanı
4,779
Puanları
113
Bu yararlı makale için teşekkürler XDinc
Ayrıca belki bir XenForo sitesinde olmazsa olmaz eklentiler listesi yayınlama imkanınız olur mu?

Bahadır, biz teşekkür ederiz ne demek!
Listeyi belirlerken sistemin barındığı sunucu çok önemli bu noktada etkilerini DostHosting daha detaylı ifade edecektir.
Ben bizim kabinimiz üzerinden örnek verecek olursam hata yaparız. Standart bir sisteme fayda sağlayacak eklentiler neler bunu yarın değerlendirerek bir konu açarız.
 

SelamT

SMS Confirmed
SMS Confirmed
XenTR Üyesi
Katılım
20 May 2019
Mesajlar
279
Çözümler
3
Tepki puanı
177
Puanları
43
DostHosting ile kısa sürede tavsiyen üzere iletişime geçeceğiz zaten :)
Ben eklentiyi kurdum ama çalışma mantığını gözlemleyemedim :(
 

mkucuksari

Kayıtlı Kullanıcı
XenTR Üyesi
Katılım
19 Şub 2019
Mesajlar
15
Tepki puanı
14
Puanları
3
DostHosting ile kısa sürede tavsiyen üzere iletişime geçeceğiz zaten :)
Ben eklentiyi kurdum ama çalışma mantığını gözlemleyemedim :(
Bu eklentiyi zamanında ben de iki defa demo ortamında kurdum ama çalışmasını ben de gözlemleyeceğim :)

Bir sefer daha nedeyeyim, bakalım bu sefer olacak mı :D

Detaylı anlatım için teşekkür ederiz. Kesinlikle olması gereken bir eklenti (y)
 

HytaleTurkiye

XenTR Ekibi
XenTR Mod
XenTR Üyesi
Katılım
25 Mar 2019
Mesajlar
228
Çözümler
4
Tepki puanı
294
Puanları
63
Xenforo resmi forumunda bu eklentiyi çok görmüştüm ama tam kullanım amacını anlamamıştım güzel anlatım olmuş elinize sağlık.
 

imtsoft

New member
Customer
XenTR Üyesi
Katılım
20 Eki 2020
Mesajlar
27
Tepki puanı
18
Puanları
3
Güzel bir makale, XF 2.2 için yerleşik şekilde var diyor, son sürümde imajlara class="lazy" tagını eklemek yetiyormu ?
 

XDinc

Well-known member
Admin
XenTR Mod
Customer
SMS Confirmed
XenTR Üyesi
Katılım
3 Şub 2019
Mesajlar
2,071
Çözümler
13
Tepki puanı
4,779
Puanları
113

tekcarem

New member
Licenced
SMS Confirmed
XenTR Üyesi
Katılım
4 Ocak 2021
Mesajlar
19
Tepki puanı
13
Puanları
3
Merhaba
Son sürümlerde lazy Loader eklentisine ihtiyac varmıdır?
 

PATRON

Kayıtlı Kullanıcı
XenTR Üyesi
Katılım
22 Mar 2019
Mesajlar
41
Tepki puanı
23
Puanları
8
Merhabalar,
Son sürümde bunq ihtiyaç default olarak ilave edilmiş şekilde geliyor artık👍

2.2.2 Sürümünü kullanıyorum ama hiç denk gelmedim. Forum ayarların da var mı bu yoksa kendi dosya içerisinde mi aktif?
Lazy load one pages temalarda çok müthiş duruyor. Kendi kurumsal sitem de de kullanıyorum.
 

whistle

New member
Licenced
Customer
SMS Confirmed
XenTR Üyesi
Katılım
8 Haz 2020
Mesajlar
14
Çözümler
1
Tepki puanı
11
Puanları
3
Merhaba,
xf v2.2.4 sürümünde şu hatayı veriyor.
Kod:
Dear Guests, welcome! Please, Giriş Yap or Kayıt Ol to view hide content!

Edit: Eklentinin 2.5.0 sürümü mevcutmuş. Xenforo sitesinden indirdim. Güncel sürümde bu hatayı vermedi.
 
Son düzenleme:

Oyunturkorg

Member
Banned
XenTR Üyesi
Katılım
13 May 2021
Mesajlar
22
Tepki puanı
12
Puanları
8
Teşekkür ederim üstadım sağolasın emeğine sağlık
 
Üst