Melanjutkan artikel sebelumnya untuk optimisasi kecepatan loading blog. Kali ini akan membahas tentang Optimisasi JavaScript dan CSS. Optimisasi kode JavaScript dan CSS ini bisa dilakukan dengan cara menggabungkan semua kode Javascript maupun kode CSS stylesheet ke dalam satu file eksternal, misalnya kita punya 3 file JavaScript (.js) dan 3 file Stylesheet (.css), jadi semua file JavaScript digabung menjadi satu file script.js dan untuk semua file stylesheet digabung pada file style.css.
Langkah selanjutnya setelah semua kode Javascript dan CSS stylesheet digabungkan dalam satu file, kemudian dikompresi ukurannya (size optimization). Kompresi ini bisa kita lakukan baik secara manual maupun dengan menggunakan tool kompresi (JavaScript and CSS Compressor). Konsep utama dari kompresi JavaScript dan CSS adalah dengan meniadakan karakter-karakter yang tidak penting serta notasi-notasi yang mungkin bisa diminimalisir.
Sebagai contoh, untuk optimisasi CSS sebagaimana penjelasan pada tutorial tone-up CSS yang kami kutip dari Sitepoint berikut ini:
Kode CSS sebelum dioptimalkan (size: 271 bytes).
#element
{
margin-top: 0px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 20px;
background-color: #aabbcc;
background-image: url("myimage.png");
background-position: center center;
background-repeat: no-repeat;
}
Berikut ini kode CSS setelah dioptimalkan (size: 94 bytes).
#element { margin: 0 5px 10px 20px; background: #abc url(myimage.png) 50% 50% no-repeat; }
Kedua kode CSS diatas memiliki fungsi sama, namun kode hasil dari optimisasi memiliki ukuran lebih kecil (optimisasi manual telah mampu mengkompresi ukuran CSS hingga sebesar 66,4%).
Cara lain, jika anda masih belum yakin untuk optimisasi secara manual bisa menggunakan bantuan tool. Berikut ini beberapa tool pengkompresi JavaScript dan CSS yang cukup bagus, diantaranya:
– JavaScript Compressor
– Minify JavaScript Online Compressor
– YUI JavaScript Compressor
– Clean CSS
– CSS Compressor
– CSSDrive CSS Compressor
Tips: Bagi pengguna WordPress anda bisa langsung menggunakan plugin, ada banyak cache plugin seperti WP Super Cache dan W3 Total Cache yang telah menyertakan fitur kompresi JavaScript dan CSS untuk blog WordPress anda. Silakan download salah satu plugin cache tersebut dan ikuti petunjuk penggunaannya 
Demikian artikel serial optimasi kecepatan loading website untuk meningkatkan score SEO website/blog sobat. Semoga bermanfaat, silakan tinggalkan masukan, saran, maupun pertanyaan di kolom komentar dengan sopan ^^
Referensi:
– Eksperimen pribadi.
– Tune-up CSS (SitePoint).
…
Repost from Archive.org (01/05/2010)