Optimalisasi Penggunaan JavaScript Untuk Meningkat Performa Website

Share

Saat memuat JavaScript pada halaman HTML, Anda harus berhati-hati agar tidak merusak kinerja pemuatan halaman pada web browser. Tergantung di mana dan bagaimana cara Anda ketika menambahkan JavaScript ke halaman HTML akan mempengaruhi waktu pemuatan. JavaScript dianggap sebagai “sumber daya pemblokir parser”. Ini berarti bahwa penguraian dokumen HTML itu sendiri bisa diblokir oleh JavaScript. Ketika parser mencapai tag <script>, apakah itu internal atau eksternal, akan berakibat berhentinya proses rendering halaman untuk mengambil (jika file JavaScript-nya eksternal) dan kemudian menjalankannya.

Proses ini dapat menjadi masalah jika kita memuat beberapa file JavaScript pada halaman, karena ini akan mengganggu waktu untuk membuka file JavaScript tersebut. Bahkan juga ketika di halaman itu tidak dibutuhkan. Setiap kali parser HTML menemukan baris <script>, permintaan akan dibuat untuk mengambil skrip, dan skrip dijalankan. Setelah proses ini selesai, parsing dapat dilanjutkan, dan sisa HTML dapat dianalisis. Seperti yang dapat Anda bayangkan, operasi ini dapat berdampak besar pada waktu pemuatan halaman.

Jika skrip membutuhkan waktu sedikit lebih lama untuk memuat dari yang diharapkan, misalnya jika jaringan internet agak lambat, pengunjung akan cenderung melihat halaman kosong hingga skripnya dimuat dan dieksekusi.

Untungnya, elemen <script> memiliki dua atribut, async dan defer, yang dapat memberi kita kontrol lebih terhadap bagaimana dan kapan file eksternal diambil dan dieksekusi.

Penggunaan normal <script>

Mari mulai dengan menentukan apa yang dilakukan <script> tanpa atribut apa pun. File HTML akan diuraikan hingga file JavaScript ditemukan, pada saat itu parsing akan berhenti dan permintaan akan dibuat untuk mengambil file (jika itu eksternal). Script kemudian akan dieksekusi sebelum parsing dilanjutkan.

<script>

js execution normal

Kalau ditempatkan di antara tag <head>, hai ini akan buruk karena akan mempengaruhi proses rendering halaman. Solusi yang sangat umum untuk masalah ini adalah meletakkan tag skrip ke bagian bawah halaman, tepat sebelum tag penutup </ body>.

Menggunakan atribut Async

Teknik ini adalah yang terbaik, parser HTML dapat dilanjutkan dan skrip akan dijalankan segera setelah siap atau setelah berhasil dimuat.

<script async>

js execution async

Atribut ini hanya tersedia untuk file JavaScript yang ditempatkan secara eksternal. Ketika JavaScript eksternal memiliki atribut ini, file dapat diunduh saat dokumen HTML masih di-parsing. Setelah diunduh, parsing dijeda agar skrip dapat dieksekusi.

Menggunakan atribut Defer

Proses ini menyelesaikan unduhan file selama parser HTML dan hanya akan dijalankan setelah parser selesai.

<script defer>

js execution defer

Seperti JavaScript yang dimuat secara async, file dapat diunduh saat dokumen HTML masih diparser. Namun, meskipun file telah diunduh sepenuhnya sebelum dokumen selesai diparsel, skrip tidak dijalankan hingga parser selesai.

Kapan kita mesti menggunakan async atau defer?

  • Jika JavaScript bersifat modular dan tidak bergantung pada JavaScript apa pun, gunakan async.
  • Jika JavaScript memanggil JavaScript lain maka gunakan defer.

1 Comment

  1. info yang bermanfaat,terimakasih sudah bebagi

Tinggalkan Balasan

Your email address will not be published.

*