Ariffud Muhammad Ariffud is a Technical Content Writer with an educational background in Informatics. He has extensive expertise in Linux and VPS, authoring over 200 articles on server management and web development. Follow him on LinkedIn.

Cara Minify CSS untuk Mempercepat Loading Website [Termudah]

3 min read

[FI] Cara Minify CSS untuk Mempercepat Loading Website [Termudah]

Ada banyak cara mempercepat loading website WordPress yang bisa Anda lakukan, salah satunya dengan minify CSS. Minify menghapus karakter seperti spasi, tab, dan enter yang tidak diperlukan lagi setelah proses coding.

Nah, Anda yang tertarik mempraktikkan cara minify CSS? Anda sudah berada di tempat yang tepat. Di artikel ini, kami akan memandu Anda meminify CSS di website dengan tiga langkah mudah.

Penasaran kan? Yuk baca hingga selesai!

Cara Minify CSS di Website dengan Mudah

Langkah-langkah yang perlu Anda lakukan untuk me-minify CSS di website adalah sebagai berikut:

  1. Analisis Performa Website dengan GTMetrix
  2. Lakukan Proses Minify CSS
  3. Analisis Ulang setelah Proses Minify

Yuk simak penjelasan selengkapnya!

Langkah 1: Analisis Performa Website dengan GTMetrix

Anda perlu menganalisis performa website terlebih dahulu dengan GTMetrix. Gunanya untuk mengetahui file mana yang perlu di-minify. Berikut langkah-langkahnya:

1. Kunjungi laman GTMetrix. Kemudian, tulis URL website Anda dan klik tombol Test your site.

halaman awal gtmetrix

2. GTMetrix akan memproses permintaan Anda. Jika sudah, Anda akan melihat tampilan berikut:

hasil analisa gtmetrix

3. Scroll ke bawah hingga bagian Top Issues > Minify CSS. Setelahnya, Anda akan melihat tampilan berikut. Ternyata, ada beberapa file CSS yang harus diminify.

minify css gtmetrix

3. Scroll ke bawah, ternyata juga ada file JavaScript yang perlu di-minify.

minify js gtmetrix

Lalu, bagaimana dengan minify HTML? Dulunya, GTMetrix memang menyediakan fitur ini. Tapi sekarang, fitur minify HTML sudah dihentikan pengembangannya.

Meski begitu, melakukan cara minify CSS dan JavaScript adalah opsi yang sebenarnya sudah cukup untuk mempercepat loading website Anda.

Baca juga: Cara Mempercepat Loading Website dengan Add Expires Headers

Langkah 2: Lakukan Proses Minify CSS

Anda telah menganalisis performa website. Sekarang waktunya meminify JS dan CSS. Ada tiga opsi yang bisa Anda pilih, yaitu:

Opsi 1: Cara Minify CSS dan JavaScript lewat Online Tool

Anda bisa meminify JS dan CSS lewat online tool, salah satunya Minifier.org. Nah, caranya sebagai berikut:

1. Masuk ke cPanel hosting. Caranya dengan menambahkan /cpanel setelah URL website Anda. Di halaman utama, pilih Files > File Manager.

file manager cpanel

2. Cari file CSS yang akan diminify sesuai path yang ditunjukkan GTMetrix. Jika sudah, klik file tersebut dan pilih Download untuk membackup file.

backup css

3. Setelah itu, pilih menu Edit untuk melihat source code file CSS tadi.

edit css

4. Anda akan menuju halaman editor. Di sini, salin seluruh source code yang ada.

salin source code css

5. Kunjungi laman Minifier.org, lalu tempel source code pada kolom yang disediakan.

tempel css di minifier

6. Klik opsi CSS dan tekan tombol Minify.

proses minify css minifier

7. Silakan tunggu prosesnya. Jika sudah, akan muncul tampilan berikut. Salin source code CSS yang sudah diminify.

hasil minify css minifier

8. Kembali ke halaman editor, hapus source code yang ada. Kemudian, ganti dengan source code setelah diminify dan klik Save Changes.

ganti source code css

Ulangi langkah-langkah di atas untuk file JavaScript yang perlu diminify. Jika sudah, artinya Anda berhasil mengikuti cara minify CSS dan JavaScript dengan online tool.

Meski begitu, opsi ini tidak disarankan. Jika Anda punya banyak file untuk diminify, tentu saja akan menyita banyak waktu. Jadi, lebih baik gunakan opsi pada poin berikutnya.

Opsi 2: Minify File CSS, HTML, JavaScript dengan Plugin WordPress

Jika Anda pengguna WordPress, ada cara minify HTML, CSS dan JS yang lebih simpel. Yaitu, menggunakan plugin pihak ketiga seperti LiteSpeed Cache.

Nah, berikut cara minify CSS dan JavaScript serta HTML menggunakan LiteSpeed Cache:

1. Login ke dashboard WordPress Anda. Setelah itu, klik menu Plugins > Add New.

plugin dashboard wordpress

2. Ketikkan LiteSpeed Cache di kolom pencarian. Jika sudah muncul, klik Install Now.

install plugin litespeed cache

3. Silakan tunggu proses instalasinya. Kemudian, klik Activate.

activate litespeed cache

4. Jika sudah aktif, klik LiteSpeed Cache > Page Optimization pada sidebar.

page optimization litespeed cache

5. Anda akan melihat tampilan berikut. Di menu CSS Settings, klik tombol ON pada CSS Minify.

minify css litespeed cache

6. Lakukan hal yang sama pada menu JS Settings dan HTML Settings, seperti tampilan berikut:

minify js litespeed cache
minify html litespeed cache

Selesai! Anda telah berhasil meminify HTML, JavaScript, dan CSS menggunakan plugin LiteSpeed Cache. Jauh lebih simpel bukan?

Baca juga: Apa itu LiteSpeed Memcached dan Bagaimana Cara Mengaktifkannya?

Opsi 3: Minify JS, CSS, dan HTML melalui Cloudflare

Selain dengan plugin WordPress, Anda juga bisa meminify JS, CSS dan HTML dengan Cloudflare. Caranya lewat fitur bawaan bernama Auto Minify.

Tapi sebelumnya, pastikan Anda telah mengkonfigurasi Cloudflare di website. Setelahnya, ikuti langkah-langkah berikut:

1. Login ke dashboard Cloudflare Anda. Kemudian, klik Speed > Optimization.

dashboard cloudflare

2. Pada halaman Speed Optimization, scroll ke bawah untuk menemukan menu Auto Minify. Setelahnya, centang pada opsi JavaScript, CSS, dan HTML.

minify css, javascript, html cloudflare

Selamat, Anda telah berhasil melakukan minify JS, CSS, dan HTML secara otomatis dengan Cloudflare.

Perlu dicatat, Anda tidak perlu memakai Auto Minify Cloudflare jika sudah minify HTML, CSS, dan JS dengan plugin WordPress. Sebab, minify hanya meringkas file statis. Artinya, hasil akhir file tidak akan berubah sampai kapanpun.

Baca juga: Cara Mempercepat Loading Website dengan WP Smush

Langkah 3: Analisis Ulang setelah Proses Minify

Setelah me-minify file CSS, HTML, JavaScript menggunakan salah satu opsi di atas, sekarang waktunya menganalisis ulang website. Berikut langkah-langkahnya:

1. Kunjungi kembali laman GTMetrix. Kemudian, lakukan analisis performa website Anda.

2. Jika Anda akan melihat tampilan berikut, artinya proses minify CSS website berjalan sukses dan performa website Anda telah meningkat.

hasil analisa ulang

Selamat! Anda berhasil menyelesaikan cara minify CSS dan JavaScript serta HTML di website. Mudah sekali bukan? Kini, website Anda akan terasa lebih cepat dari sebelumnya.

Baca juga: Cara Mengurangi TTFB untuk Mempercepat Loading Website

Yuk Minify CSS untuk Mempercepat Website!

Di artikel ini, Anda telah mengikuti langkah-langkah minify file CSS, HTML, JavaScript di website. 

Dari tiga opsi minify CSS yang dijelaskan, kami paling merekomendasikan penggunaan plugin LiteSpeed Cache. Sebab, plugin yang satu ini bisa meminify JS, CSS, dan HTML secara otomatis.

Nah, LiteSpeed Cache adalah plugin yang dibuat khusus untuk layanan hosting yang menggunakan LiteSpeed, web server tercepat di dunia. Kombinasi keduanya dapat mempercepat loading website Anda.

Tapi Anda tak perlu khawatir, karena LiteSpeed Web Server sudah hadir di Niagahoster. Tersedia paket Unlimited Hosting atau Cloud Hosting yang bisa Anda pilih sesuai kebutuhan.

Tak cuma itu, fitur pendukung kecepatan lain juga tersedia. Mulai dari teknologi protokol dan kompresi terbaru HTTP/3, QUIC, & BROTLI, kecepatan jaringan hingga 10 GB per detik, sampai metode caching dan distribusi data CDN.

Jadi, website Anda bisa semakin cepat. Tunggu apa lagi, yuk nikmati website super ngebut dengan berlangganan hosting Niagahoster sekarang juga!

Demikian artikel kali ini, semoga bermanfaat. Jangan lupa klik tombol Subscribe agar tak ketinggalan artikel terbaru kami. Sampai jumpa lagi!

Ariffud Muhammad Ariffud is a Technical Content Writer with an educational background in Informatics. He has extensive expertise in Linux and VPS, authoring over 200 articles on server management and web development. Follow him on LinkedIn.

One Reply to “Cara Minify CSS untuk Mempercepat Loading Website [Termudah]”

  1. Terima kasih atas informasinya. Sudah dilakukan dan menambahkan beberapa cara yang saya ketahui juga 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *