Blogger Lazy Load Eklentisi Kodu

Lazyload Blogger Eklentisi Resimleri Hızlı Yükleyin

Blogger Lazy Load Eklentisi Nedir

Blogger Lazy Load eklentisi, sayfa kaynağı yüklendikten sonra veya yalnızca gerektiğinde yüklenen bir kod tekniğidir. Geç yükleme tekniği, isteğe bağlı yükleme olarak da bilinen bir tekniktir. Site içerisinde bulunan görseller ve medya dosyaları, blog yazılarının güzel görünmesine ve konunun ne hakkında olduğuna dair kısa bir bilgi vermektedir. Görüntüler yüksek dosyalardır ve çok fazla internet harcanmaktadır. Dosya boyutu yüksek olduğunda resimler geç yüklenir ve sitenin yavaş açılmasına neden olurlar.

Lazyload eklentisi veya görsellerin yüklenmesini erteleyecek kod ile web sitenizde görsellerin yüklenmesini geciktirerek sitenizin hızını gözle görülür şekilde artırabilirsiniz. Web sitenizde çok sayıda görseliniz varsa, Blogger için Lazy Loader eklentisini kullanmalısınız. Blogger altyapısı eklentileri desteklemediğinden, bunları uygularken manuel olarak yapmamız gerekiyor. Site içerisinde bulunan tüm multimedya görüntüleri veya iframe tabanlı içerik için bu kodu kullanabilirsiniz.

Site Hızını Nasıl Öğrenebilirim?

Günümüz koşullarında site hızı kontrol eden web siteleri sayesinde, site hızını ve diğer bilgileri görebiliriz. Sitemizin hızını kontrol etmek için farklı test araçları vardır ve bu test araçları farklı bağlantı türleri kullanırlar. Bu bağlantı türleri mobil için 3G bağlantı desteğini kullanırken, masaüstü ve tablet gibi yüksek çözünürlüklü ekranlar normal interneti kullanır. Artık herkesin akıllı telefon kullanması, siteler için hızı ön plana çıkarıyor. Site hızı artık kullanıcı için öne çıkarken, Site sahibi bunları göz ardı etmemelidir. Bu gibi durumlarda sitemizin ön plana çıkması için sitenin performansını artıracak teknikler uygulanmalıdır. Altta verdiğim Web Sitesi Hız Testi araçlarını kullanarak sitenizin hız performansınız öğrenebilirsiniz.

https://gtmetrix.com/
https://developers.google.com/speed/pagespeed/insights/?hl=tr
https://webpagetest.org/
https://www.uptrends.com/tools

Blogger Lazy Load Eklentisi Nasıl Yapılır?

Gerekli süre: 2 dakika.

Lazyload eklentisi ile görsellerin yüklenmesini erteleyerek, site hızını yükseltmek için aşağıda oluşturmuş olduğumuz adımları takip ederek sizde site hızınızı optimize edebilir ve yükseltebilirsiniz.

  1. Bloggger Tema Düzenleme Kısmına Gidin

    Tema düzenleme kısmına giderek öncelikle </body> tagının üzerine aşağıdaki kodlar eklenmelidir.
    <script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js' crossorigin='anonymous'></script>Blogger Lazyload Blogger Eklentisi Kodu

  2. Hemen Altına Bu kodu Ekleyin.

    <script>
    //<![CDATA[
    $("img").each(function(){var a=$(this),t=a.attr("src");a.attr("data-src",t),a.removeAttr("src"),a.addClass("lazyload")});
    //]]>
    </script>

  3. Resim Galerisi Ayarlama

    üstteki kodları eklediğimizde sitemizde bulunan tüm resimler optmize olur. Ayrıca tekil yazı içeresinde bulunan resimlerde Lightbox ile açılmaz bunun önlemek için aşağıda bulunan kodları sitemize aynı şekilde </body> tagının üstüne ekliyoruz.
    <b:if cond=’data:view.isSingleItem’>
    <script src='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js' crossorigin='anonymous'></script>
    <style src='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
    <script>
    //<![CDATA[
    $(document).ready(function() {
    $(".post-body a img").each(function() {
    /.(?:jpg|jpeg|gif|png)$/i.test($(this).parent("a").attr("href")) && ($(this).parent("a").attr("data-src", $(this).parent("a").attr("href")), $(this).parent("a").attr("data-fancybox", "postLightBox"))
    }), $(".tr-caption-container").each(function() {
    var t = $(this).find(".tr-caption").text();
    $(this).find("a").attr("data-caption", t)
    }), $("[data-fancybox]").fancybox({
    animationEffect: "zoom",
    infobar: !0,
    buttons: ["zoom", "close"],
    speed: 300,
    margin: [40, 20]
    })
    });
    //]]>
    </script>
    </b
    :if>

Özet Geçersek Eğer

Alttaki kodları </body> tagının üstüne yapıştırın ve tüm işlemleri tamamlayın

<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js'/>  

<script type='text/javascript'>
//<![CDATA[
$("img").each(function(){var a=$(this),t=a.attr("src");a.attr("data-src",t),a.removeAttr("src"),a.addClass("lazyload")});
//]]>
</script>

<b:if cond='data:view.isSingleItem'>
<script src='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js' crossorigin='anonymous'></script>
<style src='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>

<script>
//<![CDATA[
$(document).ready(function() {
$(".post-body a img").each(function() {
/.(?:jpg|jpeg|gif|png)$/i.test($(this).parent("a").attr("href")) && ($(this).parent("a").attr("data-src", $(this).parent("a").attr("href")), $(this).parent("a").attr("data-fancybox", "postLightBox"))
}), $(".tr-caption-container").each(function() {
var t = $(this).find(".tr-caption").text();
$(this).find("a").attr("data-caption", t)
}), $("[data-fancybox]").fancybox({
animationEffect: "zoom",
infobar: !0,
buttons: ["zoom", "close"],
speed: 300,
margin: [40, 20]
})
});
//]]>
</script>
</b:if>

Not: Eğer sitenizde jquery.min.js kütüphanesi yoksa eğer alttaki kütüphaneyi sitenize eklemeyi unutmayın.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>

Daha fazla Blogger eklentisi için Blogger Eklentileri kategorisine bakabilirsiniz.

6 Replies to “Blogger Lazy Load Eklentisi Kodu”

  1. Çok teşekkürler çok iyi açıklamışsınız. Sitedeki tüm resimlerin optimize edilmesi oldukça iyi. En kısa zamanda deneyeceğim.

Bir cevap yazın

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