Salah satu teknik untuk mempercepat loading halaman web adalah dengan memampatkan/mengkompresi CSS sehingga ukuran file CSS yang diload lebih kecil. Untuk mengkompres CSS setidaknya ada tiga metode: 1) metode Paul Stamatiou, 2) metode Perishable Press dan 3) metode Reinhold Weber.
Pada tulisan kali ini saya akan mengaplikasikan metode yang diperkenalkan oleh Reinhold Weber, karena mampu mengkombinasikan beberapa file CSS dalam satu output file CSS terkompresi dan tidak perlu mengganti ekstensi file css menjadi file PHP.
Berikut contoh script PHPnya:
[sourcecode language=”php”]
<?php
header(‘Content-type: text/css’);
ob_start("compress");
function compress($buffer) {
/* remove comments */
$buffer = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ‘ ‘, ‘ ‘, ‘ ‘), ”, $buffer);
return $buffer;
}
/* your css files */
include(‘master.css’);
include(‘typography.css’);
include(‘grid.css’);
include(‘print.css’);
include(‘handheld.css’);
ob_end_flush();
?>
[/sourcecode]
Script diatas akan memuat 5 file CSS sekaligus, yaitu master.css, typography.css, grid.css, print.css dan handheld.css. Penggunaan:
[sourcecode]
<link rel="stylesheet" type="text/css" media="screen" href="/style.css"/>
[/sourcecode]
File style.css tak perlu diganti menjadi file PHP, karena kita menggunakan metode Weber. Selamat mencoba!