Minify CSS dengan BoxCss

Berikut ini merupakan cara mudah untuk mereduksi ukuran CSS dengan teknik minify menggunakan layanan pihak ketiga (third party). Situs layanan tersebut adalah BoxCss.

Salah satu cara untuk mempercepat kecepatan muat (loading) blog adalah dengan cara mereduksi ukuran berkas CSSnya. Tidak hanya itu, kemampuan CSS untuk dicache oleh peramban, serta ukuran CSS ketika diunduh merupakan faktor-faktor yang mempengaruhinya.

Minify CSS dengan BoxCss

Minify adalah teknik untuk mengurangi ukuran berkas CSS dengan cara menghapus karakter-karakter yang tidak bermanfaat seperti spasi, alinea baru, serta tab. Berikut ini adalah contohnya.

Contoh markah CSS yang belum diminify

#id1 {
	color: #000;
	margin: 0 10px;
	padding: 10px 0 0;
	font: 10px/15px bold Georgia;
	z-index: 1;
	}

#id2 {
	color: #FFF;
	margin: 0 20px;
	padding: 15px 0 10px;
	font: 14px/18px bold Arial;
	z-index: 0;
	}

.class1 {
	margin: 0 20px;
	padding: 15px 0 10px;
	font: 14px/18px bold Arial;
	}

a, a:hover, a:active {
	color: #555;
	text-decoration: underline;
	}

Contoh markah CSS yang telah diminify

#id1 {color: #000;margin: 0 10px;padding: 10px 0 0;font: 10px/15px bold Georgia;z-index: 1;}#id2 {color: #FFF;margin: 0 20px;padding: 15px 0 10px;font: 14px/18px bold Arial;z-index: 0;} .class1 {margin: 0 20px;padding: 15px 0 10px;font: 14px/18px bold Arial;} a, a:hover, a:active {color: #555;text-decoration: underline;}

CSS yang telah diminify memang tidak enak dilihat, namun dengan minify, berkas CSS yang dihasilkan dapat berkurang. Kita dapat melakukan teknik minify ini secara manual dengan memanfaaatkan layanan CSSdrive atau CSSoptimiser, mengompressnya, kemudian memasangnya di blog kita.

Cara kerja BoxCss

Kelemahan dari penggunaan layanan CSSdrive maupun CSSoptimiser adalah kita akan sangat susah ketika hendak mengedit CSS tersebut, karena sudah diminify sehingga bentuk tulisannya sangat buruk untuk dipandang.

Dengan menggunakan BoxCSS, kita tak perlu kerepotan ketika hendak mengedit kembali CSS. Cara kerja BoxCss adalah ia akan mengambil CSS blog kita, me-minify CSS tersebut, kemudian menyediakan berkas CSS yang telah diminify berupa tautan langsung.

Dengan BoxCss, kita dapat menautkan secara langsung CSS yang telah diminify di bagian header blog. Bila kita hendak mengedit CSS, kita tinggal mengedit berkas yang ada di hosting kita, secara otomatis BoxCss pun akan menyediakan CSS yang telah kita edit dalam bentuk minify. Cukup praktis menurut saya.

Cara menggunakan BoxCss

Untuk menggunakan teknik ini, pertama-tama kita harus menentukan alamat berkas CSS yang hendak diminify. Contoh (kita hanya memiliki satu buah berkas CSS yang dipanggil berupa style.css):

<link rel="stylesheet" href="http://www.rismaka.net/template-blog/style.css" />

Pada bagian header blog anda, ganti markah (kode) tautan CSS di atas dengan markah berikut:

<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.rismaka.net/

template-blog/&include=style.css" />

Bila blog kita memiliki banyak berkas CSS yang digunakan, akan lebih baik lagi kalau menggabungkannya menjadi satu. Hal ini bermanfaat untuk mengurangi jumlah HTTP request.

Contoh, blog memanggil 3 buah berkas CSS (style.css, pagenavi.css, contact-form.css), untuk menggabungkannya menjadi satu pemanggilan, gunakan markah berikut:

<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.rismaka.net/

template-blog/&include=style.css,pagenavi.css,contact-form.css" />

Cukup pisahkan ketiga berkas CSS tersebut dengan koma (tanpa spasi), maka secara otomatis BoxCss akan menggabungkan ketiganya, meminify, dan selanjutnya menyediakannya untuk blog kita.

Contoh implementasi BoxCss pada CSS

Sebagai contoh, silakan klik tautan-tautan berikut ini (klik kanan dan buka di tab/jendela baru). Lihat alamat URLnya, serta lihat pula bentuknya.

CSS yang murni belum diminify (style.css, pagenavi.css, contact-form.css)
Style.css yang sudah diminify dengan BoxCss
Gabungan ketiga CSS yang sudah diminify dengan BoxCss

Beberapa hal yang perlu diketahui tentang penggunaan BoxCss untuk meminify CSS:

Peramban dapat meng-cache (menyimpan untuk sementara selama waktu tertentu) bekas CSS yang telah diminify selama 1 jam 40 menit. Sehingga bila anda mengedit berkas asli, tampilan yang baru akan terlihat setelah 1 jam 40 menit ke depan.
Tidak memiliki cache validator. Penambahan cache validator dapat dilakukan dengan menggunakan .htaccess (akan dibahas kali lain).
Server BoxCss menggunakan CDN (Content Delivery Network - Apa itu CDN?), sehingga pengunduhan berkas dapat lebih cepat dilakukan dari seluruh wilayah didunia.
Berkas hanya dapat di-cache oleh non-proxy, sementara bila anda mengunakan proxy, berkas tidak akan di-cache.
Berkas CSS yang diminify tidak memiliki Vary: Accept-Encoding (tidak akan dibahas, karena saya belum menguasainya :LOL: )

OOT: Terakhir, saya ingin bertanya, apakah tulisan di atas terlalu panjang hanya untuk implementasi sebaris kode BoxCss?

http://catatan.legawa.com Cahya

using Opera 11.50 on Windows Vista
Tulisan Mas Rismaka tidak terlalu panjang kok, hanya saja bagi saya terlalu berat :D.
http://rudyazhar.com Rudy Azhar

using Firefox 5.0 on Windows 7
Panjang dan muter-muter Mas… :(
http://narzis.net Zippy

using Firefox 5.0 on Windows XP
Kalo menurut saya sih gak masalah kalo panjang mas :D
Yang terpenting itu panjang tapi jelas caranya :D
Kalo saya sendiri sih jujur gak terlalu paham mas soal ginian.
Sempat edit CSS’nya biar loading blog gak terlalu berat, tapi eh malah error :lol:
http://kafegue.com iskandaria

using Chromium 14.0.817.0 on Ubuntu 11.04
Sebenarnya tidak terlalu panjang. Tapi kalau dalam sekali baca, bagi saya masih sedikit membingungkan. Nah, setelah baca yang kedua kalinya, barulah saya benar-benar mengerti. Mungkin juga karena pas baca pertama kali, saya agak cepat membacanya..hehehe (‘fast-reading detected’).

Oya, saran saja mas, sebaiknya ada keterangan tentang kode yang yang ditambahkan pada bagian “CARA MENGGUNAKAN BOXCSS”. Dan sebaiknya pula, warna kode yang ditambahkan pada link CSS eksternal tersebut dibedakan warnanya dari warna kode asal, sehingga perbedaan antara kode asal dan kode setelah diedit bisa jelas. Misalnya begini:

Coba perhatikan kode CSS eksternal yang sudah diedit di atas. Warna merah/coklat adalah kode yang kita tambahkan/selipkan agar fungsi minify dari boxcss bisa berfungsi.

Saya rasa dengan begitu, pembaca bisa lebih mudah membedakan perubahan kode pemanggil link CSS eksternal antara sebelum diedit dan setelah diedit. Saya lihat, ada 2 kode utama yang membuat fungsi minify tersebut, yaitu kode http://www.boxcss.com/boxme?host= dan kode &include=

Nah, dua jenis kode tersebut mungkin lebih baik dibedakan warnanya (diberi warna tersendiri). Oya, mungkin saya mau mencoba teknik minify dengan boxcss ini pada halaman page dulu. Dari situ, nanti bisa saya pertimbangkan untuk dipakai pada halaman index dan single juga (atau tidak) :)
- rismaka
  
  using Firefox 5.0 on Windows 7
  Iskandaria,
  Terima kasih atas sarannya mas. Sudah diubah tuh ;)
  
  Kalau target pembaca mas is adalah orang indonesia, lebih baik menggabungkannya sendiri mas, tanpa harus menggunakan BoxCss, karena meski menggunakan CDN, server blog mas is jauh lebih dekat dengan target pembaca, sehingga tidak akan lebih efektif bila menggunakan BoxCss. BoxCss hanya direkomendasikan untuk blog dengan target orang luar negeri.
  - http://kafegue.com iskandaria
    
    using Chromium 14.0.817.0 on Ubuntu 11.04
    Ada benarnya juga mas. Tapi saya cuma mau eksperimen saja dulu. Menarik juga mencoba sesuatu yang baru :) Makasih sudah memenuhi saran saya.
http://padlyrahman.tumblr.com Padly

using Google Chrome 12.0.742.112 on GNU/Linux
Tapi susah juga ya Mas, kalau kita merubah CSS ga bisa langsung melihat hasilnya, Masa harus menunggu 1:40. Tapi coba dulu ah. :D
- rismaka
  
  using Firefox 5.0 on Windows 7
  Padly,
  Begitulah mas, kecepatan terkadang berbanding terbalik dengan kemudahan dan kepraktisan :)
rismaka

using Firefox 5.0 on Windows 7
Cahya, Rudy Azhar, Zippy,

Tulisan di atas bila ditujukan untuk orang yang sudah paham memang terlihat berputar-putar dan tidak to the point. Bila hanya dibaca sekilas, tanpa ada keinginan pembaca untuk mengaplikasikannya, tulisan di atas memang terlihat sangat teknis dan berat untuk dibaca. Namun bila dibaca oleh seseorang yang tertarik, dan ia juga ingin mengaplikasikannya, maka ia akan membaca secara perlahan-lahan hingga ia benar-benar mengerti maksudnya. Begitulah kira-kira :)
- http://kafegue.com iskandaria
  
  using Chromium 14.0.817.0 on Ubuntu 11.04
  Betul mas Adi. Saya pas baca perlahan-lahan baru bisa mengerti. Dan memang, tulisan di atas tidak bisa dibaca cepat karena memang sangat teknis. Oya, saya sudah berhasil mempraktekkannya untuk blog saya. Sementara pada halaman page (misalnya pada halaman profil, kontak, dan daftar isi. Sebelumnya, saya rapikan/kembalikan dulu sususan kode CSS-nya menggunakan layanan styleneat. Maklum, sudah keburu saya minify CSS-nya :) Baru setelah itu, saya pakai pemanggilan dengan boxcss kayak di atas. Cuma masalahnya, gambar latar pada header jadi nggak muncul. Mungkin masalah ketika saya merapikan CSS-nya menggunakan styleneat. Ada setelan import URL yang tidak saya ubah kayaknya.
http://www.nurulimam.info/ Nurul Imam

using Firefox 5.0 on Windows XP
Masih banyak pemborosan yang dilakukan CSS Minify di atas. Paling jelas adalah penggunaan hurug CAPS pada warna yang sebaiknya di minify dengan penggunaan lowercase.

Maaf klo sok tau…
- rismaka
  
  using Firefox 5.0 on Windows 7
  Nurul Imam,
  Perasaan tidak ada huruf CAPS deh mas, yang mana ya?
  - http://www.nurulimam.info/ Nurul Imam
    
    using Firefox 5.0 on Windows XP
    Lha… ini {color: #FFF; Dalam penggunaan selektor warna harus di minimaliskan menjadi #fff jangan sampe boros dengan penggunaan #FFFFFF {Hemat Energi itu Perlu hehehhe}
    - rismaka
      
      using Firefox 5.0 on Windows 7
      Nurul Imam,
      Tidak mengapa. Pada mesin permban, code HEX berupa huruf kapital (#FFF) maupun normal (#fff) akan ditransformasi menjadi kode RGB (rgb(255, 255, 255)). Jadi tidak masalah dalam menuliskannya.
      
      Penulisan seperti itu pun rasanya tidak tepat bila dihubungkan dengan hemat energi, karena pengaruhnya sangat kecil sekali. Kalaupun terpaksa harus dihubungkan dengan hemat energi, maka saya pun harus menghilangkan banyak elemen di blog ini, seperti iklan, avatar, form komentar, tulisan basa-basi, header, javascript, css, navigasi, link, dan bahkan komentar-komentar yang masuk.

rismaka .NET

Me, WordPress, and My Empty Boring World

Minify CSS dengan BoxCss