Matawebsite Promo Lebaran 2022

Mengoptimalkan Load Website dengan penggunaan Async dan Defer pada script javascript

date 20 May 2021
date Sulfikardi
date 1900
date Web Design
Mengoptimalkan Load Website dengan penggunaan Async dan Defer pada script javascript

Saat kita menambahkan javascript pada halaman HTML kita, baik itu internal ataupun external akan mempengaruhi waktu load website kita, karena ketika browser menemukan tag script saat parsing HTML maka browser akan berhenti melakukan proses parsing dan mengeksekusi javascript hingga selesai.


Untungnya tag HTML script memiliki attribute async dan defer yang berguna untuk mempercepat page load time. Attribute async muncul di HTML 5 sedangkan defer sudah cukup lama di support oleh browser termasuk Internet Explorer. Istilah Async dan Defer yang biasanya digunakan untuk meload fungsi javascript, Sebenarnya Async dan Defer memiliki fungsi yang sama yaitu untuk mempercepat loading website, hanya saja ada sedikit perbedaan antara keduanya yang jarang diketahui oleh sebagian orang.

Perbedaan dari Async dan Defer

1. Async

Dengan attribute async, browser akan melakukan download script secara paralel dengan proses parsing HTML. Browser kemudian akan melakukan berhenti parsing ketika melakukan eksekusi javascript yang telah di download tersebut. Alhasil browser akan lebih cepat melakukan proses rendering dibanding tanpa attribute async.


Dengan menggunakan Async, HTML akan tetap dimuat secara cepat tanpa menunggu proses download script eksternal terlebih dahulu. Async memiliki 1 kelemahan, yaitu bagi pengguna laptop/device yang spesifikasinya low-end, terlalu banyak script yang dibuat Async menyebabkan lag. Selain itu, Async juga dapat membuat beberapa script menjadi tidak bekerja dengan baik, sehingga masalah-masalah umum seperti menu dropdown tidak berfungsi atau widget tidak berjalan sering terjadi.


Ada kemungkinan browser selesai mendownload dan eksekusi sebelum atau sesudah event DOMContentLoaded, namun bisa dipastikan selesai download dan eksekusi sebelum event load. Sehingga jangan menggunakan event DOMContentLoaded atau jQuery ready didalam file javascript yang dipasang script async karena kode javascript tersebut belum pasti dieksekusi.

2. Defer

Defer bila diartikan ke dalam bahasa Indonesia yaitu menunda. Dalam dunia web, Defer memiliki arti sebagai penundaan eksekusi. Script yang diberi Defer sama seperti Async, yaitu didownload pada saat HTML sedang diparse. Bedanya, setelah selesai didownload, script tidak langsung dieksekusi. Script baru dieksekusi dan dijalankan ketika HTML telah selesai di parse hingga 100%.

Defer memiliki 1 kelemahan, yaitu bisa saja script tersebut tidak berjalan dengan semestinya, karena ada beberapa script yang memang harus dieksekusi saat HTML sedang diparse atau belum selesai diparse sepenuhnya. Berbeda dengan async, jika kode dipasang script defer maka kode DOMContentLoaded atau jQuery ready bisa dipastikan akan tereksekusi.

Kapan Async atau Defer Digunakan ?

  1. Hanya gunakan async dan/atau defer untuk eksternal javascript.
  2. Jika Javascript indenpenden dan tidak terkait kode javascript yang lain, gunakan async.
  3. Jika ada javascript yang tergantung di javascript lain, gunakan defer dan pastikan dieksekusi saat event DOMContentLoaded atau jQuery ready.
Matawebsite Promo
sul.png

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Artikel Populer

Halo, ada yang bisa kami bantu?
Daftar Sekarang