Optimisasi JavaScript dan CSS untuk Meningkatkan Kecepatan Load Website

Masih postingan lanjutan untuk optimisasi kecepatan load web/blog. Kali ini tentang Optimisasi JavaScript dan CSS. Optimisasi JavaScript dan CSS ini bisa dilakukan dengan cara menggabungkan semua script dan stylesheet ke dalam satu file eksternal, misalnya kita punya 3 file JavaScript (.js) dan 3 file Stylesheet (.css), so semua file JavaScript digabung menjadi satu file script.js dan untuk semua file stylesheet digabung pada file style.css.

Langkah selanjutnya setelah semua script dan stylesheet digabungkan dalam satu file, kemudian dioptimisasi ukurannya (size optimization). Optimisasi ini bisa kita lakukan baik secara manual maupun dengan memanfaatkan tool kompresi JavaScript dan CSS (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 pada script atau kode css tersebut.

Sebagai contoh mudah untuk optimisasi CSS sebagaimana penjelasan pada tutorial tone-up CSS 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 ke-2 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 pengkompresi. 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 ()

Tricky: Bagi pengguna WordPress anda tidak perlu frepot-frepot (repot-repot) lagi memindahkan semua script & stylesheet ke satu file dan mengkompresinya secara manual, karena seorang yang baik hati telah membuatkan plugin JavaScript dan CSS Compressor untuk blog WordPress anda. Silakan download plugin WP-Minify dan ikuti petunjuk penggunaannya

Download plugin WP-Minify.

Source:
- Eksperimen pribadi.
- Tune-up CSS (SitePoint).

• «Previous Post
• Next Post »