Kolom komentar bawaan Blogger atau WordPress memang terasa kurang modern bagi sebagian orang. Alhasil, beralih ke Disqus atau Facebook jadi pilihan populer karena tampilannya yang keren dan interaktif. Sayangnya, script dari pihak ketiga ini biasanya rakus resource, sehingga bikin loading blog kita jadi lambat. Kalau loading lambat, Google bisa bete, dan pengunjung pun bakal langsung kabur.
Tapi tenang aja! Di artikel ini, kita bakal bahas tutorial pasang komentar Disqus / Facebook tanpa membebani kecepatan loading blog. Penasaran gimana caranya? Yuk, simak panduan lengkapnya di bawah ini!
Mengapa Disqus dan Facebook Bikin Blog Jadi Lemot?
Sebelum kita masuk ke langkah-langkahnya, kita perlu tahu dulu nih apa penyebabnya. Saat ada pengunjung membuka artikel kamu, browser mereka akan mengunduh semua file yang ada di halaman tersebut, termasuk gambar, teks, dan script eksternal.
Disqus dan Facebook bekerja dengan cara memanggil script dari server mereka sendiri. Proses "memanggil" inilah yang memakan waktu lama, apalagi kalau script tersebut dimuat bersamaan saat halaman pertama kali dibuka (synchronous loading).
Solusinya? Kita akan menggunakan teknik bernama Lazy Load. Sederhananya, kolom komentar baru akan dimuat (di-load) hanya ketika pengunjung menggulir halaman ke bawah (scroll) mendekati area komentar, atau ketika mereka mengklik tombol "Tampilkan Komentar". Dengan teknik ini, score kecepatan blog kamu di Google PageSpeed Insights bakal tetap hijau dan aman!
1. Tutorial Pasang Komentar Disqus dengan Fitur Lazy Load (On-Click)
Metode terbaik untuk memasang Disqus tanpa bikin lemot adalah dengan sistem On-Click (komentar baru muncul setelah tombol diklik). Cara ini sangat ampuh menghemat kuota data pengunjung dan menjaga performa blog tetap ngebut.
Berikut adalah langkah-langkah untuk platform Blogger/Blogspot:
Langkah 1: Ambil Shortname Disqus Kamu
Masuk ke akun Disqus kamu.
Buka bagian dasbor admin, lalu cari Shortname dari situs yang sudah kamu daftarkan. Catat baik-baik shortname tersebut.
Langkah 2: Edit HTML Template Blog
Masuk ke dasbor Blogger > Tema > klik tanda panah ke bawah di sebelah "Sesuaikan" > Edit HTML.
Cari kode kolom komentar bawaan blog kamu (biasanya diawali dengan
<div class='comments' id='comments'>atau sejenisnya).Ganti kode komentar bawaan tersebut dengan kode HTML tombol Disqus di bawah ini:
<div id='disqus_thread'>
<div id='disqus_loader' onclick='loadDisqus();'>Tampilkan Komentar Disqus</div>
</div>
Langkah 3: Tambahkan Script Lazy Load Disqus
Selanjutnya, letakkan kode JavaScript ini tepat di atas kode </body> (biasanya berada di paling bawah template kamu):
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname = 'SHORTNAME_KAMU_DISINI'; // Ganti dengan shortname Disqus kamu
var disqus_loaded = false;
function loadDisqus() {
if (!disqus_loaded) {
disqus_loaded = true;
var e = document.getElementById('disqus_loader');
if (e) { e.style.display = 'none'; }
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}
}
//]]>
</script>
Tips Penting: Jangan lupa ganti tulisan
SHORTNAME_KAMU_DISINIdengan shortname asli milik blog kamu ya!
Langkah 4: Rapikan dengan Sedikit CSS
Agar tombol "Tampilkan Komentar" terlihat menarik, tambahkan kode CSS ini di atas kode </style> atau ]]></b:skin>:
#disqus_loader {
background: #2980b9;
color: #fff;
text-align: center;
padding: 12px;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
margin: 20px 0;
transition: background 0.3s;
}
#disqus_loader:hover {
background: #3498db;
}
Simpan template kamu, lalu coba buka salah satu artikel. Kolom komentar Disqus tidak akan membebani loading awal karena baru akan aktif saat tombol tersebut diklik.
2. Tutorial Pasang Komentar Facebook Tanpa Bikin Blog Lemot
Sama seperti Disqus, widget Facebook Comments bawaan resmi dari Meta juga terkenal sangat berat. Untuk mengatasinya, kita akan memakai trik Lazy Load on Scroll. Komentar Facebook baru akan terunduh secara otomatis ketika pengunjung mulai membaca bagian bawah artikel.
Berikut cara menerapkannya di blog:
Langkah 1: Siapkan HTML Tempat Komentar
Cari area komentar di HTML blog kamu, lalu pasang kode penampung berikut ini:
<div id='fb-comment-box'>
<div class='fb-comments' data-colorscheme='light' data-numposts='5' data-width='100%' expr:data-href='data:blog.canonicalUrl'/>
</div>
Langkah 2: Pasang Script Lazy Load Facebook
Letakkan kode JavaScript berikut ini tepat di atas kode </body>:
<script type='text/javascript'>
//<![CDATA[
var fb_loaded = false;
window.addEventListener('scroll', function() {
if ((document.documentElement.scrollTop != 0 && fb_loaded === false) || (document.body.scrollTop != 0 && fb_loaded === false)) {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.src = "https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v15.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
fb_loaded = true;
}
}, true);
//]]>
</script>
Dengan script di atas, saat pertama kali halaman dibuka, browser sama sekali tidak mendownload data dari Facebook. Baru setelah pengunjung melakukan scroll (gulir layar), sistem akan mengunduh script Facebook secara asynchronous (di latar belakang). Blog kamu pun dijamin tetap super cepat!
Bagaimana Jika Kamu Menggunakan WordPress?
Bagi kamu pengguna WordPress, kamu tidak perlu pusing-pusing melakukan edit kode manual seperti di atas. Kamu bisa memanfaatkan plugin gratis yang sudah dioptimasi untuk kecepatan website.
Untuk Disqus: Gunakan plugin resmi Disqus Conditional Load. Plugin ini otomatis memuat kolom komentar menggunakan fitur lazy load (baik berdasarkan klik maupun scroll).
Untuk Facebook: Kamu bisa menggunakan plugin Lazy Social Comments. Plugin ini sangat ringan dan memastikan script Facebook tidak berjalan sebelum pengunjung menggulir halaman ke area komentar.
Kesimpulan
Mempercantik blog dengan fitur diskusi yang modern itu sah-sah saja, tapi jangan sampai mengorbankan kenyamanan pengunjung. Melalui tutorial pasang komentar Disqus / Facebook tanpa membebani kecepatan loading blog ini, kamu sekarang bisa mendapatkan dua keuntungan sekaligus: fitur komentar yang interaktif dan performa blog yang tetap cepat serta SEO-friendly.
Trik lazy load dan on-click load terbukti menjadi solusi terbaik untuk menjinakkan script pihak ketiga yang berat. Jadi, tunggu apa lagi? Yuk langsung praktikkan di blog kamu sekarang juga!
Kalau kamu punya pertanyaan atau mengalami kendala saat memasang kodenya, jangan ragu untuk tulis di kolom komentar di bawah ya. Selamat mencoba dan salam sukses blogger Indonesia!
0 Response to "Tutorial Pasang Komentar Disqus / Facebook Tanpa Membebani Kecepatan Loading Blog"
Posting Komentar