Minify CSS, HTML & JavaScript : Tips Meningkatkan Performa Website dengan Mudah

26 Mei 2022
Minify CSS, HTML & JavaScript : Tips Meningkatkan Performa Website dengan Mudah campaign-unlimited

Minify css, html, & javascript menjadi proses yang dapat mempengaruhi kinerja SEO dan kecepatan akses suatu website.

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.

Dibandingkan dengan developer tool lainnya, GTMetrix dirasa cukup mudah digunakan. Bahkan bagi pemula. GTMetrix dapat menggunakan kombinasi Google PageSpeed Insights dan YSlow agar dapat menghasilkan nilai dan rekomendasinya.

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.

Minify adalah istilah dalam pemrograman, yang artinya adalah proses dalam menghilangkan karakter yang tidak diperlukan pada kode agar dapat dieksekusi dengan mudah. 

Melakukan minify code dapat mempercepat kecepatan loading website Anda. Hal ini dapat memberikan efek pada pengunjung. 

Singkatnya, proses ini dapat 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 ?

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 meningkatkan loading halaman 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.

Secara sederhana, proses minify dapat menghapus spasi karakter yang tidak lagi diperlukan, contohnya seperti baris baru, komentar, dan pembatas pada kode Anda. Karakter tersebut digunakan agar dapat memberikan kemudahan membaca dan tujuan visual, tapi tidak diperlukan lagi jika untuk mengeksekusi code.

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

Kenapa CSS, HTML & Javascript Perlu di Minify ?

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.

Cara Minify CSS, HTML & Javascript

cara-minify-css-html-javascript

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. Ganti secara manual

Hal yang bagus dari GTMetrix ini adalah Anda dapat mengetahuinya secara langsung versi CSS, JS dan HTML yang telah di optimasi hanya dengan menekan tombol See optimized version pada bagian sebelah nama file. Kemudian, file yang telah dioptimasi akan dapat di-download/dibuka di bagian browser. Lalu dengan menggunakan aplikasi FTP, Anda dapat merubah file yang lama dengan nama file yang sama pada nama sebelumnya.

2.2. Plugin CMS

Pengguna WordPress dapat menggunakan plugin seperti Better WordPress Minify atau W3 Total Cache agar mendapatkan hasil yang sama. Anda dapat mengikuti panduan ini untuk instruksi lebih detail tentang cara meng-install plugin W3 Total Cache.

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. Salah 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. 

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!

Penulis
Member since 2 Jul 2013