Minify CSS Melajukan Web Dan Blog Rendering

Minify CSS Melajukan Web Dan Blog Rendering | Tips khusus bagi web admin (pengendali laman web). Minify CSS adalah proses mengecilkan file CSS yang diguna oleh laman web anda. Kenapa perlu di kecilkan? CSS yang besar saiznya akan melambatkan proses kompilasi web server (IIS dan Apache) sebelum ianya di hantar kepada pengunjung laman anda. Melajukan masa web rendering adalah faktor penting bagi SEO (search engine optimized) yang juga menjadi faktor yang menentukan samada pengunjung anda akan kembali semula atau tidak ke laman anda. Hampir 80% pengunjung yang pertama kali ke laman web anda tidak akan kembali semula mengunjungi sekiranya laman web terlalu berat untuk di render dari browser. Web yang terlalu berat akan melambatkan proses rendering web browser. Beberapa perkara penting yang perlu diperhalusi bagi melajukan masa rendering dan salah satu darinya adalah mengecilkan saiz fail CSS (minify cascading style sheet). CSS seperti contoh di bawah dapat diringkaskan atau dikecilkan dengan beberapa teknik seperti berikut:

CSS sebelum dikecilkan saiz (minify)

/* — This is the place to add your own style modifications without touching the original styles — */body { }
ul.home-right li.title h2, ul.home-left li.title h2, ul.home-bottom li.title h2, .widgettitle { color:#ffffff; background:#663333; 

CSS selepas dikecilkan saiz (minified)

body{}ul.home-right li.title h2,ul.home-left li.title h2,ul.home-bottom li.title h2,.widgettitle{color:#fff;background:#663333;}
Saiz dikurangkan: 49%

Sepeti contoh di atas, apa yang anda dapat lihat adalah pengurangkan saiz sehingga separuh dari saiz CSS yang asal. Pengurangan ini dapat dilakukan secara manual dan auto. Sekiranya anda mahu melakukan secara manual, lakukan perkara berikut bagi setiap elemen di dalam fail CSS anda (pastikan backup terlebih dahulu!)

1. buang semua komen
2. gabung semua CSS menjadi hanya satu CSS sahaja
3. hapuskan semua free space
4. ringkaskan code bagi elemen color & font-weight (contoh: #ffffff; kepada #fff; dan #ccccc; kpd #ccc; dan seterusnya)
5. menggunakan huruf kecil bagi semua elemen dan properties CSS
6. menghapuskan code property yang tidak perlu (contoh: 12px 0px 12px 0px; kepada 12px 0 12px;)

Sekiranya anda merasakan sedikit renyah untuk melakukan secara manual, terdapat beberapa laman web yang menyediakan perkhidmatan mengecilkan (minify) CSS secara percuma seperti:

1. http://www.minifycss.com/css-compressor/ (disyorkan)
2. http://www.ventio.se/tools/minify-css/ (disyorkan)
3. WP-minify (bagi pengguna wordpress) http://wordpress.org/extend/plugins/wp-minify/

Saya secara peribadi mengesyorkan anda untuk melakukan automasi minify CSS menggunakan laman dua laman di atas dan sebolehnya cuba elak dari menggunakan plugin WP-minify sekiranya tidak perlu kerana plugin yang terlalu banyak yang di pasang ke dalam wordpress akan melambatkan lagi laman blog anda. Selamat mencuba

Ranking: 5