Apa Itu Minify JavaScript dan Plugin WordPress Terbaik untuk Minify JavaScript

September 20, 2024

Kalian sudah tahu belum bahwa salah satu cara untuk meningkatkan kecepatan website adalah dengan meminimalkan ukuran file JavaScript alias minify Javascript? Nah, kali ini akan membahas tentang minify Javascript. Makanya, tak usah pakai lama, langsung simak selengkapnya saja yuk mengenai Apa Itu Minify JavaScript dan Plugin WordPress Terbaik untuk Minify JavaScript

Apa Itu Minify JavaScript?

JavaScript adalah salah satu bahasa pemrograman populer karena fitur dinamis dan interaktif untuk meningkatkan pengalaman pengunjung website. JavaScript memainkan peran penting dalam web development modern dan didukung oleh semua browser web utama.

Sedangkan minify adalah proses penghapusan karakter yang tidak dibutuhkan dari kode-kode website tanpa mengubah fungsinya.

Dengan demikian, minify Javascript adalah proses menghapus semua karakter yang dibutuhkan dari kode sumber JavaScript. Proses ini mencakup penghapusan spasi, komentar, titik kota, serta pengguna nama variabel dan fungsi yang lebih pendek.

Cara Kerja Minify Javascript di WordPress

Untuk mengecilkan Javascript di WordPress, bisa melakukan secara manual dengan menghapus spasi, jeda baris, pembatas blok, komentar satu persatu sehingga ukuran file aplikasi berkurang.

Contoh minify Javascript WordPress secara manual:

//JavaScript code

</script>

Setelah mengecilkan kode maka sintaksnya akan menjadi:

Mengecilkan JavaScript WordPress secara manual memang memungkinkan tingkat kustomisasi yang lebih tinggi tetapi prosesnya cukup memakan waktu dan rentan terhadap kesalahan. Namun, jika ingin hasil yang cepat dan efisien, bisa juga menggunakan alat online atau plugin WordPress adalah pilihan yang jauh lebih baik.

Alat Minify Javascript Populer

Alat-alat ini telah dirancang khusus untuk melakukan minify JavaScript dengan cepat dan akurat sehingga dapat menghemat waktu dan tenaga.

Berikut ini lima alat untuk minify JavaScript yang paling sering digunakan oleh pengguna WordPress.

1. UglifyJS

Alat ini paling banyak digunakan oleh pengembang web karena fungsinya tidak hanya mengecilkan kode JavaScript tapi juga melakukan pengoptimalan dan manipulasi kode. Uglify hanya fokus pada pengecilan JavaScript WordPress meski alat ini juga bisa mengecilkan kode HTML, CSS, dan JSS.

Uglify dapat di-install melalui JavaScript Node Package Manager (NPM). Oleh karena itu, harus dipastikan kalian sudah menginstal Node.js versi terbaru. Ada dua perintah yang bisa digunakan untuk menginstal UglifyJs tergantung tujuan penggunaan:

Untuk menggunakan UglifyJS sebagai aplikasi baris perintah:

npm install uglify-js -g

Untuk menggunakan UglifyJS untuk penggunaan terprogram:

npm install uglify-js

2. Google Closure Compiler

Google Closure Compiler adalah alat canggih yang dapat memperkecil kode JavaScript dan juga melakukan pengoptimalan tingkat lanjut, seperti penghapusan kode mati dan penyisipan fungsi.

Kalian dapat menggunakan Closure Compiler sebagai aplikasi JavaScript open source yang dapat dijalankan dari baris perintah, aplikasi web sederhana, dan API RESTful yang dihapus.

Untuk mencoba alat ini dengan program JavaScript sederhana, silakan ikuti langkah-langkah berikut ini:

Unduh file Closure Compiler

Buat direktori kerja dengan nama closure-compiler.

Unduh file JAR yang paling baru dirilis dari repositori Maven, dan simpan dalam format closure-compiler.

Buat file JavaScrip

Buat file bernama hello.jsyang berisi JavaScript berikut ini:

// A simple function.

function hello(longName) {

alert(‘Hello, ‘ + longName);

}

hello(‘New User’);

Selanjutnya simpan berkas ini dalam direktori closure-compiler.

Kompilasi file JavaScript

Jalankan perintah berikut dari direktori closure-compiler:

java -jar compiler.jar –js hello.js –js_output_file hello-compiled.js

Perintah ini membuat file baru bernama hello-compiled.js, yang berisi JavaScript berikut ini:

function hello(a){alert(“Hello, “+a)}hello(“New User”);

Untuk mengonfirmasi bahwa kode JavaScript yang dikompilasi masih berfungsi dengan benar, sertakan hello-compiled.jsdalam file HTML seperti ini:

<html>

<head><title>Hello World</title></head>

<body>

</body>

</html>

3. YUI Compressor

YUI Compressor adalah alat pengecilan JavaScript yang dikembangkan oleh Yahoo!. Alat ini dapat mengecilkan kode JavaScript dan juga melakukan minify CSS. Mengutip dari GitHub, YUI Compressor dirancang agar 100 persen aman dan menghasilkan rasio kompresi yang lebih tinggi dibanding sebagian besar alat lainnya.

YUI Compressor adalah sumber terbuka jadi jangan ragu untuk melihat kode untuk memahami dengan tepat cara kerjanya. Untuk tahu lebih banyak tentang cara menggunakan YUI Compressor, silakan bisa menyimak di link ini.

4. JSMin

JSMin adalah salah satu opsi alat minify Javascript yang paling populer dan terkenal di open web. Untuk melakukannya, kalian bisa menggunakan dua metode berikut ini:

Menggunakan JSmin dari baris perintah

Metode ini digunakan jika ingin mengompres beberapa file dengan cepat. Cukup install JSmin sebagai skrip global karena nantinya akan digunakan sebagai alat baris perintah.

$ npm instal -g jsmin

Setelah JSmin diinstal sebagai skrip global, JSmin dapat digunakan dari baris perintah seperti ini:

$ jsmin -o main.min.js main.js

Menggunakan JSmin dalam skrip

Metode ini digunakan jika ingin menggabungkan beberapa file menjadi satu file JavaScript yang diperkecil. Untuk menggunakan JSmin dalam skrip, perlu menginstalnya sebagai dependensi pengembangan proyek node kalian.

$ npm instal –save-dev jsmin

Setelah terpasang, kalian dapat menggunakannya dalam skrip node kalian.

5. Closure Linter

Closure Linter adalah alat yang dapat digunakan untuk menegakkan standar pengkodean untuk kode JavaScript. Alat ini juga dapat melakukan pengecilan JavaScript menggunakan Google Closure Compiler.

Plugin WordPress Terbaik untuk Minify Javascript

Berikut ini 6 plugin WordPress terbaik untuk minify JavaScript yang bisa dicoba:

1. WP Rocket

WP Rocket adalah plugin caching populer untuk WordPress yang menyertakan fitur pengecilan JavaScript. Plugin ini dapat mengecilkan file JavaScript internal dan eksternal serta menyertakan opsi untuk menunda pemuatan JavaScript dan menggabungkan beberapa file JavaScript.

Untuk menginstal WP Rocket, pastikan versi PHP minimal 7.3 dan versi WordPress kalian minimal 5.8. Setelah membeli WP Rocket, kalian bisa mengunduh file zip dari halaman akun WP Rocker kalian.

Jika ingin menggunakan metode Instalasi Otomatis untuk WP Rocket, yakni menginstal plugin melalui dashboard WordPress, perlu memulai dengan file zip plugin tersebut.

Untuk plugin, silakan menuju dashboard WordPress dan buka Plugin =>Tambah Baru => Unggah Plugin. Buka file zip dan klik Install Now.

Dalam beberapa kasus, WP Rocket akan meminta informasi lisensi ke berkas WP-config.php guna memvalidasi lisensi tanpa menginstall ulang secara menyeluruh.

Untuk menambahkan info lisensi ke wp-config.php, kalian harus mendefinisikan dua konstanta berikut di wp-config.php file:

define( ‘WP_ROCKET_EMAIL’, ‘YOUR_ACCOUNT_EMAIL’);

define( ‘WP_ROCKET_KEY’, ‘YOUR_API_KEY’);

YOUR_ACCOUNT_EMAIL dengan email akun WP Rocket kalian.

YOUR_API_KEY dengan API Key kalian.

Untuk menemukan API Key, unduh WP Rocket dari akun kalian: https://wp-rocket.me/account/

2. Autoptimize

Autoptimize adalah plugin gratis yang dapat mengoptimalkan dan mengecilkan file JavaScript dan CSS di situs WordPress kalian. Plugin ini juga menyertakan opsi untuk menunda pemuatan JavaScript dan mengoptimalkan gambar.

Untuk proses instalasi plugin WordPress ini, buka dashboard WordPress “Plugin => Tambah Baru”

Unggah file zip dan unzip di /wp-content/plugins/direktori
Aktifkan plugin melalui menu ‘Plugin’ di WordPress
Buka Settings => Autoptimize dan aktifkan opsi yang diinginkan. Umumnya sih, artinya “Optimalkan HTML/CSS/JavaScript”.

3. Fast Velocity Minify

Fast Velocity Minify adalah plugin ringan yang dapat mengecilkan file JavaScript dan CSS di situs WordPress milik kalian. Plugin ini mencakup opsi untuk menunda pemuatan JavaScript dan juga mendukung loading JavaScript asinkron.

Langkah pertama, silakan install dan aktifkan plugin Fast Velocity Minify di dashboard admin WordPress.

Setelah plugin terinstall dan aktif, klik Setting => Fast Velocity Minify. Langkah ini akan membawa ke opsi setting dan konfigurasi plugin. Bagian ini bisa digunakan untuk pengaturan mempercepat loading website dan fungsi lainnya.

Misalnya, pada Opsi PageSpeed, bisa mengaktifkan “defer of all JS files for PSI only.” Oia, kalian juga bisa mengecualikan file JavaScript ke dalam daftar abaikan untuk PageSpeed Insights.

4. W3 Total Cache

W3 Total Cache adalah plugin caching untuk WordPress yang mencakup fitur minify JavaScript. Plugin ini dapat mengecilkan file JavaScript internal dan eksternal dan juga mencakup opsi untuk menunda pemuatan JavaScript dan menggabungkan beberapa file JavaScript.

Berikut ini panduan instalasi plugin WordPress W3 Total Cache untuk minify JavaScript:

Buka dashboard WordPress.
Navigasi ke ‘Plugin’ => ‘Tambah Baru’.
Cari “W3 Total Cache”.
Klik ‘Instal Sekarang’ pada plugin W3 Total Cache.
Setelah terinstal, klik ‘Aktifkan’ untuk mengaktifkan plugin di situs.

Setelah diaktivasi, bisa memanfaatkan pengaturan ‘JS Minify Method’ di W3 Total Cache, yang mana bisa membantu untuk memilih metode file JavaScript di website WordPress harus diperkecil.

Ada tiga metode yang tersedia dan caranya mudah dilakukan, loh:

Combine & Minify: Metode ini menggabungkan beberapa file JS menjadi satu file lalu menerapkan proses pengecilan pada file gabungan.
Minify Only: Metode ini menerapkan proses minifikasi ke file JS individual tanpa menggabungkannya.
Combine Only: Metode ini menggabungkan beberapa file JS menjadi satu file tanpa menerapkan proses minifikasi.

5. Better WordPress Minify

Better WordPress Minify adalah plugin yang dapat mengecilkan file JavaScript dan CSS di situs WordPress kalian. Sama seperti W3 Total Cache, plugin WordPress ini mencakup opsi untuk menunda pemuatan JavaScript dan menggabungkan beberapa file JavaScript.

6. Hummingbird

Hummingbird adalah plugin pengoptimalan kinerja untuk WordPress yang menyertakan fitur pengecilan JavaScript. Plugin ini dapat mengecilkan file JavaScript internal dan eksternal dan menyertakan opsi untuk menunda pemuatan JavaScript dan menggabungkan beberapa file JavaScript.

Nah Gaes, jadi itulah pembahasan mengenai plugin WordPress yang bisa digunakan untuk minify JavaScript. Minify Javascript harus dilakukan bersamaan dengan penyetelan kinerja lainnya, ya.

Meski sudah tersedia banyak alat dan plugin, melakukan minify Javascript pada website WordPress mungkin saja bisa menimbulkan kesalahan yang sulit di-debug.

Semoga bermanfaat ya 🙂