Halo Sobat Kece! Kalian perlu tau nih,buat kamu seorang web developer yang ingin website kamu tampil di browser secara cepat tanpa hambatan, artikel ini wajib kamu baca sampai habis Sob. Banyaknya variabel dari website yang kalian buat itu menentukan kecepatan dalam memuat laman lhoh Sob, salah satunya adalah dari bagian file CSS yang kalian buat. Nah, di panduan kali ini kita akan bahas cara agar CSS kamu bisa lebih simple namun tetap bisa menjalankan fungsinya.
Apa arti dan fungsi dari minify CSS?Minify adalah istilah pemrograman yang artinya adalah proses menghilangkan karakter yang tidak diperlukan dalam kode untuk dieksekusi. Melakukan minify code akan mempercepat kecepatan loading website kalian, efeknya, pengunjung Ada akan senang begitu juga dengan mesin pencari. Singkatnya, proses ini akan menghapus semua karakter white space, baris baru, komentar & delimiter dari kode yang kalian buat. Tipe karakter ini digunakan agar kode bisa mudah dibaca, namun sebenarnya tidak terlalu dibutuhkan dan tidak dieksekusi oleh kode. Sehingga, proses minify ini mampu meningkatkan kecepatan download, parsing dan waktu eksekusi website kalian Sob.
Nah, dari sini kalian sudah cukup mengerti bagaimana cara kerja dan fungsi Minify dalam meningkatkan kinerja dari laman website kalian, dan disini Jagoan Hosting membagikan contoh dalam melakukan Minify CSS seperti dibawah ini :
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Dari kode diatas dapat dibuat lebih efektif seperti :
h1, h2 { background-color: #000000; }
Dari perspektif browser, 2 contoh kode ini secara fungsional setara, tetapi contoh kedua menggunakan lebih sedikit byte. Minifiers selanjutnya dapat meningkatkan efisiensi byte dengan menghapus spasi:
h1,h2{background-color:#000000;}
Beberapa minifiers menggunakan trik pintar untuk meminimalkan byte. Misalnya, nilai warna # 000000 dapat dikurangi lebih lanjut menjadi # 000, yang merupakan padanan singkatnya.
Ada tips nih dari Jagoan Hosting untuk melakukan Minify CSS untuk kalian yang sedang membangun website agar lebih mudah.
Menggunakan CSS minifier atau pengubah CSS untuk meminify kode CSS yang kalian buat, dari sini bisa dibedakan dari 2 tipe dibawah ini Sob :
- Untuk situs kecil yang tidak sering perbarui, kalian mungkin dapat menggunakan layanan online untuk meminimalkan file kamu secara manual. kamu menempelkan CSS ke UI layanan, dan mengembalikan versi kode yang diperkecil.
- Untuk pengembang profesional, kamu mungkin ingin mengatur alur kerja otomatis yang mengecilkan CSS kalian secara otomatis sebelum menggunakan kode yang diperbarui. Dapat dilakukan dengan alat bantu (Tools) seperti Gulp atau Webpack.
Alternatif Solusi yang dapat diberikan dengan cara PageSpeed Module, terintegrasi dengan server web Apache atau Nginx untuk secara otomatis mengoptimalkan situs , termasuk minifikasi sumber daya.
Kalau masih kesulitan Kamu bisa hubungi teman-teman Jagoanhosting untuk informasi lewat Live Chat dan Open Ticket. Yuk Ah! Selamat mencoba.