Cara Minify CSS (Manual Dan Otomatis)
Apa itu Minify CSS? Secara gamblang minify css adalah tindakan mengompres css dari size asli ke size yang lebih kecil. Tetapi dalam praktik minify css yang sebenarnya minify css tidak hanya sekedar mengkonversi size asli file css ke ukuran yang lebih kecil saja melainkan minify css juga merupakan tindakan merubah pengaturan optional css beberapa objek (elemen individu) di situs web ke pengaturan css secara global atau group.
Untuk memahami minify css secara nyata lihat ilustrasi yang di contohkan dibawah ini:
Style css pada objek atau elemen html individual
#header-wrapper .container{
background-color:#000000;
color:#fffff;
position:relative;
margin:0 auto;
}
#footer-wrapper{
background-color:#000000;
color:#ffffff;
}
#main-menu{
background-color:#000000;
color:#ffffff;
} [ads id="ads1"] Coba perhatikan dan pahami dengan baik style css pada elemen individu yang di contohkan diatas, itu merupakan pemborosan karakter dan perintah kepada browser (css not minified). Seharusnya ketiga elemen tersebut dapat di gabungkan dalam satu style css saja (css is minified) seperti contoh berikut ini: #header-wrapper .container{
position:relative;
margin:0 auto;
}
#header-wrapper .container, #footer-wrapper,
#main-menu{
background-color:#000000;
color:#ffffff;
} Dan style color dengan enam karakter serupa yaitu #000000 dan #ffffff dapat di minify menjadi #000 dan #fff. Nah, inilah yang disebut dengan minify css yang sebenarnya sehingga dengan menggabungkan style css individu kedalam satu style css saja secara otomatis size css akan berkurang (size css di konversi menjadi lebih kecil).Minify Css Secara Manual
- Back-up tema blog untuk menghindari kesalahan,
- Cari dan kumpulkan style css yang memiliki kesamaan,
- Kemudian gabungkan ke satu style css seperti yang di contohkan diatas.
- Hapus spasi yang tidak diperlukan misalnya display: none menjadi display:none (tanpa spasi)
- Hemat karakter pada style color dengan enam karakter serupa misalnya #ffffff menjadi #fff.
Catatan: Lakukan langkah diatas (Minify Css Secara Manual) secara perlahan dan teliti, pratinjau blog setiapkali melalukan perubahan.
Minify Css Secara Otomatis (Online) Menggunakan minifier.org
Minify Css juga dapat dilakukan dengan cara instan atau otomatis dengan bantuan web tool minify css online seperti minifier.org. Web tool minify css ini cukup membantu dalam mengkonversi size css menjadi lebih kecil meskipun tidak sedetail minify css secara manual. Simak langkah-langkah melakukan minify css secara otomatis dengan minifier.org berikut ini;
- Backup tema atau css original website anda
- Buka halaman minifier.org
- Pilih jenis file yang akan di minify yaitu css
- Tempelkan kode pada kolom css minifier
- Tekan tombol minify untuk memulai mengkonversi size css
Selanjutnya ganti css original web anda dengan css yang sudak di kecilkan (minify), sebelum keluar dari editor html web anda di sarankan untuk mempratinjau halaman web terlebih dahulu.
Selain css, minifier.org juga dapat digunakan untuk mengkonversi size js (javascript) baik itu script dan dan css internal maupun script dan css eksternal. Untuk file (css and js) eksternal cukup tempelkan url css/js eksternal untuk meminify atau mengkonversi size css dan js menjadi lebih kecil.
Komentar
Posting Komentar