Tunda Kode Javascript, Tingkatkan Performa SEO

Saatnya Optmasi Website Kalian Supaya Lebih Kenceng!

Tunda kode Javascript


 Lagi-lagi saya masih berbicara mengenai on-page SEO, dan lagi, masih saya masih ngomongin tentang Javascript, kali ini bagaimana kita dapat menunda eksekusi suatu script pada sebuah website.

Tidak bisa dipungkiri lagi, penggunaan script pada sebuah website tidak mungkin bisa dihindari, selain untuk keperluan mempercantik website, untuk menambahkan user-experience seperti menangani event seperti mengklik tombol-tombol dikeyboard, hingga untuk menganalisis perilaku pengunjung menggunakan Google Analytics.

Tentunya kita tidak bisa menyerah begitu saja dalam melakukan optimasi website kita gara-gara hal-hal di atas tidak bisa ditiadakan. Dan ide yang akan kita gunakan untuk mengatasi kondisi-kondisi di atas yaitu dengan menunda script-script yang kita gunakan.

Taruh di ujung

Cara yang paling bener-bener simpel alias sederhana yaitu dengan cara meletakkannya di ujung kode atau di akhir baris kode kalian, tentunya masih di dalam tag <body>. Dengan teknik ini kalian gak perlu mengoding sama sekali, yang kalian perlu lakukan hanyalah memindahkannya saja ke bawah. Perlu diperhatikan juga beberapa script  memerlukan eksekusi dari suatu script lainnya terlebih, dahulu, intinya kita perlu menjaga urutan script yang ingin dipindahkan. Dan cara ini menurut saya yang paling efektif diantara cara yang lain.

Eksekusi setelah HTML ter-load

Yang kedua, jika script kalian tidak begitu krusial alias penting kalian bisa eksekusinya setelah dokumen HTML kalian ter-load. Caranya yaitu dengan menambahkan listener untuk kondisi "DOMContentLoad", yakni seperti berikut

document.addEventListener("DOMContentLoad", function(){
    // Isi dengan kode kalian
});

Atau bisa juga dengan kode berikut

document.onload = function(){
    // Isi dengan kode kalian
};

Keduanya sebenarnya sama aja, namun secara pribadi saya lebih memilih yang pertama. Karena dengan cara yang pertama saya bisa menambahkan listener sebanyak mungkin dibaris manapun tanpa menimpa fungsi yang telah diatur untuk dieksekusi.

Dengan atribute async dan defer

Gimana kasusnya kalau script kalian terpisah, yaitu disertakan dalam kode HTML dengan <script src="name_file_JS_kalian.js>? Sebenarnya kalau bukan script dari pihak ketika atau third-party saya lebih suka menggunakan inline script, yaitu kode JS yang langsung ditempel atau ditulis di dalam kode HTML kita. Secara maintenance memang lebih nyaman dan mudah jika dipisahkan seperti itu, dan tidak perlu mereplace kode JS yang ada diseluruh halaman kita, tapi secara performa, cara ini memerulkan permintaan HTTP tersendiri yang tentunya memerlukan waktu.

Oke balik lagi ke masalah async dan defer, jadi lebih baik yang mana nih para tukang SEO? Dengan segala kerendahan hati, saya meminta maaf, karena jawabannya tergantung keperluan kita.

Tapi tergantung disini bukan berarti saya memberikan jawaban yang setengah-setengah dan tidak konkrit, maksudnya gini, kalau memang script yang kalian gunakan masih bisa ditunda, saya sarankan untuk menggunakan atribut defer tapi kalau tidak memungkinkan untuk ditunda gunakanlah async.

Secara tekniks perbedaan antara keduanya yaitu, jika async maka file JS yang dimaksud akan diunduh secara asinkron dan dieksekusi apabila file tersebut berhasil diunduh, gak peduli apakah dokumen HTML kita sudah terload apa belum. Nah sedangkan defer itu mirip seperti async hanya saja eksekusi kode JS-nya akan dilakukan ketika semua kode HTML kita sudah berhasil diparsing.

Dari sini kan jelas bahwa, untuk keperluan seperti Google Analytics kalau bisa di async aja meskipun bakal ngaruh ke performa tapi gak seberapa kok, karena jika kita defer kemungkinan besar GA akan mendapatkan data yang kurang akurat, terutama unutk data bounce rate-nya, begitu juga untuk Google Adsense.

--

Oke cukup sekian tutorial dari saya (Lintang), jika ada pertanyaan silahkan langsung ditanyakan saja, terima kasih.

Komentar

Postingan populer dari blog ini

Hindari Penggunaan Library JS Berlebihan

Belajar SEO Pakai Logika