Memasang script lazy load Disqus Comments untuk mempercepat loading laman dapat memberi dampak positif yang sangat baik bagi SEO blog dan memperbaiki skor di Lighthouse. Oleh sebab itu saya sengaja meluangkan waktu untuk menemukan informasi tentang cara melakukannya di Blogger blog.
Kenapa Blogger, karena di WordPress umumnya lebih mudah, oleh sebab tersedianya plugin yang tinggal pasang dan langsung jalan, jika tak mau repot memasangnya sendiri. Disqus Comments dipilih karena sistem ini merupakan salah satu platform komentar paling populer sebagai pengganti sistem komentar default yang diberikan oleh Blogger atau WordPress.
Sedangkan lazy load atau lazy loading adalah sebuah teknik amat populer yang dibuat dengan tujuan untuk memuat konten laman web hanya pada saat konten itu dibutuhkan oleh pengunjung, daripada dimuat sekaligus pada saat laman pertama kali dibuka. Lazy load umumnya dibuat dengan menggunakan JavaScript.
Teknik ini disebut lazy load karena, sebagaimana orang malas yang senang menunda pekerjaan, laman web diperintahkan untuk menunda melakukan satu atau lebih pekerjaan yang mestinya bisa dilakukan dengan segera. Lawan lazy loading barangkali adalah eager loading, di mana laman web dibuat agar segera memuat seluruh isi laman, jauh sebelum pengunjung membutuhkan informasinya.
Pengaruh penggunaan lazy load pada kecepatan loading laman dan SEO bisa sangat signifikan dibanding jika seluruh laman dimuat seluruhnya sekaligus, meskipun telah menggunakan script async sekalipun. Keberadaan script async, meski secara teoretis tidak memblokir berjalannya proses lain, namun tetap akan memperburuk skor performance dan SEO.
Sama halnya, walaupun script Disqus comments system dimuat secara async (asynchronous), namun pengaruh negatif keberadaan scriptnya masih sangat besar pada pelambatan kecepatan loading laman web, yang otomatis berakibat pada menurunnya skor performnace laman dan SEO.
Ikuti langkah berikut ini untuk memasang script lazy load Disqus Comments agar mempercepat loading Blogger blog Anda:
Sekarang bandingkan skor performance dan SEO laman Anda dengan dan tanpa script Lazy Load Disqus Comments, baik menggunakan GTmetrix atau pun memakai Lighthous di Chrome DevTools. Jika semuanya lancar, akan ada perbaikan signifikan pada skor. Inspirasi script ini diperoleh dari laman freshtechtips, dan telah pernah saya coba gunakan dengan hasil memuaskan.
Selamat mencoba dan semoga bermanfaat.
Kenapa Blogger, karena di WordPress umumnya lebih mudah, oleh sebab tersedianya plugin yang tinggal pasang dan langsung jalan, jika tak mau repot memasangnya sendiri. Disqus Comments dipilih karena sistem ini merupakan salah satu platform komentar paling populer sebagai pengganti sistem komentar default yang diberikan oleh Blogger atau WordPress.
Sedangkan lazy load atau lazy loading adalah sebuah teknik amat populer yang dibuat dengan tujuan untuk memuat konten laman web hanya pada saat konten itu dibutuhkan oleh pengunjung, daripada dimuat sekaligus pada saat laman pertama kali dibuka. Lazy load umumnya dibuat dengan menggunakan JavaScript.
Teknik ini disebut lazy load karena, sebagaimana orang malas yang senang menunda pekerjaan, laman web diperintahkan untuk menunda melakukan satu atau lebih pekerjaan yang mestinya bisa dilakukan dengan segera. Lawan lazy loading barangkali adalah eager loading, di mana laman web dibuat agar segera memuat seluruh isi laman, jauh sebelum pengunjung membutuhkan informasinya.
Pengaruh penggunaan lazy load pada kecepatan loading laman dan SEO bisa sangat signifikan dibanding jika seluruh laman dimuat seluruhnya sekaligus, meskipun telah menggunakan script async sekalipun. Keberadaan script async, meski secara teoretis tidak memblokir berjalannya proses lain, namun tetap akan memperburuk skor performance dan SEO.
Sama halnya, walaupun script Disqus comments system dimuat secara async (asynchronous), namun pengaruh negatif keberadaan scriptnya masih sangat besar pada pelambatan kecepatan loading laman web, yang otomatis berakibat pada menurunnya skor performnace laman dan SEO.
Ikuti langkah berikut ini untuk memasang script lazy load Disqus Comments agar mempercepat loading Blogger blog Anda:
Blogger Blog
- Login ke Blogger
- Klik Theme > Edit HTML, sorot seluruhnya (ctrl-A atau Command-A), salin dan tempel di notepad sebagai backup untuk nanti digunakan jika ada kesalahan selama proses.
- Setelah back up, jika telah memasang script Disqus, hapus script-nya dari blog. Jangan khawatir, data Disqus Anda aman karena ada di server mereka.
- Salin tempel CSS di bawah ini ke bagian CSS template blog Anda:
.disqus-loading {
text-align: center;
font-size: 18px;
font-weight: 300;
padding: 12px 0;
}
.disqus-loading.is-hidden {
display: none;
}
Anda bisa menambah atau mengganti kode CSS di atas sesuai selera. - Salin tempel script di bawah ini sebelum </body> dengan meletakkannya diantara <b:if cond='data:view.isSingleItem'></b:if> jika hendak ditampilkan pada Post dan Page, atau diantara <b:if cond='data:view.isPost'></b:if> jika hanya tampil di Post.
<div class='disqus-loading'>Loading comments…</div>
<div class='disqus'/><script>
//<![CDATA[
!function(t,e,n){"use strict";var o=function(t,e){var n,o;return function(){var i=this,r=arguments,d=+new Date;n&&d<n+t?(clearTimeout(o),o=setTimeout(function(){n=d,e.apply(i,r)},t)):(n=d,e.apply(i,r))}},i=!1,r=!1,d=!1,s=!1,a="unloaded",u=!1,l=function(){if(!u||!e.body.contains(u)||"loaded"==u.disqusLoaderStatus)return!0;var n,o,i=t.pageYOffset,l=(n=u,o=n.getBoundingClientRect(),{top:o.top+e.body.scrollTop,left:o.left+e.body.scrollLeft}).top;if(l-i>t.innerHeight*r||i-l-u.offsetHeight-t.innerHeight*r>0)return!0;var c,f,p,y=e.getElementById("disqus_thread");y&&y.removeAttribute("id"),u.setAttribute("id","disqus_thread"),u.disqusLoaderStatus="loaded","loaded"==a?DISQUS.reset({reload:!0,config:d}):(t.disqus_config=d,"unloaded"==a&&(a="loading",c=s,f=function(){a="loaded"},(p=e.createElement("script")).src=c,p.async=!0,p.setAttribute("data-timestamp",+new Date),p.addEventListener("load",function(){"function"==typeof f&&f()}),(e.head||e.body).appendChild(p)))};t.addEventListener("scroll",o(i,l)),t.addEventListener("resize",o(i,l)),t.disqusLoader=function(t,n){n=function(t,e){var n,o={};for(n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o}({laziness:1,throttle:250,scriptUrl:!1,disqusConfig:!1},n),r=n.laziness+1,i=n.throttle,d=n.disqusConfig,s=!1===s?n.scriptUrl:s,(u="string"==typeof t?e.querySelector(t):"number"==typeof t.length?t[0]:t).disqusLoaderStatus="unloaded",l()}}(window,document);
//]]>
</script>
<script>
disqusLoader( '.disqus',
{
scriptUrl: '//username.disqus.com/embed.js',
disqusConfig: function()
{
this.page.identifier = '<data:post.id/>';
this.page.url = '<data:blog.canonicalUrl/>';
this.page.title = '<data:post.title/>';
this.callbacks.onReady = [function()
{
var el = document.querySelector( '.disqus-loading' );
if( el.classList )
el.classList.add( 'is-hidden' ); // IE 10+
else
el.className += ' ' + 'is-hidden'; // IE 8-9
}];
}
});
</script> - Ganti username dengan username Disqus Anda, lalu klik Save
Sekarang bandingkan skor performance dan SEO laman Anda dengan dan tanpa script Lazy Load Disqus Comments, baik menggunakan GTmetrix atau pun memakai Lighthous di Chrome DevTools. Jika semuanya lancar, akan ada perbaikan signifikan pada skor. Inspirasi script ini diperoleh dari laman freshtechtips, dan telah pernah saya coba gunakan dengan hasil memuaskan.
Selamat mencoba dan semoga bermanfaat.
Sponsored Link
Sponsored Link
Sponsored Link
Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.