Ada banyak cara yang bisa Anda lakukan untuk mempercepat loading website, 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:
- Analisis Performa Website dengan GTMetrix
- Lakukan Proses Minify CSS
- 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.
2. GTMetrix akan memproses permintaan Anda. Jika sudah, Anda akan melihat tampilan berikut:
3. Scroll ke bawah hingga bagian Top Issues > Minify CSS. Setelahnya, Anda akan melihat tampilan berikut. Ternyata, ada beberapa file CSS yang harus diminify.
3. Scroll ke bawah, ternyata juga ada file JavaScript yang perlu di-minify.
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 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.
2. Cari file CSS yang akan diminify sesuai path yang ditunjukkan GTMetrix. Jika sudah, klik file tersebut dan pilih Download untuk membackup file.
3. Setelah itu, pilih menu Edit untuk melihat source code file CSS tadi.
4. Anda akan menuju halaman editor. Di sini, salin seluruh source code yang ada.
5. Kunjungi laman Minifier.org, lalu tempel source code pada kolom yang disediakan.
6. Klik opsi CSS dan tekan tombol Minify.
7. Silakan tunggu prosesnya. Jika sudah, akan muncul tampilan berikut. Salin source code CSS yang sudah diminify.
8. Kembali ke halaman editor, hapus source code yang ada. Kemudian, ganti dengan source code setelah diminify dan klik Save Changes.
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.
Baca juga: 11+ Cara Mempercepat Website Toko Online
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.
2. Ketikkan LiteSpeed Cache di kolom pencarian. Jika sudah muncul, klik Install Now.
3. Silakan tunggu proses instalasinya. Kemudian, klik Activate.
4. Jika sudah aktif, klik LiteSpeed Cache > Page Optimization pada sidebar.
5. Anda akan melihat tampilan berikut. Di menu CSS Settings, klik tombol ON pada CSS Minify.
6. Lakukan hal yang sama pada menu JS Settings dan HTML Settings, seperti tampilan berikut:
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.
2. Pada halaman Speed Optimization, scroll ke bawah untuk menemukan menu Auto Minify. Setelahnya, centang pada opsi JavaScript, CSS, dan HTML.
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.
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!
The post Cara Minify CSS untuk Mempercepat Loading Website [Termudah] appeared first on Niagahoster Blog.
source https://www.niagahoster.co.id/blog/mempercepat-loading-blog-dengan-minify-css-html-js/
