🔔 Aktifkan notifikasi disini Google News

8 Tips Sederhana untuk Mempercepat Kode JavaScript Anda

Bagas Arie
JavaScript adalah salah satu dari tiga bahasa utama di halaman web. Meskipun tidak diperlukan, sebagian besar situs memerlukan JavaScript

Rizkyblog.com – JavaScript adalah salah satu dari tiga bahasa utama di halaman web. Meskipun tidak diperlukan, sebagian besar situs memerlukan JavaScript agar berfungsi. Anda dapat memiliki peralatan server terbaik di pasaran, namun kode JavaScript yang buruk dapat menjadi penghambat dan memperlambat waktu muat situs Anda. Berikut beberapa tip untuk mempercepat situs Anda dengan penyesuaian JavaScript sederhana.

Memanipulasi Elemen Sebelum Menambahkannya ke DOM

DOM adalah setiap elemen termasuk HTML dan datanya yang dicetak di browser. Merupakan hal yang umum bagi pengembang untuk mengambil nilai dari DOM dan mengubahnya berdasarkan masukan pengguna. Ini mungkin tampak membosankan, tetapi memanipulasi nilai setelah Anda mencetaknya ke DOM memerlukan waktu lebih lama dibandingkan melakukannya dengan menghapus elemen DOM.

Misalnya, jika Anda memiliki beberapa konten yang ingin Anda cetak ke elemen div, gunakan JavaScript untuk membuat perubahan pada konten sebagai string, lalu cetak string ke elemen tersebut. Anda mengurangi kebutuhan mesin JavaScript untuk memproses HTML saat Anda bekerja dengan konten variabel.

Mempercepat Kode JavaScript Anda

  • Perkecil File JavaScript Anda

Saat Anda membuat file JavaScript, pemformatan membantu Anda membaca kode dan memahami logikanya. Setiap pembuat kode yang pernah lulus kuliah mengetahui pentingnya memformat sintaks agar lebih mudah dibaca. Namun, server web tidak memerlukan karakter format ini untuk memproses file. Anda dapat mengurangi ukuran file JavaScript dengan memperkecilnya.

Minifying adalah proses menghilangkan karakter pemformatan khusus seperti tab dan spasi tambahan dari file pengkodean. Ukuran file dikurangi beberapa byte menghemat waktu pengguna Anda mengunduh skrip. Langkah ini penting untuk situs yang memiliki beberapa skrip eksternal yang harus dimuat agar situs web dapat berfungsi.

  • Gunakan Caching

File JavaScript Anda jarang berubah. File CSS Anda juga jarang berubah. Caching keduanya hanya menyisakan konten pada halaman yang perlu diunduh. Jika Anda menggunakan CDN, maka Anda tidak perlu khawatir tentang caching.

Anda harus menggunakan CDN bila Anda bisa. Banyak perpustakaan JavaScript populer tersedia di CDN. JQuery, Bootstrap, dan Angular adalah tiga contoh perpustakaan yang tersedia di host cloud populer. Cukup colokkan URL CDN, dan Anda tidak perlu lagi khawatir menyimpan file di server Anda. CDN secara otomatis menyimpan objek dalam cache sehingga Anda dapat fokus pada kode lokal, bukan pada pustaka bersama.

  • Tempatkan Script Termasuk di Bagian Bawah Halaman HTML Anda

Saat browser memuat halaman web, browser memuatnya dari atas ke bawah. Merupakan kebiasaan bagi pengembang untuk menempatkan link CSS dan JS di bagian kepala halaman HTML. Bagian ini biasanya ditempatkan di bagian atas halaman setelah tag HTML pembuka, yang berarti browser terlebih dahulu memuat file JS dan CSS, setelah itu memuat konten tag body.

Detik yang diperlukan untuk memuat file JS dan CSS akan membuat perbedaan dalam keterlibatan pengguna, terutama jika Anda memiliki beberapa file untuk dimuat sebelum konten. Karena file JS dan CSS tidak menampilkan konten apa pun kepada pengguna, cara tradisional menyusun HTML ini dapat memengaruhi statistik keterlibatan pengguna Anda. Sebagai gantinya, Anda dapat menempatkan file JS dan CSS di bagian bawah halaman Anda di bawah tag body.

Penting untuk dicatat bahwa halaman masih dimuat dalam jangka waktu yang sama, namun kecepatan yang dirasakan jauh lebih cepat. Pengguna melihat konten sebelum file JS dan CSS dimuat, sehingga tampak lebih cepat meskipun dimuat dalam jangka waktu yang sama, sebuah fenomena yang disebut sebagai kecepatan aktual versus kecepatan yang dirasakan. Peningkatan kecepatan yang dirasakan akan meningkatkan keterlibatan pengguna tanpa menambahkan sumber daya server yang mahal ke jaringan Anda.

  • Kompres File dengan GZip

GZip adalah alat kompresi file yang mengurangi ukuran unduhan skrip Anda. Itu dapat melakukan hal yang sama untuk gambar Anda. Anda mengompresi file dan menyimpan versi ini di server Anda. Browser mengunduh versi file yang lebih kecil dan terkompresi dan mengekstraknya ketika konten lengkap diunduh ke komputer lokal.

Gunakan GZip ketika Anda memiliki beberapa file besar yang disertakan di situs Anda. Hal ini biasa terjadi pada situs seperti situs pengunduhan gambar atau situs web yang menggunakan file besar untuk menyajikan data. Ini dapat menghemat waktu memuat situs Anda dan meningkatkan keterlibatan pengguna. Ini juga menghemat ruang penyimpanan, jadi jika Anda membayar host berdasarkan sumber daya yang Anda gunakan, tagihan hosting Anda juga bisa dikurangi.

  • Hindari Penggunaan Pernyataan “Dengan”.

Pernyataan “dengan” cocok untuk pembuat kode, tetapi dalam hal kecepatan pemrosesan, pernyataan ini buruk. Pernyataan “with” adalah kode singkat yang memungkinkan pembuat kode melewatkan pengetikan nama variabel dan hanya mereferensikan properti dan metode untuk objek menggunakan karakter titik (“.”). Itu membuat pengkodean lebih cepat dan mudah, tetapi mesin JS memuat semua properti dan metode, bukan hanya yang direferensikan ketika nama variabel lengkap diketik.

Menggunakan “dengan” adalah cara yang mahal untuk membuat kode ketika kecepatan menjadi masalah. Periksa skrip Anda dan ganti referensi “dengan” dengan nama variabel.

  • Perhatikan Loop Anda, Terutama Loop Bersarang

Loop dapat membebani mesin apa pun, tetapi hal itu penting. Cara terbaik untuk menjaga kode Anda tetap optimal adalah dengan bertanya pada diri sendiri apakah suatu fungsi dapat digunakan alih-alih perulangan yang kompleks. Biasanya, fungsi yang lebih baik untuk kecepatan pemrosesan dapat menggantikan loop tersebut.

Perulangan bersarang bisa sangat melelahkan jika Anda memiliki beberapa ratus catatan untuk diulang. Juga mudah untuk menimbulkan bug dalam kode Anda dengan terlalu banyak loop bersarang. Pertimbangkan untuk memfaktorkan ulang kode Anda jika Anda menemukan bahwa loop menyebabkan situs Anda tersendat.

  • Selalu Gunakan Kata Kunci “var” untuk Definisi Variabel

Kata kunci “var” mendefinisikan variabel baru, tetapi ini bukan suatu keharusan. Jika Anda tidak menggunakan “var”, mesin JavaScript akan dipaksa untuk mencari seluruh rantai cakupan. Anda mungkin akan menetapkan variabel dengan nilai fungsi yang dikembalikan, tetapi jangan melewatkan deklarasi “var”. Ini menghemat waktu pemrosesan ketika mesin JS dapat menemukan variabel lokal tanpa mencari rantai cakupan.

Selain menggunakan “var”, hindari penggunaan variabel global jika variabel lokal sudah mencukupi. Variabel global dalam bahasa apa pun tidak disukai karena selalu memerlukan lebih banyak waktu untuk memproses dan mengurangi kecepatan aplikasi.

Ringkasan

Mengoptimalkan file JavaScript hanyalah salah satu solusi untuk situs web yang lamban. Jika Anda telah menilai situs Anda dan ternyata situs Anda terlalu lambat, maka langkah pertama yang baik adalah mengevaluasi file JS dan kode Anda.

Mau donasi lewat mana?

BCA - Rizky Kharisma Negari (0097107746)

Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.

Post a Comment

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍❤🤦‍♂️❌✅⭐
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode


  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Kakak pakai plugin pemblokir iklan ya? Tolong kecualikan website ini dalam pemblokiran ya. Karena kami butuh penghasilan dari iklan untuk terus mengelola website ini agar bisa update artikel bermanfaat. Makasih ya 😊
Site is Blocked
Sorry! This site is not available in your country.