Merhabalar,

Baktım ki internet üzerinde genel olarak bu konu hakkında pek bir yazı yok bende böyle birşeyi herkes faydalansın diye paylaşmak istedim.
Wordpress, opencart vb. php yazılımlarınızda çok karşınıza çıkan bir sorundur sayfa boyutu.
Sitenizde yüklenen Facebook, Twitter gibi alanların sitenizde ne kadar yer kapladığını hepimiz iyi biliriz.
Hatta bu twitter ve facebook gibi alanların açılışta yüklendiği için ne kadar açılmayı zorlaştığı aşikar.
Ben şahsen site optimizasyonu yaparken müşterilerime bu yöntemi geliştirerek artık kullanmaya başladım

Bu yöntemi uygulamadan sayfa boyutu:
Bu yöntemi uyguladıktan sonraki sayfa boyutu:


Peki bunun için ne yapmak lazım.
Öncelikle bu yaptığım çalışma sayfamızın footer bölümü için geçerli.
Sayfamız scrool olduğu zaman bir kere çalışacak javascript kodlarımızın yüklenmesini istiyoruz.

<script type='text/javascript'>
jQuery(window).one("scroll",function(){
    // Sayfamız scrool olduğunda buradaki kodlar 1 kere çalışacak ve javascript kaynakları 1 kere yüklenecek
});
//]]>
</script>

Şimdi gelelim bir senaryo üzerinde uygulamasına.
Senaryo: Sayfamın footer kısmında facebook beğen kısmı var, bu kısım javascript kodlarını facebok tarafından çekildiği için site açılışında sayfa boyutu artarak yavaş yükleniyor.

1. Facebook kodlarımızın yükleneceği footer kısmına bir div oluşturuyoruz.

   1.  <div id="FaceKutu"></div>

2. Javascript kodumuzu sitemizin herhangi bir kısmına yerleştiriyoruz.

   1. <script type='text/javascript'>
      jQuery(window).one("scroll",function(){
          $('#FaceKutu').append('<div id="fb-root"></div>');
          $('#FaceKutu').append('<fb:like-box href="https://www.facebook.com/facebookAdresiniz/" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
          jQuery.getScript('https://connect.facebook.net/tr_TR/all.js#xfbml=1', function() {
              FB.init({status: true, cookie: true, xfbml: true});
          });
      });
      //]]>
      </script>

Bu şekilde sitemizdeki facebook javscript kodları bir nevi lazy load gibi yükleniyor. Bu şekilde sitemiz açılışta daha hızlı yüklenerek veri tasarrufunun yanında google ve diğer sistemler tarafından da olumlu sonuçlar yansıyor.

Herkese yardımcı olması dileği ile.
Yazımın sitemdeki örneği: https://www.teknoparki.com/jquery-lazy-load-javascript/

Esenlikle.