Minify CSS, HTML & JavaScript: Cara Dongkrak Performa Website dengan Mudah

Minify css, html, & javascript adalah proses yang dapat mempengaruhi kinerja SEO dan mempercepat loading suatu website. Simak cara mudah minify dengan menggunakan plugin WordPress.

Halaman website yang cepat saat diakses dapat memberikan pengalaman pengguna yang menyenangkan bagi pengunjung website dan mesin pencari. Artinya kecepatan akses website dapat mempengaruhi kinerja SEO.

Ditambah lagi, Google selalu mengupdate algoritmanya, seperti manusia yang sedang mencari informasi. Hal inilah yang menjadi salah satu alasan, kenapa optimasi script website menjadi salah satu faktor penilaian pada GTMetriks.

GTMetrix merupakan salah satu tool yang dapat digunakan untuk mengecek kecepatan website yang paling terkenal dan paling banyak digunakan selain tool Pingdom.

Kembali ke pembahasan minify, GTMetrix membantu memberikan analisa aset-aset pada website yang perlu di minify. Dalam hal ini aset-aset tersebut adalah CSS, HTML & Javascript.

Dalam bahasa pemrograman, minify artinya adalah proses dalam menghilangkan karakter yang tidak diperlukan pada kode agar dapat dieksekusi dengan mudah. Melakukan minify code dapat mempercepat loading website Anda. Hal ini dapat memberikan efek pada pengunjung. 

Cara kerja minify ini adalah menghapus semua karakter white space, baris baru, komentar & delimiter yang ada dalam kode Anda. Tipe karakter ini juga dapat digunakan agar kode Anda biar dapat dengan mudah dibaca. Akan tetapi, dalam hal penerapannya sebenarnya tidak terlalu dibutuhkan dan tidak dieksekusi oleh kode. 

Jadi, proses minify ini dapat meningkatkan kecepatan download, parsing dan waktu eksekusi yang ada dalam website Anda. Untuk mempelajari lebih lengkapnya, Anda dapat mengetahuinya pada pembahasan berikut ini.

Apa itu Minify CSS, HTML & Javascript ?

Seperti yang telah dijelaskan di atas sebelumnya, Minify adalah istilah dalam pemrograman yang merujuk pada proses menghapus karakter yang tidak lagi diperlukan dalam mengeksekusi kode. Melakukan minify dapat mempercepat loading website, yang dalam jangka panjang dan dapat berpengaruh dalam meningkatkan kenyamanan pelanggan pada website Anda.

Baca Juga: Apa Itu Bootstrap?

Jadi, minify CSS artinya adalah proses atau upaya dalam meminifikasi kode pada bagian CSS. Jika HTML berarti proses atau upaya dalam meminifikasi kode pada bagian HTML. Dan pada Javascript adalah proses atau upaya dalam meminifikasi kode pada bagian javascript.

Hasil akhirnya pada proses minify dapat meningkatkan kecepatan download, parsing serta execution time.

Cara Minify CSS, HTML & Javascript

Anda tidak perlu menjadi ahli teknologi untuk mengecilkan file JS dan CSS di situs WordPress. Banyak plugin minify yang tersedia untuk mengecilkan file, dan Anda dapat menggunakan salah satunya untuk menyederhanakan prosesnya. Berikut panduan sederhana untuk membantu Anda memulai:

1. Mencari file CSS, HTML, JavaScript yang belum di-minify

Pada langkah ini, Anda dapat menggunakan GTMetrix agar mendapatkan informasi aset apa saja yang perlu di minify. Dalam hal ini adalah CSS, HTML dan Javascript.

2. Mengganti file yang belum di-minify

Sebelum Anda melakukan perubahan apapun pada file CSS, HTML ataupun javascript Anda, pastikan Anda sudah mem-backup website WordPress Anda. Selain itu, Anda juga dapat melakukan backup file yang ingin Anda ganti.

Setelah Anda mengetahui file yang perlu di minify, Anda dapat mengikuti langkah-langkah ini :

2.1. Plugin WordPress

Pengguna WordPress dapat menggunakan plugin untuk mengecilkan file website kamu. WordPress menyediakan berbagai plugin minify yang dirancang untuk membantu proses ini, salah satu yang paling populer adalah Autoptimize. Berikut cara menginstal dan mengaktifkannya:

Langkah 1: Install Plugin Autoptimize

• Install Plugin Autoptimize
• Masuk ke dashboard WordPress kamu. Di sini kamu dapat mengelola semua aspek website kamu
• Navigasi ke Plugin > Add New: Ketik Autoptimize di bilah pencarian. 
• Klik Install Now dan kemudian Activate.  Setelah Anda menemukan plugin tersebut, klik tombol Install Now. Setelah instalasi, klik Activate untuk mengaktifkan plugin tersebut di situs Anda.

Langkah 2. Konfigurasikan Autooptimize

Setelah Autoptimize diaktifkan, konfigurasikan untuk mulai mengecilkan file JavaScript dan CSS kamu:

1. Buka Pengaturan > Optimalkan Otomatis: Di dasbor WordPress Anda, navigasikan ke bagian pengaturan dan pilih Optimalkan Otomatis.
2. Optimalkan JavaScript dan CSS: Di bawah Opsi JavaScript, centang kotak Optimalkan Kode JavaScript. Demikian pula, di bawah Opsi CSS, centang kotak Optimalkan Kode CSS.
3. Simpan Perubahan dan Kosongkan Cache: Setelah Anda memilih opsi ini, klik Simpan Perubahan dan Kosongkan Cache. Ini memastikan bahwa perubahan berlaku dan file lama yang tidak dioptimalkan dihapus dari cache.

Langkah 3: Uji Website Anda

Setelah mengaktifkan pengaturan ini, kamu perlu menguji website untuk memastikan semuanya berfungsi dengan benar. Pengujian ini adalah langkah penting karena dalam beberapa kasus minify dapat menyebabkan skrip atau gaya tertentu rusak.

Langkah 4: Jelajahi Pengaturan Lanjutan (Opsional)

Jika Anda menginginkan kontrol lebih atas proses minifikasi, Autoptimize menawarkan pengaturan lanjutan. Opsi ini bisa menyempurnakan plugin minify tersebut agar sesuai dengan kebutuhan Anda:

• Kecualikan file tertentu: jika skrip atau gaya tertentu menyebabkan masaat saat di-minify, kamu bisa mengecualikannya dari proses ini. Ini memastikan fungsionalitas penting tetap utuh sambil tetap mengoptimalkan file Anda yang lain.
• Gabungkan File: Autoptimize juga memungkinkan Anda menggabungkan beberapa file JavaScrip atau CSS menjadi satu file. Ini mengurangi jumlah permintaan HTTP yang perlu dibuat situs Anda sehingga mempercepat waktu pemuatan.

2.2. Ganti secara manual

Jika Anda memilih untuk tidak menggunakan plugin minify, Anda dapat mengecilkan file secara manual. Metode ini lebih teknis tetapi menawarkan kontrol yang lebih besar atas proses tersebut:

1. Gunakan alat daring: Berbagai alat daring tersedia untuk pengecilan manual. Untuk JavaScript, Anda dapat menggunakan alat seperti JSCompress, sedangkan CSS Compressor sangat bagus untuk berkas CSS.
2. Salin dan tempel kode Anda: Salin kode JS atau CSS Anda ke salah satu alat ini, klik tombol minify, dan alat tersebut akan mengompresnya.
3. Ganti file asli: Setelah kode Anda diperkecil, ganti file asli di server Anda dengan versi yang diperkecil.

2.3. CloudFlare

CloudFlare memiliki layanan yang dapat digunakan secara gratis yang dapat mampu mempercepat dan melindungi website Anda. Cara kerjanya adalah dengan menjadi proxy di antara pengunjung dan server hosting. CloudFlare juga menyediakan perlindungan terhadap serangan DDoS dan menariknya layanan ini bersifat gratis. S

alah satu fitur yang terdapat pada paket gratisnya adalah tool untuk minify CSS, HTML dan JS. Anda dapat mengaktifkan minification resource menggunakan menu Performance -> Auto-Minify:

Baca Juga: Kelebihan dan Kekurangan VPS Hosting Untuk Website

Anda juga tidak direkomendasikan untuk menggunakan fitur Auto-Minify pada CloudFlare jika Anda telah memakai plugin minify seperti W3 Total Cache. Selain itu, CloudFlare tidak dapat melakukan minify pada script dari pihak ke-3 dan link (Facebook & Twitter).

3. Menguji Perubahan

Setelah mengganti file/kode di bagian versi yang telah di-minify, hal terakhir yang perlu dilakukan adalah dengan melakukan test. Hal ini dapat Anda dilakukan dengan cara melakukan test kembali dengan GTMetrix. 

Kenapa CSS, HTML & Javascript Perlu di Minify?

Berikut alasan kenapa CSS, HTML & Javascript perlu dilakukan minify, yaitu : 

1. Ukuran File Jadi Kecil

File CSS & JavaScript yang di-minify ini dapat berukuran lebih kecil. Hampir semua spasi, komentar dan dokumentasi bisa dibuang ketika melakukan proses “minification“. Jadi file lebih compact. Dengan minification ukuran Javascript yang diperoleh dapat meraih sekitar 48% lebih kecil dan CSS bisa memperoleh ukuran sekitar 60% dari ukuran asli. 

2. Website jadi lebih cepat diakses

Karena ukuran file berubah menjadi kecil, maka loading website pun dapat bekerja menjadi lebih cepat. Hal ini merupakan proses salah satu teknik Front End Optimization (FEO). Jadi, dampak yang didapat dari ukuran website secara keseluruhan juga dapat lebih kecil dan ringan.

3. Hemat Bandwith dan Space Hosting/Server

Karena ukuran file dapat menjadi lebih kecil, space hosting/server Anda pun dapat menjadi lebih luang. Bandwidth oun juga menjadi lebih hemat.

Kesimpulan

Minify merupakan istilah dalam pemrograman yang merujuk pada proses menghapus karakter yang tidak lagi diperlukan dalam mengeksekusi kode. 

Dengan adanya proses minify maka ukuran file jadi kecil, website menjadi lebih cepat diakses, menghemat bandwith serta space hosting/server.

Selain itu proses minify ini dapat mengurangi 10% – 95% ukuran kode. Hal Ini tentunya dapat membuat website berjalan lebih cepat. Alhasil website pun bisa mendapatkan skor Search Engine Optimization (SEO) yang bagus. Hal ini juga merupakan salah satu teknik dalam menghemat sumber daya pada web server.

Semoga bermanfaat

Anda juga dapat mengetahui terus perkembangan informasi seputar teknologi, bisnis dsb di bagian blog IDwebhost secara gratis, 

Anda juga bisa menghubungi IDwebhost  untuk mendapatkan layanan web hosting dan domain untuk kebutuhan bisnis Anda yang mempunyai promo setiap harinya. Salam!