Kecepatan loading blog merupakan salah satu bagian penting dalam memberikan pengalaman browsing yang nyaman. Halaman yang membutuhkan waktu lama untuk menampilkan konten dapat membuat pengunjung menunggu lebih lama sebelum membaca artikel atau berinteraksi dengan halaman.
Pada Blogger atau Blogspot, template dan fitur tertentu dapat menggunakan berbagai JavaScript bawaan Blogger. Beberapa script tersebut diperlukan untuk menjalankan fungsi tertentu, tetapi pada kondisi tertentu pemuatan JavaScript juga dapat berkontribusi terhadap pekerjaan browser saat halaman sedang dirender.
Salah satu teknik yang dapat dicoba adalah defer JavaScript, yaitu menunda pemuatan atau eksekusi script tertentu sampai halaman utama selesai dimuat. Teknik ini dapat membantu mengurangi pekerjaan JavaScript pada tahap awal pemuatan halaman, tetapi hasil akhirnya tetap bergantung pada struktur template, jumlah script, widget, gambar, dan elemen lain yang digunakan.
Apa Itu Defer JavaScript?
Defer JavaScript adalah teknik untuk menunda eksekusi JavaScript sehingga proses rendering konten utama halaman tidak terlalu terbebani oleh script yang tidak harus dijalankan sejak awal.
Secara sederhana, browser perlu memproses HTML, CSS, JavaScript, gambar, dan berbagai resource lainnya ketika membuka sebuah halaman. Jika terlalu banyak JavaScript yang harus diproses pada tahap awal, waktu yang diperlukan untuk menampilkan konten yang dapat dilihat pengunjung dapat ikut terpengaruh.
Dengan penundaan script tertentu, kita dapat mengatur agar JavaScript yang tidak terlalu penting pada tahap awal dijalankan setelah halaman selesai dimuat.
Apakah Defer JavaScript Bisa Mempercepat Blogger?
Defer JavaScript dapat membantu mengurangi beban JavaScript pada proses pemuatan awal, tetapi tidak dapat dianggap sebagai solusi tunggal untuk semua masalah kecepatan Blogger.
Performa blog juga dipengaruhi oleh berbagai faktor seperti:
- Ukuran dan jumlah gambar.
- Jumlah JavaScript pihak ketiga.
- Widget yang digunakan dalam template.
- CSS yang terlalu besar atau kompleks.
- Iklan dan script eksternal.
- Struktur template Blogger.
- Jumlah elemen yang harus dirender browser.
- Kualitas dan ukuran resource yang digunakan halaman.
Karena itu, setelah menerapkan teknik defer, sebaiknya lakukan pengujian sebelum dan sesudah perubahan untuk mengetahui apakah performa blog benar-benar mengalami peningkatan.
Backup Template Blogger Sebelum Mengubah Kode
Sebelum melakukan modifikasi pada template Blogger, sangat disarankan untuk mencadangkan template terlebih dahulu. Backup akan berguna apabila terjadi kesalahan penulisan kode atau terdapat fitur template yang tidak bekerja setelah perubahan.
Untuk mencadangkan template, Anda dapat membuka:
- Dashboard Blogger.
- Pilih blog yang ingin diedit.
- Buka menu Tema.
- Pilih opsi untuk mencadangkan atau backup template.
- Simpan file backup di tempat yang aman.
Dengan melakukan backup terlebih dahulu, Anda memiliki salinan template yang dapat digunakan kembali apabila diperlukan.
Kode Defer JavaScript untuk Blogger
Berikut contoh konsep sederhana untuk menunda pemuatan JavaScript menggunakan JavaScript. Dalam praktiknya, jangan langsung memasukkan URL script secara acak. URL yang ditunda harus benar-benar merupakan script yang digunakan oleh template atau fitur blog Anda.
<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>Penting: URL seperti 123456789-widgets.js pada contoh di atas bukan URL universal yang harus digunakan pada semua template Blogger. Versi dan kebutuhan script dapat berbeda. Pastikan URL yang digunakan sesuai dengan script yang memang dipanggil oleh template Anda.
Cara Memasang Script Defer di Template Blogger
Setelah memahami cara kerja script, Anda dapat mencoba memasangnya melalui editor HTML template Blogger. Langkah ini perlu dilakukan dengan hati-hati karena kesalahan pada JavaScript dapat memengaruhi widget atau fitur tertentu.
1. Buka Menu Tema
Masuk ke dashboard Blogger kemudian pilih Tema. Selanjutnya buka bagian Edit HTML untuk mengakses kode template.
2. Cari Tag </body>
Gunakan fitur pencarian pada editor kode dengan menekan CTRL + F, kemudian cari:
</body>Tag tersebut biasanya berada di bagian bawah struktur template.
3. Tambahkan Script Sebelum </body>
Anda dapat menempatkan script penundaan sebelum tag </body>. Contoh berikut menggunakan pola pemuatan script setelah event load:
<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>Namun, sama seperti contoh sebelumnya, jangan menganggap URL JavaScript tersebut berlaku untuk semua template Blogger. Jika script yang dibutuhkan template memiliki URL atau versi berbeda, Anda perlu menyesuaikannya.
Tentang Atribut b:css dan b:js pada Blogger
Pada beberapa modifikasi template Blogger, Anda mungkin menemukan atribut seperti b:css dan b:js. Atribut tersebut berkaitan dengan pemrosesan resource bawaan Blogger pada template tertentu.
Contoh struktur yang sering digunakan dalam modifikasi template adalah:
<html b:css='false' b:js='false' ...>Namun, jangan menambahkan atau mengubah atribut tersebut tanpa memahami dampaknya. Menonaktifkan resource bawaan dapat menyebabkan beberapa fitur atau komponen Blogger tidak bekerja sebagaimana mestinya, terutama jika template masih bergantung pada JavaScript atau CSS bawaan tertentu.
Jika tujuan Anda hanya mempercepat loading, lebih aman mengidentifikasi script yang benar-benar tidak diperlukan pada tahap awal terlebih dahulu daripada menonaktifkan seluruh resource bawaan secara sembarangan.
Periksa Script yang Menghambat Rendering
Setelah memasang perubahan, lakukan pemeriksaan terhadap halaman blog. Perhatikan apakah semua komponen masih bekerja dengan normal, terutama fitur yang bergantung pada JavaScript.
Beberapa elemen yang perlu diperiksa antara lain:
- Menu navigasi.
- Kolom komentar.
- Tombol pencarian.
- Widget Blogger.
- Tombol berbagi artikel.
- Slider atau carousel.
- Popup dan elemen interaktif.
- Script iklan.
- Fitur template yang menggunakan JavaScript.
Jika ada fitur yang tiba-tiba tidak berfungsi, kemungkinan script yang dibutuhkan oleh fitur tersebut ikut tertunda atau tidak lagi dipanggil dengan cara yang sesuai.
Cara Menguji Kecepatan Loading Blogger
Setelah melakukan perubahan pada template, jangan hanya mengandalkan perasaan bahwa blog terasa lebih cepat. Lakukan pengujian menggunakan alat pengukuran performa agar Anda dapat membandingkan hasil sebelum dan sesudah optimasi.
Beberapa hal yang dapat diperhatikan ketika melakukan pengujian meliputi:
- Waktu pemuatan konten utama.
- Jumlah JavaScript yang harus diproses.
- Resource yang menghambat rendering.
- Ukuran halaman.
- Jumlah request.
- Responsivitas halaman saat pertama kali dibuka.
Anda dapat menggunakan Google PageSpeed Insights atau alat pengujian performa lainnya untuk mendapatkan gambaran mengenai kondisi halaman.
Jangan Hanya Fokus pada JavaScript
Optimasi JavaScript hanyalah salah satu bagian dari optimasi kecepatan website. Jika blog masih terasa lambat setelah script ditunda, kemungkinan terdapat faktor lain yang menjadi penyebab.
Optimalkan Ukuran Gambar
Gambar berukuran besar dapat menjadi salah satu resource yang cukup berat. Gunakan ukuran gambar yang sesuai dengan area tampilan dan pertimbangkan format gambar yang lebih efisien jika sesuai dengan kebutuhan.
Kurangi Script Pihak Ketiga
Periksa kembali script dari layanan eksternal seperti widget, tracking, popup, iklan, dan berbagai layanan tambahan. Semakin banyak resource eksternal yang digunakan, semakin banyak pekerjaan yang harus dilakukan browser.
Gunakan Widget Secukupnya
Widget memang dapat menambah fungsi pada blog, tetapi penggunaan widget secara berlebihan juga dapat menambah elemen HTML, CSS, JavaScript, dan request eksternal.
Periksa CSS dan Struktur Template
Selain JavaScript, struktur HTML dan CSS juga berpengaruh terhadap proses rendering halaman. Template yang terlalu kompleks dapat membutuhkan lebih banyak pekerjaan browser untuk menampilkan halaman.
Kelebihan dan Risiko Defer JavaScript
Teknik defer memiliki beberapa manfaat, tetapi juga memiliki risiko apabila diterapkan tanpa memahami ketergantungan antar-script.
Kelebihan
- Mengurangi pekerjaan JavaScript pada tahap awal pemuatan halaman.
- Dapat membantu mempercepat tampilnya konten utama pada kondisi tertentu.
- Tidak selalu membutuhkan plugin tambahan.
- Dapat diterapkan pada template yang memungkinkan modifikasi JavaScript.
Risiko
- Widget tertentu dapat mengalami error.
- Script yang saling bergantung dapat gagal dijalankan.
- Fitur interaktif mungkin baru tersedia setelah halaman selesai dimuat.
- Kesalahan URL script dapat membuat fitur tertentu tidak bekerja.
- Hasil optimasi dapat berbeda pada setiap template Blogger.
Cara Mengatasi Widget Blogger yang Tidak Berfungsi
Jika setelah menerapkan defer terdapat widget atau fitur yang tidak berfungsi, langkah pertama adalah memeriksa kembali script yang ditunda.
Anda dapat mencoba menonaktifkan perubahan sementara untuk memastikan apakah masalah memang berasal dari script defer. Jika benar, periksa script mana yang dibutuhkan oleh fitur tersebut dan jangan menunda script tersebut secara sembarangan.
Untuk template yang kompleks, sebaiknya lakukan perubahan satu per satu. Dengan cara ini, Anda lebih mudah mengetahui perubahan mana yang menyebabkan masalah.
Tips Aman Mengoptimalkan Loading Blogger
- Backup template sebelum melakukan perubahan.
- Catat kode asli sebelum menggantinya.
- Jangan menunda semua JavaScript secara membabi buta.
- Periksa ketergantungan antar-script.
- Uji tampilan desktop dan mobile.
- Periksa semua widget setelah optimasi.
- Bandingkan performa sebelum dan sesudah perubahan.
- Jangan hanya mengejar skor PageSpeed tanpa memperhatikan pengalaman pengguna sebenarnya.
Kesimpulan
Defer JavaScript di Blogger dapat menjadi salah satu teknik yang bisa dicoba untuk mengurangi beban JavaScript pada proses pemuatan awal halaman. Dengan menunda script tertentu, browser dapat memiliki lebih banyak kesempatan untuk menyelesaikan proses rendering konten utama sebelum menjalankan script yang tidak terlalu penting pada tahap awal.
Namun, teknik ini bukan solusi tunggal untuk membuat Blogspot menjadi cepat. Hasil optimasi sangat bergantung pada struktur template, widget, gambar, CSS, JavaScript pihak ketiga, iklan, dan berbagai resource yang digunakan pada halaman.
Karena itu, lakukan perubahan secara bertahap, selalu backup template sebelum mengedit kode, dan lakukan pengujian setelah setiap perubahan. Dengan pendekatan tersebut, Anda dapat mencari konfigurasi yang lebih seimbang antara kecepatan loading, fungsi template, dan pengalaman pengunjung.
FAQ Defer JavaScript Blogger
Apakah defer JavaScript bisa digunakan di Blogger?
Ya. Teknik penundaan JavaScript dapat diterapkan pada Blogger melalui modifikasi kode template atau script tertentu. Namun, penerapannya harus disesuaikan dengan struktur template dan kebutuhan script.
Apakah defer JavaScript pasti membuat Blogger lebih cepat?
Tidak selalu. Defer dapat membantu mengurangi pekerjaan JavaScript pada tahap awal dalam kondisi tertentu, tetapi kecepatan halaman juga dipengaruhi gambar, CSS, widget, iklan, script pihak ketiga, dan struktur template.
Apakah script bawaan Blogger boleh dinonaktifkan?
Perubahan terhadap script bawaan Blogger perlu dilakukan dengan hati-hati karena beberapa fitur template atau widget mungkin bergantung pada resource tersebut.
Apakah perlu backup template sebelum memasang defer JavaScript?
Ya. Backup sangat disarankan sebelum melakukan perubahan pada kode template agar Anda dapat mengembalikan template ke kondisi sebelumnya apabila terjadi masalah.
Mengapa widget Blogger tidak berfungsi setelah menggunakan defer?
Kemungkinan script yang diperlukan oleh widget ikut ditunda atau tidak dimuat dengan cara yang sesuai. Periksa kembali script yang diubah dan lakukan pengujian untuk menemukan script yang menyebabkan masalah.
Apakah defer JavaScript berpengaruh terhadap SEO?
Optimasi performa dapat mendukung pengalaman pengguna, tetapi tidak ada jaminan bahwa satu teknik defer JavaScript secara otomatis meningkatkan peringkat pencarian. SEO dipengaruhi oleh banyak faktor, termasuk kualitas konten, relevansi, pengalaman halaman, struktur website, dan faktor teknis lainnya.