Tutorial Minify CSS
- Panduan Lengkap VM - Juli 29, 2024
- Panduan Pembayaran Via Bank Mandiri - Juli 2, 2024
- PHP X-Ray di cPanel untuk Optimasi Kecepatan Web - April 18, 2023
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.
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.