Mengatasi Render Blocking JavaScript

Kali ini, kita bicara tentang bagaimana cara mengatasi render blocking Javascript. Ini juga menjadi salah satu penentu apakah loading web/blog cepat atau lambat. Javascript atau selanjutnya saya sebut JS, juga merupakan salah satu elemen yang dibutuhkan dalam sebuah halaman web. JS memegang peranan dalam menjalankan beberapa fungsi web atau blog. Masalahnya, file JS yang biasanya terletak di header, akan membuat halaman web melakukan render sebelum menampilkan konten. File-file JS ini akan lebih diutamakan, karena terletak di header. Jadi, browser akan melakukan eksekusi dulu terhadap JS sebelum menampilkan konten web/blog. Ini yang akan memperlambat loading web.

Mengatasi render blocking JavaScript

Untuk mempertegas saja, bahwa tulisan ini dibuat untuk blog atau web self hosted, bukan blogspot. Untuk blogspot, akan sedikit berbeda penerapannya. Dan bukan itu yang kita bahas.

Memindahkan JavaScript bisa menjadi alternatif

Seperti yang saya katakan di atas, bahwa keberadaan JS di header, akan membuat browser melakukan eksekusi dulu untuk JS yang tersimpan di sana. Kalau hanya satu JS, mungkin tidak terlalu menjadi masalah. Namun, dengan banyaknya fungsi sebuah web, biasanya akan banyak JS yang harus digunakan. Dan akibatnya, loading web menjadi lama.

Agar halaman web menjadi lebih cepat terbuka, maka kita dapat memindahkan file JS yang ada di header, ke tempat lain di halaman web kita. Tempat yang paling ideal adalah sebelum tag </body>. Kalau Anda menggunakan HTMLy, silahkan buka file layout.html.php, cek apakah file JS masih ada di sana. Mungkin tidak akan Anda temukan kalau Anda memakai theme bawaan atau default, karena semua file JS sudah diletakkan di atas tag </body>. Sedangkan kalau menggunakan Wordpress, ada sebuah plugin yang dapat digunakan yaitu Script to footer dari Joshua David Nelson atau plugin milik Vladimir Prelovac.

Defer parsing JavaScript

Memindahkan saja, sebenarnya sudah cukup bagi pagespeed. Tapi, akan lebih baik kalau kita dapat melakukan defer terhadap JS yang termuat. Defer secara mudah berarti menunda. Artinya, tidak semua JS harus dimuat saat halaman dibuka. Jadi, kita dapat memisahkannya, mana JS yang harus ada saat halaman dibuka dan mana yang tidak harus. Setelah teridentifikasi, maka kita dapat memisahkannya. Untuk mengetahuinya, kita dapat menggunakan tool pagespeed yang tersedia. Misal Page Speed Insight dari Google.

Setelah mengetahuinya, baru kita melakukan defer. Untuk eksternal JS, kita dapat menggunakan event “on load” untuk memanggilnya. Jadi JS hanya akan dijalankan, saat halaman yang membutuhkannya dibuka. Satukan JS sesuai kebutuhannya, lalu simpan di file sendiri misalnya diberi nama myblog.js. Simpan di hosting sendiri atau bisa memanfaatkan Github. Lalu gunakan script berikut untuk memanggilnya. Script ini saya dapatkan dari Patrick Sexton melalui blognya. Praktisi yang juga menerapkan tutorial yang diajarkannya. Soalnya, banyak yang tidak. Ha..ha..ha..

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "myblog.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>

Letakkan script ini di atas tag </body>. Usahakan juga untuk menggunakan JS yang dimuat secara async.

Masalah dengan Jquery

Salah satu file JS yang krusial adalah Jquery. Ada fungsi theme yang menggunakannya. Bahkan banyak. Ada yang masih bisa berjalan, kalau JS jquery ini disimpan dengan cara di atas, contohnya di web ini. Namun, ada juga yang tidak berjalan, contohnya di web ini. Solusinya adalah tetap menempatkan Jquery di header bagi blog yang membutuhkannya, sedangkan JS lainnya dipindah. Itu yang saya lakukan. Untuk web yang kedua, saya tahu karena saya yang menginstall-nya, untuk adik saya itu. Ha..ha..

Begitu, cara saya mengatasi render blocking JavaScript. Semoga bermanfaat.