Kecepatan loading blog adalah salah satu faktor utama yang menentukan kenyamanan pengunjung dan peringkat SEO di mesin pencari. Secara default, Blogger memuat berbagai script internal seperti widgets.js dan bundle.js yang seringkali menyebabkan masalah render-blocking. Masalah ini membuat browser harus berhenti memproses tampilan halaman hanya untuk mengunduh script tersebut, sehingga blog terasa lambat saat pertama kali dibuka.
Solusi paling efektif untuk mengatasi masalah ini adalah dengan menggunakan teknik Defer atau penundaan. Dengan teknik ini, semua script bawaan Blogger baru akan dijalankan setelah browser selesai memuat seluruh struktur HTML dan CSS utama. Hasilnya, konten teks dan gambar akan muncul jauh lebih cepat, dan skor Core Web Vitals Anda di Google PageSpeed Insights akan meningkat drastis.
Langkah Awal Sebelum Modifikasi
Sebelum melakukan perubahan pada kode template, sangat disarankan untuk melakukan backup template terlebih dahulu. Hal ini sangat penting untuk mengantisipasi jika terjadi kesalahan penulisan kode yang bisa menyebabkan widget tidak berfungsi. Anda bisa masuk ke menu Tema, klik ikon panah di sebelah Sesuaikan, lalu pilih Cadangkan.
Kode Script Defer Javascript Blogger
Berikut adalah kode Javascript yang berfungsi untuk menunda pemuatan script bawaan Blogger secara otomatis. Kode ini akan menangkap permintaan pemuatan script internal dan menundanya hingga halaman benar-benar siap.
<script type='text/javascript'>
//<![CDATA[
var defered_scripts = [
"https://www.blogger.com/static/v1/widgets/123456789-widgets.js",
"//www.google.com/jsapi"
];
function defer_js_loading() {
for (var i = 0; i < defered_scripts.length; i++) {
var element = document.createElement("script");
element.src = defered_scripts[i];
document.body.appendChild(element);
}
}
window.addEventListener("load", defer_js_loading, false);
//]]>
</script>Cara Memasang Kode di Template Blogger
Pertama, silakan masuk ke dashboard Blogger Anda lalu pilih menu Tema dan klik Edit HTML. Setelah jendela editor terbuka, cari kode </body> yang biasanya terletak di bagian paling bawah template. Gunakan fitur pencarian dengan menekan tombol CTRL + F pada keyboard untuk mempermudah pencarian.
Setelah menemukan tag tersebut, salin kode di bawah ini dan letakkan tepat di atas tag </body>. Kode ini menggunakan metode penggantian script bawaan agar tidak dimuat secara bersamaan saat halaman pertama kali diakses.
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://www.blogger.com/static/v1/widgets/2924185122-widgets.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
//]]>
</script>Menonaktifkan Script Bawaan Secara Manual
Agar kode di atas bekerja maksimal, Anda perlu memastikan script bawaan asli milik Blogger tidak terpanggil dua kali. Anda harus mencari tag <html...> di bagian paling atas template Anda. Ubah atau tambahkan atribut b:css='false' dan b:js='false' ke dalam tag tersebut. Langkah ini akan menghentikan Blogger dari memuat file CSS dan JS default yang seringkali tidak diperlukan untuk tampilan blog kustom.
<html b:css='false' b:js='false' ... >Melakukan Verifikasi Hasil
Setelah semua kode terpasang dan disimpan, langkah terakhir adalah melakukan pengujian. Anda bisa menggunakan alat gratis seperti Google PageSpeed Insights atau GTmetrix. Masukkan URL blog Anda dan lihat perubahannya pada bagian Eliminate render-blocking resources. Jika langkah dilakukan dengan benar, script bawaan Blogger tidak lagi muncul sebagai penghambat loading dan waktu interaksi halaman akan menjadi jauh lebih responsif.
Perlu diingat bahwa setiap template memiliki struktur yang berbeda. Jika setelah pemasangan kode ini ada fitur blog yang tidak berfungsi seperti widget komentar atau tombol share bawaan, pastikan untuk memeriksa kembali URL script yang ditunda agar sesuai dengan versi yang dibutuhkan oleh template Anda.