Mempercepat Loading Disqus Comment dengan Teknik Lazy Load

Mempercepat Loading Disqus Comment dengan Teknik Lazy Load - Kecepatan akses sebuah website adalah salah satu parameter penting yang harus dijaga oleh seorang bloger ataupun pemilik website. Semakin cepat loading website makan pengunjung juga semakin nyaman dengan website kita.

Salah satu komponen website yang menjadi hal terpenting adalah kolom komentar, dimana user bisa berinteraksi dengan admin blog melalui kolom komentar. Disqus adalah salah satu plugin form komentar yang dapat memudahkan kita menyisipkan komentar form ke dalam website kita dengan mudah. Bahkan kita tidak perlu susah payah membuat form komentar untuk website kita sendiri.

Namun disisi lain, karena kita mengguanakan plugin external pastinya akan membuat keceptan loading website kita akan menurun drastis. Ini dikarenakan proses loading website akan bertambah menjadi lebih besar karena akan memuat kode dari situs disqus.

Berikut adalah contoh blog ini yang sebelumnya menggunakan disqus sebelum di optimasi :

 

Terlihat, score dari situs uji kecepatan Gtmetrix memiliki nilai yang sangat buruk. Selain itu pada bagian "Leverage Broser Cahcing" juga memiliki nilai yang buruk sekali, ini dikarenakan ada bnyak file externel dari disqus yang di load ke website.

Setelah melakukan optimasi, berikut adalah perbandingan kecepatan blog ini :

 

Tuh kan, telihat sangat jauh sekali peningkatannya. Meningkat menjadi lebih bagus dengan scroe yang tinggi dan juga "Leverage browser caching" menjadi lebih baik lagi.

Berikut ini saya akan membagikan sedikit tips untuk kalian gimana cara mempercepat loading disqus form komentar dengan teknik lazy load.

Info Penting:

1. Pada tutorial ini, saya tidak menjamin performance scroe website kamu menjadi tinggi diatas > 90
2. Ada banyak ada parameter penentu tingkat kecepatan website selain optimasi disqus.

Mempercepat Loading Disqus Comment dengan Teknik Lazy Load

Pada artikel sebelumnya saya suda membahas bagaimana cara memasang form komentar disqus di wordpress dengan disqus, silahkan bagi yang belum memasang disqus dapat mengikuti langkah sebelumnya.

Perlu diketahui, ketika kita memasang disqus comment di blog/website kita, maka ketika blog/website diakses/diload secara bersamaan file external yaitu file kode javascript dari disqus secara bersamaan dipanggil oleh browser untuk ditampilkan, makanya hal ini mengakibatkan loading website menjadi lebih berat.

Jadi konsep dari teknik lazy load ini adalah ketika halaman website/blog kita di akses oleh user, pertama tama browser hanya akan mengambil resource dari website kita saja sampai loading selesai, Namun ketika user scroll kebawah atau menekan tombol "tambah komentar" maka form komentar disqus akan di load pada website kita.

Jadi intinya, teknik ini dapat mempercepat load halaman website menjadi jauh lebih cepat dikarenakan load script dari disqus dilakukan ketika user membutuhkan form komentar itu saja.

Dalam tutorial kali ini kita akan mempelajari teknik mempercepat loading disqus dengan teknik lazy load menggunakan 2 cara,

1. Yang pertama adalah ketika user scroll ke halaman paling bawah dan yang
2. kedua ketika tombol "Tampilkan Komentar" di klik. 

Lazy Load Disqus Ketika Scroll

1.Edit Kode HTML Disqus Komentar

Rubah kode HTML yang sebelumnya menjadi seperti ini :

<div id="disqus_thread">
    <div id="disqus_empty"></div>
</div>

2. Edit Kode Javascript

Pada kode javascript, rubah juga kode bawaan dari disqus yang sebelumnya menjadi seperti ini:

function load_disqus(disqus_shortname) {
  var is_disqus_empty = document.getElementById('disqus_empty'),
      disqus_target   = document.getElementById('disqus_thread'),
      disqus_embed    = document.createElement('script'),
      disqus_hook     = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);

  if( disqus_target && is_disqus_empty ) {
    disqus_embed.type = 'text/javascript';
    disqus_embed.async = true;
    disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    disqus_hook.appendChild(disqus_embed);
    is_disqus_empty.remove();
  }
}

window.addEventListener('scroll', function(e) {
  var currentScroll = document.scrollingElement.scrollTop;
  var disqus_target = document.getElementById('disqus_thread');

  if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top - 150) ) {
    load_disqus('DISQUS_SHORTNAME_KAMU');
    console.log('Disqus loaded.');
  }
}, false);

Catatan :

1. Ganti DISQUS_SHORTNAME_KAMU dengan shortname disqusmu
2. Untuk shortname disqus, kamu bisa dapatkan dengan login ke halaman akun disqusmu.
3. Jangan lupa seleumnya kamu harus memasang Jquery di websitemu karena kode diatas menggunakan jquery.

Demo Lazy Load scroll

Lazy Load Disqus Ketika Klik Tombol

1.Edit Kode HTML Disqus Komentar

Untuk kode html buatlah seperti ini :

<div class="container">
  <div id="disqus_thread"></div>
  <button id="diqus_loader" onclick="load_disqus('disqus_shortname_kamu')">Tambahkan Komentar</button>
</div> 

2. Edit Kode Javascript

Untuk kode javascriptnya rubah seperti ini :

<script>
function load_disqus(disqus_shortname) {
  var disqus_trigger = jQuery('#disqus_trigger'),
      disqus_target = jQuery('#disqus_thread');

  if(disqus_target && disqus_trigger) {
    jQuery.ajaxSetup({ cache:true });
    jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
    jQuery.ajaxSetup({ cache:false });
    disqus_trigger.remove();
    console.log('Disqus loaded.');
  }
}
</script>

Catatan :

1. Pada bagian html diatas, ganti disqus_shortname_kamu dengan shortname disqusmu
2. Untuk shortname disqus, kamu bisa dapatkan dengan login ke halaman akun disqusmu.
3. Jangan lupa seleumnya kamu harus memasang Jquery di websitemu karena kode diatas menggunakan jquery.

Demo Lazy Load Klik

Sekarang Silahkan Uji kecepatan websitemu, dijamin pasti bertamah lebih baik.

Sekian Tutorial tentang cara mempercepat loading disqus dengan lazy load, semoga bermanfaat untuk kalian semua 😄

UPDATE !:

Cara menambahkan efek animasi loading ketika klik tombol load komentar

Dikarenakan banyak yang bertanya gimana cara menambah efek animasi loading ketika tombol load disqus komentar diklik, maka saya akan berbagi sedikit tipsnya.

Pada dasarnya, efek loading saat tombol load di klik sudah ada bawaan dari pihak Disqus sendiri, namun jika kita ingin menambahakn efek animasi loading yang kita inginkan tentunya bisa. 

Berikut caranya :

Pertama siapkan animasi loading yang ingin kamu tambahkan. Misalnya disini kita akan menggunakan animasi loading dari css yang bisa kmu dapatkan di link berikut ini : Animasi loading css

Setelah itu sisipkan kode HTML dari animasi  tersebut pada kode sebelumnya. Maka hasilnya akan seperti dibawah ini:

<div class="container">
  <div id="disqus_thread"></div>
	<div class="spinner" id="loading">
	  <div class="double-bounce1"></div>
	  <div class="double-bounce2"></div>
	</div>
  <button id="diqus_loader" onclick="load_disqus('disqus_shortname_kamu')">Tambahkan Komentar</button>
</div> 

kemudian tambahkan css berikut ini:

#loading{display:none;}
.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

Terakhir, edit kode javascript seperti dibawah ini :

<script type="text/javascript">
  function load_disqus(disqus_shortname) {
    $('#diqus_loader').css('display','none');
    $('#loading').css('display','block');
    var disqus_trigger = jQuery('#disqus_trigger'),
        disqus_target = jQuery('#disqus_thread');
    
    setTimeout(function(){ 
        if(disqus_target && disqus_trigger) {
          jQuery.ajaxSetup({ cache:true });
          jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
          jQuery.ajaxSetup({ cache:false });
          disqus_trigger.remove();
          console.log('Disqus loaded.');
          $('#loading').css('display','none');
        }
    }, 3000); 
  }
</script>

Sekarang silahkan dicoba ya😊

 

Referensi : 

• https://w3bits.com/load-disqus-on-click/