İçeriğe geçmek için "Enter"a basın

Sitenizin Hızını Uçuracak Lazy Load Eklentileri

Sunucunun geç yüklenmesinin en büyük sebepleri arasında yer alan resim dosyalarını, içerikten sonra yükletmeye yarayan harika bir sistemdir Lazy Load. Böylece içeriği ziyaret etmek isteyen siteye daha hızlı ulaşacak, diğer herşey yüklendikten sonra resimleriniz birbir yüklenmeye başlayacaktır.

Ayrıca ekranda görünen kısımdaki resimler yüklenecek, ekranı kaydırdıkça aşağıda yer alan resimler görünür hale gelecektir. Sitenizde hız problemi yaşıyorsanız Lazy load kullanmanızı tavsiye ederim. Dilerseniz eklenti ile bu işlemi saniyeler içerisinde çözebilirsiniz. Ben eklenti kullanmaya karşıyım diyorsanız, kod ile çözmenizi sağlayacak bilgiler konunun alt kısmında yerini alacaktır.

[reklam]

Eknot: Eğer ücretli bir tema kullanıyorsanız temanız bu sistemi destekleyecektir. Bu nedenle tekrar eklenti kurmanıza gerek yoktur.

1# Lazy Load Eklentisi

Lazy Load eklentisi Jquery’nin eşsiz  özelliği ile resim dosyalarınızın yerine bir yükleniyor efekti ekliyor ve resimler yüklendikten sonra gözükmesini gerçekleştiriyor. Ayrıca bu eklentiyi indirip kurmanız yeterli oluyor, direk olarak çalışmaya başlıyor.

Eklentiyi indirmek için tıklayın.

2# Rocket Lazy Load

Çok küçük boyutlu olan bu eklentide yine yukarıdaki eklentinin yaptıklarını fazlasıyla yapıyor. Wp Rocket eklentisi kullananlar için ideal bir eklenti.

Eklentiyi indirmek için tıklayın.

3# a3 Lazy Load

Resimlerin yanı sıra iframe bloklarını da sıkıştırmak ve içerikten sonra yüklenmesini isterseniz bu eklenti çok daha fazla işinize yarayacak.

Eklentiyi indirmek için tıklayın.

4# Bj Lazy Load

Yine hem resimleri hemde iframeleri geç yükleten başarılı bir WordPress Lazy Load Eklentisi.

Eklentiyi indirmek için tıklayın.

5# Crazy Lazy

Sitenizin hız performansını oldukça arttırabilecek kabiliyette bir başka Lazy Load eklentisi. Eklentiyi özelleştirmeniz de mümkün. Style.css dosyanıza ekleyebileceğiniz

img[src*='data:image/gif;base64'] {
    border: 1px dashed #dbdbdb;
}

img.crazy_lazy {
    background: url(/wp-includes/images/wpspin-2x.gif) no-repeat center center;
    background-size: 16px 16px;
}

kod ile tembel yüklenecek olan resimlerin yüklenirken ziyaretçilerin sorunla karşılaşmaması adına yükleniyor gif’i koyabilirsiniz.

Eklentiyi indirmek için tıklayın.

6# Simple Lazyload

Çok fazla kişi tarafından tercih edilmemiş olsa da basit bir tembel yükleyici eklentisidir. Rahatça kullanabilirsiniz.

Eklentiyi indirmek için tıklayın.

7# Yorumlar için Lazy Load

Sitenizde çok fazla yorum olan sayfalarınız veya içerikleriniz varsa onların geç yüklenmemesi için bu eklentiyi kurabilirsiniz. Resimler, iframeler gibi yorumları da içerikten sonra yükleterek, ziyaretçinin içeriğe en kısa sürede erişmesini sağlayabilirsiniz.

Eklentiyi indirmek için tıklayın.

Eklentisiz Lazy Load Nasıl Yapılır ?

Lazy load, Jquery için yazılmış bir eklentidir. Temanıza dahil ederek, eklenti kurmadan da kullanabilirsiniz. Lazyload.js dosyasını buradan indirerek temanıza ekleyin. Ardından temanızın resim gözüken kısımlarında bir değişiklik yapmanız gerekiyor.

<img class="lazy" alt="..." 
     data-src="../img/44721746JJ_15_a.jpg"
     width="220" height="280">

<img ile başlayan elementlerinizin class atamasına lazy eklemeniz gerekiyor. Ayrıca src olan resim yolu atamasını da data-src ile değiştirmeniz yeterli. Son olarak

<script>
var myLazyLoad = new LazyLoad({
    elements_selector: ".lazy"
});
</script>

kodunuda footer.php dosyasına Lazyload.js’yi dahil ettiğiniz kodun altına eklemeniz yeterli. Bu en basit şekilde eklentisiz olarak Lazy Load kullanımı sağlayacak, LazyLoad.js indirme sayfasında örnek kullanımları görebilirsiniz.

İlk yorum yapan siz olun

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir