Optimalisasi JavaScript Untuk Meningkatkan Performa Website - indephedia.com

Header Ads

Optimalisasi JavaScript Untuk Meningkatkan Performa Website



INDEPHEDIA.com - Agar tidak merusak kinerja pemuatan halaman pada web browser, saat memuat JavaScript pada halaman HTML, Anda harus berhati-hati. Sebab, ketika Anda menambahkan JavaScript ke halaman HTML bisa saja akan mempengaruhi waktu pemuatan.

Di dunia website, JavaScript dianggap sebagai sumber daya pemblokir parser. Ini berarti penguraian dokumen HTML itu sendiri bisa diblokir oleh JavaScript. Ketika parser mencapai tag <script>, baik itu internal atau eksternal, akan berakibat berhentinya proses rendering halaman untuk mengambil -jika file JavaScript eksternal-- dan kemudian menjalankannya.

Apabila kita memuat beberapa file JavaScript pada halaman, proses ini dapat menjadi masalah. Karena hal itu dapat juga akan mengganggu waktu untuk membuka file JavaScript. 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.

Ironisnya, bila 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>

Penggunaan normal <script> atau tanpa atribut apa pun file HTML akan diuraikan hingga file JavaScript ditemukan. Pada saat itu, jika itu eksternal, parsing akan berhenti dan permintaan akan dibuat untuk mengambil file. Script kemudian akan dieksekusi sebelum parsing dilanjutkan.

<script>

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

Solusinya, gunakan atribut Async. Sebab, teknik ini adalah yang terbaik. Parser HTML dapat dilanjutkan dan skrip akan dijalankan segera setelah siap atau setelah berhasil dimuat.

<script 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.

Solusinya, gunakan atribut Defer. Karena, proses ini akan menyelesaikan unduhan file selama parser HTML dan hanya akan dijalankan setelah parser selesai.

<script defer>

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

Pertanyaannya, kapan kita menggunakan async atau defer? Jawabnya, apabila JavaScript bersifat modular dan tidak bergantung pada JavaScript apa pun, gunakan async. Kemudian, jika JavaScript memanggil JavaScript lain maka gunakan defer. (SBB.IN/*)

No comments