Fotoğraf ve Videoları Defer ile Gecikmeli Yükleme

Blogger temaları üzerinde, fotoğraf ve videoları defer='defer' aracılığı ile gecikmeli yüklemek için yapmanız gereken bir dizi işlem vardır. Anca buna geçmeden önce defer fonksiyonu nedir? Defer ne işe yarar? Sorularına cevap bulalım.

blogger temaları fotoğraf ve videoları defer ile gecikmeli yükleme

Defer, bağlı bulunduğu bağlantıdaki dosyaları, ziyaretçi tarayıcısına "gecikmeli yükle, ön yükleme yaparken bunu daha sonra yükle, ertele" komutları veren ve doğru kullanıldığında oldukça başarılı sonuçlar ortaya koyan bir özelliktir.

Defer komutu ile, javascript dosyaları, fotoğraf ve video dosyalarının ön yüklemesi ertelenebilir. Böylece sayfaya gelen ziyaretçiler, sayfanın ön yüklemesi anında asıl yüklenmesi gereken içeriği önce ekranlarına almış olurlar.

Hangi içeriğin önce yükleneceğini belirlemek için site yöneticinize danışabilirsiniz. Sayfa hızına etki eden defer fonksiyonu işe yaramadığı durumlarda async='async' fonksiyonu uygulanabilir. Eğer jquery tabanda script dosyalarınız varsa, bunu <head> ve </body> alanlarına mutlaka doğru ve eksiksiz yerleştirmeniz gerekmektedir. Aksi halde blogger tema dosyanız, istediğiniz verimlilikte çalışmayacaktır.

Aşağıdaki kod aracılığıyla, fotoğraf ve video dosyalarını gecikmeli yükleyeceğiz. Burada dikkat edilmesi gereken husus, <img src='' data-src=''/> kalıbına uygun olarak, yani varsayılan haliyle blogger'ın sizlere sunduğu img kalıbını değiştirmemiş olmanız gerekiyor.

Çünkü bu kod orjinal fotoğraf dosyalarınızın bağlı olduğu yolu data-src ve video dosyalarına ait orijinal dosya yolunu data-src otomatik olarak algılayarak, ön yükleme anında gecikme sağlıyor ve sayfa performansınızı önemli ölçüde arttırıyor.

Blogger tema yedeğini almadan herhangi bir işlem yapmamanız gerektiğini unutmamalısınız.

Fotoğraf ve Video Dosyaları Defer ile Gecikmeli Nasıl Önyükleme Yapılır?

  • Blogger hesabınıza giriş yapınız.
  • Tema > Html Düzenle bölümüne gidin.
  • </head> kısmının hemen üstüne aşağıdaki defer eklentisini ekleyin.
  • Ardından body etiketini alt kısımdaki gibi düzenleyin ve "Değişikliği kaydet" ile işleminizi kaydedin.


<script>
//<![CDATA[
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
        imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
    }
}

 var vidDefer = document.getElementsByTagName('iframe');
  for (var i = 0; i < vidDefer.length; i++) {
    if (vidDefer[i].getAttribute('data-src')) {
      vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
    }
  }
}
window.onload = init;
//]]>
</script>

<body> etiketini, <body onload='init()'> ile değiştirip işleminizi tamamlayın.

Faydalı mı?

Bu konu hakkında 1 yorum var. Sen ne düşünüyorsun?

  1. Şaşırtıcı bir şekilde blog sitemin gtmetrix ve pingdom hız değerleri 95'e yükseldi. Doğrulamak için ise son olarak webpage test üzerinde denedim. Orda daha iyi sonuç aldım. Fotoğraflar siteye aşırı yük oluyor. Bi parça kod ile sayfa hızını iyileştirmiş oldum. Blogum daha hızlı açılıyor artık. O kadar mutluyum ki. Ne kadar teşekkür etsem az.

    YanıtlayınSil

Yorum Gönderme

Önceki Konu Sonraki Konu