8 Cara Minify JavaScript untuk Optimalkan Performa Website

Untuk memastikan kinerja situs web tetap prima, terdapat banyak cara yang bisa dilakukan, salah satunya minify. Proses ini dapat memperlancar performa situs agar lebih optimal. 

Terdapat berbagai macam cara minify yang bisa Anda lakukan untuk berbagai macam file, termasuk minify JavaScript. 

Untuk mengetahui cara minify JavaScript serta file-file lainnya, simak penjelasannya berikut ini!

Pentingnya Minify File Bagi Performa Website

Sebelum mempelajari minify JavaScript, Anda perlu mengetahui pentingnya minify file website. Jika Anda memperhatikan file resources, entah HTML, JavaScript, atau CSS, Anda mungkin menemukan beberapa white space dan line break di dalamnya. 

Jeda-jeda tersebut memang membuat file jadi mudah dibaca, namun akhirnya membuatnya lebih lambat dimuat karena berukuran besar. 

Oleh karena itu, minify hadir untuk menghilangkan karakter, white space, dan line break yang tidak diperlukan di dalam file sehingga bisa lebih ringkas. Proses ini bisa mengurangi ukuran kode dari 10% hingga 95%. 

Meskipun dihapus, fungsinya tidak akan terpengaruh, tetapi ukurannya akan semakin kecil. Akhirnya, waktu muat situs web jadi lebih cepat dan mendukung strategi SEO yang telah atau akan diterapkan pada situs. 

Cara Minify JavaScript

Terdapat beragam cara minify JavaScript yang bisa Anda lakukan, seperti dengan menggunakan alat online, paket modul, build tools, dan lain-lain. Adapun cara minify JavaScript adalah sebagai berikut:

1. Menggunakan Paket Modul atau Library

Cara pertama yang bisa Anda lakukan adalah menggunakan paket modul atau library pada NPM, khususnya jika Anda membangun situs dengan JavaScript modern. Beberapa alat yang bisa Anda pilih adalah:

A. UglifyJS

Alat command-line yang umum digunakan untuk minify JavaScript. Contoh command line-nya adalah sebagai berikut:

B. Terser

Alat lain yang lebih modern dari UglifyJS. Berikut adalah contoh command line-nya:

2. Menggunakan Online Minifier Tool

Anda pun bisa menggunakan alat minify JavaScript yang tersedia di internet, seperti JavaScript Minifier dan UglifyJS. 

Jika Anda menggunakan JavaScript Minifier, maka Anda bisa menempelkan kode ke dalam kotak yang tersedia, lalu klik tombol Minify.

Di sisi lain, jika Anda menggunakan UglifyJS, Anda bisa menempelkan kode dan mendapatkan hasil kode yang sudah diperkecil secara langsung.

3. Menggunakan Build Tools

Build tools biasanya digunakan pada proyek-proyek yang lebih rumit. Beberapa build tools yang bisa Anda gunakan adalah Webpack dan Gulp. 

Jika Anda menggunakan Webpack, maka Anda bisa mengaturnya saat proses build dengan terser-webpack-plugin. Adapun caranya adalah sebagai berikut:

Namun, jika Anda menggunakan Gulp, maka Anda bisa menggunakan plugin gulp-uglify untuk proses minify JavaScript. Berikut adalah cara menggunakannya:

4. Menggunakan JSCompress

JSCompress dapat memperkecil ukuran file JavaScript hingga 80%. Alat ini menawarkan antarmuka sederhana yang mudah digunakan, di mana Anda bisa menempelkan kode atau mengunggah file .js untuk di-minify. Kemudian, Anda akan menerima output dalam bentuk kode bersih yang bisa disalin, bukan sebagai file .js.

5. Menggunakan Minifier.org

Minfier.org adalah salah satu alat paling sederhana yang bisa digunakan untuk memperkecil kode JavaScript. Alat ini menggunakan beberapa metode untuk meminimalkan kode. 

Tidak hanya itu, alat ini membandingkan ukuran kode JavaScript sebelum dan setelah proses minify. Kemudian, alat ini menghitung penghematan skrip setelah proses minify dan menampilkannya di layar.

6. Menggunakan Plugin WordPress

Cara selanjutnya adalah menggunakan plugin WordPress. Terdapat beragam plugin minify yang bisa Anda pilih, salah satunya Autoptimize. Langkah-langkah penggunaanya adalah sebagai berikut:

1. Pasang plugin Autoptimize.
2. Masuk ke dashboard WordPress > Plugin > Add New > cari Autoptimize.
3. Klik Install Now, kemudian Activate.
4. Buka Pengaturan > Optimalkan Otomatis.
5. Pilih opsi Optimalkan Kode JavaScript untuk minify JavaScript dan Optimalkan Kode CSS untuk minify CSS.
6. Pilih Simpan Perubahan dan Kosongkan Cache.
7. Proses minify selesai, kini Anda perlu menguji fungsi situs web setelah file-nya diperkecil. 

7. Mengganti Secara Manual

Untuk melakukan proses minify secara manual, Anda bisa menggunakan alat seperti GTMetrix. Alat ini melayani berbagai macam minify, seperti minify HTML, CSS, dan JavaScript. 

Untuk menggunakannya, Anda hanya perlu memasukkan URL situs web dan alat ini akan langsung menampilkan file yang dapat diperkecil. 

Kemudian, Anda bisa klik See Optimized Version dan mengunduh versi yang sudah diperkecil. Lalu, Anda bisa menggunakan FTP client atau file manager hPanel untuk mengganti file asli di situs web dengan file yang sudah di-minify. 

8. Menggunakan Minify Code

Terakhir, Anda bisa menggunakan alat Minify Code dari WordPress yang bisa memperkecil file JavaScript, HTML, dan CSS secara terpisah. Caranya adalah Anda perlu mengunduh file yang akan diproses dari situs web. Jangan lupa untuk mencadangkan file-nya agar tetap aman. 

Selanjutnya, Anda bisa menyalin file dan menempelkannya ke Minify Code sesuai format. Alat ini akan memproses minify-nya dan setelah selesai, Anda bisa menyalin kode yang telah diproses dan mengunggahnya ke direktori situs web. 

Kesimpulan

Itulah cara minify JavaScript yang bisa Anda terapkan agar performa kinerja situs web semakin optimal. Namun, jangan lupa untuk menguji perubahaan yang sudah dilakukan dan segera perbaiki masalah jika ada. 

Selain itu, pastikan untuk mencadangkan file sebelum melakukan proses minify agar jika terjadi gangguan, Anda masih punya file asli sehingga bisa mengembalikannya ke bentuk semula. 

Dengan melakukan minify, kode-kode dalam file akan diperkecil sehingga ukurannya ikut mengecil dan mempercepat waktu muat situs web. Akhirnya, pengalaman pengguna akan semakin baik dan berpotensi meningkatkan peringkat di hasil pencarian. 

Di samping memperbaiki waktu muat situs dengan minify, Anda juga perlu melakukan beberapa strategi agar bisa mendapatkan peringkat tinggi di hasil pencarian, seperti strategi SEO. Terkait hal ini, Anda bisa bekerja sama dengan Jasa SEO cmlabs. Hubungi tim pemasaran kami segera untuk konsultasi secara gratis!