Cara Mengoptimalkan CSS & JavaScript Untuk Meningkatkan Kecepatan Loading Web

Tutorial kali ini membahas tentang Cara Mengoptimalkan CSS & JavaScript Untuk Meningkatkan Kecepatan Loading Website kita. Perlu di ketahui 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 kali 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-r

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 & CSS yang cukup bagus, diantaranya:

• JavaScript Compressor
  ( http://javascriptcompressor.com/ )
  
  
  
• Minify JavaScript Online Compressor
  ( http://jscompress.com/ )
  
  
• YUI JavaScript Compressor
  ( http://developer.yahoo.com/yui/compressor/ )
  
  
  
• Clean CSS
  ( http://www.cleancss.com/ )
  
  
• CSS Compressor
  ( http://www.csscompressor.com/ )
  
  
• CSSDrive CSS Compressor
  ( http://www.cssdrive.com/index.php/main/csscompressor )
  

Tulisan Terkait