5++ Alat dan Plugin WordPress Terbaik untuk Minify Javascript

Kecepatan loading website adalah salah satu faktor penting yang digunakan Google untuk menentukan peringkat website di hasil pencarian. Dengan mempercepat loading website Anda, Anda tidak hanya meningkatkan pengalaman pengguna, tetapi juga meningkatkan peluang website mendapatkan peringkat yang lebih baik di mesin pencari. 

Salah satu cara untuk meningkatkan kecepatan website adalah dengan meminimalkan ukuran file JavaScript alias minify Javascript.  Artikel ini akan membahas 5 alat dan plugin WordPress terbaik yang dapat membantu Anda mencapai tujuan tersebut.

Apa Itu Minify JavaScript?

Sebelum memahami konsep minify JavaScript, kita perlu mengenal dulu apa itu 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. 

Ada pun minify  adalah proses penghapusan karakter yang tidak diperlukan dari kode-kode website tanpa mengubah fungsinya. 

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

Cara Kerja Minify Javascript di WordPress

Melakukan minify Javascript dapat meningkatkan kecepatan loading dan aksesibilitas website. Untuk mengecilkan Javascript di WordPress kamu bisa melakukannya secara manual, dengan  menghapus spasi, jeda baris, pembatas blok, komentar satu per satu sehingga ukuran file aplikasi berkurang. 

Contoh minify Javascript WordPress secara manual:

<script>

//JavaScript code

</script>

Setelah mengecilkan kode maka sintaksnya akan menjadi:

<script>//JavaScript code</script>

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

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

Alat Minify Javascript Populer

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. Beda dengan alat lainnya, Uglify hanya fokus pada pengecilan JavaScript WordPress meskipun alat ini juga bisa mengecilkan kode HTML, CSS dan JSS. 

Uglify dapat di-install melalui JavaScript node package manager (NPM). Oleh karena itu, kamu harus memastikan bahwa kamu sudah menginstal Node.js versi terbaru. Terdapat 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. 

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

Untuk mencoba alat ini dengan program JavaScript sederhana, ikuti langkah-langkah di bawah 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:

// A simple function.

function hello(longName) {

  alert(‘Hello, ‘ + longName);

}

hello(‘New User’);

Kemudian 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:

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>

<script src=”hello-compiled.js”></script>

</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 daripada 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, kamu bisa menyimaknya di link ini.

4. JSMin

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

• Menggunakan jsmin dari baris perintah

Metode ini digunakan jika kamu 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, ia dapat digunakan dari baris perintah seperti ini:

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

• Menggunakan jsmin dalam skrip

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

$ npm instal –save-dev jsmin

Setelah terpasang, kamu dapat menggunakannya dalam skrip node kamu. Simak panduan berikutnya di link ini. 

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 Populer untuk Minify Javascript

Nah, selain kelima alat minify  Javascript tersebut, kamu juga bisa memanfaatkan plugin WordPress untuk mengecilkan file js website kamu. Dengan plugin ini, kamu dapat melakukan minify JavaScript dengan lebih mudah dan efisien. Plugin ini telah dirancang khusus untuk lingkungan WordPress, sehingga integrasinya sangat mulus.

Berikut adalah 6 plugin WordPress populer untuk minify  JavaScript yang bisa kamu coba:

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 kamu minimal 7.3 dan versi WordPress kamu minimal 5.8. Setelah kamu membeli WP Rocket, kamu bisa mengunduh file zip dari halaman akun WP Rocker kamu. 

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

Untuk plugin, kamu bisa menuju Dashboard WordPress dan buka: Plugin->Tambah Baru dan klik Unggah Plugin. Buka file zip dan klik Install Now.

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

Untuk menambahkan info lisensi ke wp-config.php, Anda 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 kamu.

YOUR_API_KEY dengan API Key kamu .

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

2. Autoptimize

Autoptimize adalah plugin gratis yang dapat mengoptimalkan dan mengecilkan file JavaScript dan CSS di situs WordPress Anda. 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 Anda inginkan. Umumnya ini berarti “Optimalkan HTML/CSS/JavaScript”.

3. Fast Velocity Minify

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

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

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

Misalnya pada Opsi PageSpeed, kamu bisa mengaktifkan “defer of all JS files for PSI only.” Kamu 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 dasbor WordPress Anda.
• 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 Anda.

Setelah diaktivasi, kamu bisa memanfaatkan pengaturan ‘JS Minify Method’ di W3 Total Cache, yang bisa membantu kamu memilih metode file JavaScript di website WordPress kamu harus diperkecil. Terdapat tiga metode yang tersedia dan caranya mudah dilakukan:

• 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 kamu. 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 juga menyertakan opsi untuk menunda pemuatan JavaScript dan menggabungkan beberapa file JavaScript.

Kesimpulan

Itulah 5++ alat dan plugin WordPress yang bisa kamu gunakan untuk minify JavaScript. Mendapatkan file yang lebih ringkas setelah proses minify dapat membantu meningkatkan performa dan mempercepat loading website. 

Minify Javascript harus dilakukan bersamaan dengan penyetelan kinerja lainnya. Meski sudah tersedia banyak alat dan plugin, melakukan minify Javascript pada website WordPress mungkin bisa menimbulkan kesalahan yang sulit di-debug. 

Serahkan pengelolaan website Anda pada IDwebhost. Dengan layanan managed service kami, Anda bisa fokus pada konten tanpa perlu khawatir tentang optimasi teknis. Tim ahli kami akan mengelola semua aspek website Anda, termasuk minify JavaScript untuk memastikan website Anda selalu cepat dan responsif.