Cara Kompres / Memperkecil Ukuran Javascript dan CSS Manual II

Artikel ini adalah posting sambungan untuk melengkapi tulisan sebelumnya yaitu Cara Manual Kompres dan Memperkecil Ukuran Javascript. Seperti yang sudah dijelaskan bahwa cara kompresi javascript sebelumnya masih memiliki kekurangan pada beberapa hal yang mempengaruhi kecepatan loading website/ blog, terutama jika kita berpatokan pada Pagespeed dan Yslow. Dari sisi kompresi memang cara sebelumnya sudah berfungsi baik, namun faktor-faktor lainnya masih terabaikan seperti faktor character set, cache control, cache validator, dan encoding header info. Dengan beberapa kali trial dan error serta memperhatikan kekurangan yang ada, akhirnya kini kompressi javascript ini bisa lebih disempurnakan. Dan tidak hanya itu, ternyata cara ini juga dapat digunakan untuk mengkompress dan mengecilkan CSS sekecil mungkin.

Kode Kompresi Manual Javascript

Untuk cara menggunakan Kompresi Manual Javascript tidak akan saya bahas di sini karena sudah saya bahas sebelumnya pada Cara Kompres Javascript Manual. Namun kali ini saya akan menambahkan dan menyempurnakan kodenya. Jika sudah paham cara memakainya, maka ganti dan tambahkan kode sebelumnya dengan kode berikut:

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
//header("Content-Type:text/javascript");
// Set durasi cache untuk satu minggu
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// Set process cache control
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
// Set etag-header
header('ETag: "'.md5($ts).'"');
// Set expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// Send cache expiration header ke browser
header($ExpStr);
function compress($buffer) {
// Minify - Membuang tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
// Minify - membuang spasi yang tidak perlu
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}
?>

Dengan penambahan kode tersebut, kini selain ukuran javascript dapat diperkecil disempurnakan pula dengan fungsi minify, set cache control, eTag, future expiration dan Vary encoder pada header javascript sehingga dapat memenuhi kualifikasi Pagespeed dan Yslow secara sempurna untuk javascript ini. Adapun jika Anda mendapat peringatan “Remove query strings from static resources” silahkan baca cara mengatasinya pada Cara Menghilangkan Query String ? CSS dan JS.

Kode Kompres CSS dan Cara Menggabungkan CSS

Adapun untuk mengkompres CSS caranyapun sama dengan cara sebelumnya. Namun script ini ditempatkan pada file terpisah dengan membuat dua atau lebih file php dan css. Caranya:

• Buat file PHP baru untuk memanggil CSS dalam satu folder yang sama sesuai directory tema, contohnya style.css.php kemudian tambahkan kode berikut:

  
  <?php
  ob_start("ob_gzhandler");
  ob_start("compress");
  // Character set dan header info (lihat bedanya dengan kode di atas)
  header("Content-type: text/css; charset: UTF-8");
  // Durasi lama cache (Cache for 1 weeks)
  $offset = 60 * 60 * 24 * 7;
  $ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
  // proses cache control
  header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
  // Set etag-header
  header('ETag: "'.md5($ts).'"');
  // Furure Expiration header format
  $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
  // send cache expiration header to browser
  header($ExpStr);
  // initialize compress function for white-space removal
  ob_start("compress");
  // Begin function compress
  function compress($buffer) {
  // remove comments
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  // remove tabs, spaces, new lines, etc.
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
  // remove unnecessary spaces
  $buffer = str_replace('{ ', '{', $buffer);
  $buffer = str_replace(' }', '}', $buffer);
  $buffer = str_replace('; ', ';', $buffer);
  $buffer = str_replace(', ', ',', $buffer);
  $buffer = str_replace(' {', '{', $buffer);
  $buffer = str_replace('} ', '}', $buffer);
  $buffer = str_replace(': ', ':', $buffer);
  $buffer = str_replace(' ,', ',', $buffer);
  $buffer = str_replace(' ;', ';', $buffer);
  return $buffer;}
  require_once('style.css');
  require_once('wp-thread-comment.css');
  ob_end_flush();
  ?>
  

• Kemudian buka file style.css yang akan dikompres dan dipanggil dengan kode di atas dan tambahkan kode kompress css berikut agar “accept header”-nya matching dengan file style.css.php di atas (simpan di atas kode css):

  
  <?php header("Content-type: text/css"); ?>
  

• Setelah itu jangan lupa untuk merubah link css pada header.php yang tadinya style.css menjadi style.css.php seperti ini:

  <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
  Menjadi
  <link rel="stylesheet" href="style.css.php" type="text/css" media="screen"/>

Dengan menambahkan kode di atas maka file css akan diproses dan dikompress terlebih dahulu oleh php sehingga ukuran file menjadi lebih kecil. Proses itu meliputi kompresi itu sendiri, minify dengan menghilangkan white space dan bahkan menghilangkan comment pada css. Adapun pada bagian require_once(‘style.css’); saya menggunakan dua buah file sekaligus dengan file wp-thread-comment.css. Jika hanya menggunakan satu buah file saja maka baris require_once(‘wp-thread-comment.css’); dapat dihapus. Namun cara ini juga bermanfaat untuk mengurangi banyaknya http request dengan menggabungkan beberapa file css menjadi satu. Jadi, dengan menambahkan script di atas keuntungannypun menjadi extra, kompressi, minify dan mengurangi http request. Untuk blog inipun tadinya menggunakan 3 buah CSS dengan total 35kb, namun setelah digabungkan dan dikompress kini ukuran CSS blog ini hanya sekecil 3.7kb saja.
Model kompressi yang digunakan di atas adalah kompresi gzip di mana saat ini gzip adalah model kompresi paling baik yang ada dibandingkan dengan model kompressi lain seperti zlib compression dan mod_deflate. Harap dicatat bahwa penerapan kompresi di atas berlaku untuk javascript dan CSS secara manual, karena server hosting blog ini tidak mengaktifkan mod_deflate yang mampu mengkompress hampir semua file. Jika hosting sobat mengaktifkan mod_deflate maka proses kompressi bisa diterapkan secara otomatis, caranya bisa dibaca pada Optimasi Website dengan GZIP Compression dan Mod Deflate. Berbeda halnya dengan kompresi HTML (http compression) yaitu kompresi terhadap source halaman sebuah website/ blog. Baru-baru ini saya juga menemukan cara simple namun manjur dengan memodifikasi plugin http compression dengan sedikit modifikasi sehingga dapat dipakai tanpa plugin, silahkan baca caranya pada Tips Jitu http compression Paling Mudah.