Cara Mengecilkan File CSS/JavaScript di WordPress

Apakah anda ingin memperkecil file di situs WordPress?

Dengan memperkecil file CSS dan JavaScript di WordPress anda dapat mempercepat pemuatan halaman pada situs, sehingga memberikan pengalaman pengguna yang baik.

Dalam panduan ini, kami akan menunjukkan cara mengecilkan file CSS/JavaScript di WordPress untuk meningkatkan kinerja dan kecepatan.

Apa Itu Minify dan Mengapa Anda Membutuhkannya

Istilah minify digunakan untuk menyebut sebuah metode yang membuat ukuran file website menjadi lebih kecil. Ini dilakukan dengan menghapus sumber kode yang tidak diperlukan seperti spasi, garis, dan karakter.

Berikut adalah contoh dari kode CSS yang belum dilakukan proses minify:

Setelah dilakukan proses minify pada kode akan terlihat seperti ini:

Biasanya disarankan hanya untuk mengecilkan file yang dikirim ke browser pengguna. Seperti file HTML, CSS, dan JavaScript.

Keuntungan dari mengecilkan file ini adalah dapat meningkatkan kecepatan dan kinerja situs, karena file yang lebih ringkas akan lebih cepat untuk dimuat.

Sekarang mari kita lihat cara mengecilkan CSS/JavaScript di situs WordPress menggunakan beberapa cara sederhana.

Metode 1. Minify CSS/JavaScript Menggunakan WP Rocket

Cara ini lebih mudah dan sangat direkomendasikan untuk semua pengguna. Karena sudah kami buktikan sendiri, meskipun menggunakan beberapa layanan hosting yang berbeda.

Namun, yang perlu anda tahu adalah WP Rocket merupakan plugin premium yang berbayar, jadi anda harus berlangganan beberapa dolar untuk bisa menggunakan manfaatnya.

Tetapi yang anda dapatkan sangat sebanding, karena plugin ini memungkinkan anda dengan mudah mengatur caching situs dan secara signifikan meningkatkan kecepatan website dan waktu pemuatan halaman.

Sekarang yang harus anda lakukan adalah menginstal dan mengaktifkan plugin WP Rocket.

Setelah aktivasi, anda perlu mengunjungi halaman Settings > WP Rocket dan beralih ke tab ‘File Optimization’.

Pada halaman ini, anda perlu mengklik opsi ‘Minify CSS files’.

WP Rocket kemudian akan menunjukkan peringatan bahwa ini dapat merusak banyak hal di situs anda. Silahkan klik tombol Activate Minify CSS. Tetapi anda dapat selalu menonaktifkan opsi ini jika memang menyebabkan masalah dengan website anda.

Selanjutnya, anda perlu menggulir ke bawah pada bagian JavaScript Files.

Disini, cukup centang kotak disebelah opsi ‘Minify JavaScript files’.

Sama dengan sebelumnya, anda dapat melihat pesan peringan bahwa ini dapat merusak beberapa hal pada situs. Silahkan klik tombol ‘Activate Minify JavaScript’.

Setelah itu jangan lupa mengklik tombol Save Changes di bawah halaman untuk menyimpan pengaturan yang sudah anda buat.

Metode 2. Minify CSS/JavaScript Menggunakan SiteGround

Jika anda menggunakan SiteGround sebagai host website WordPress, anda dapat mengecilkan file CSS menggunakan plugin gratis yang mereka sediakan bernama SiteGround Optimizer.

SiteGround Optimizer adalah plugin pengoptimalan kinerja yang bekerja pada platform mereka sendiri.

Cukup Instal dan aktifkan plugin SiteGround Optimizer di situs WordPress. Untuk detail lebih lanjut, anda bisa melihat artikel kami tentang cara memasang plugin WordPress.

Setelah itu, anda perlu mengklik SG Optimizer dari menu samping dasbord admin WordPress untuk menuju halaman pengaturan plugin.

Dari halaman ini, anda perlu mengklik tombol Go To Frontend di bagian ‘Other Optimizations’.

Pada layar berikutnya, anda perlu mengaktifkan togle di sebelah opsi ‘Minify CSS files’.

Selanjutnya, anda perlu beralih ke tab JavaScript dan mengaktifkan togle di sebelah opsi ‘Minify JavaScript files’.

Itu saja, anda sekarang dapat membersihkan cache WordPress dan mengunjungi website untuk melihat hasil dari proses minify file CSS dan JavaScript.