Kompresi css , javascript dengan htaccess

Salah satu faktor tercapainya loading web yang cepat adalah mengoptimalkan document size halaman HTML hasil render berikut file-file statis di dalamnya. Diantara file-file statis yang mempunyai peranan menambah beban document size adalah file-file script ( javascript) dan css. Kali ini kita akan belajar bersama bagaimana caranya supaya ukuran file tersebut bisa dikurangi dengan cara kompresi melalui htaccess.

Prosedur kompresi file ada banyak, dan kenapa kali ini saya memilih topik dengan menggunakan htaccess, karena bisa langsung diujicoba di local server ( localhost ) dan tidak menggunakan tools kompresi pihak ketiga ( baca : kompresi manual ).

Caranya sederhana dan mudah, buka file .htaccess dengan text editor ( pastikan bukan macam wysiwyg editor ), lalu ketikkan kode berikut :

<FilesMatch ".(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>

Mode kompresi diatas berlaku hanya bilamana modul deflate aktif di server ( umumnya sudah diaktifkan )

Untuk memastikan apakah kode di atas berfungsi dengan baik, dapat dengan melihat output respond browser, seperti berikut :

devio-compressed00

Perhatikan ukuran yang ditransfered ( respond dari server ) dibandingkan dengan ukuran aslinya. Contoh file bootstrap.min.css dengan ukuran asli sebesar 106.95KB dikirim oleh server dalam bentuk terkompresi sebesar 17.72KB, dan itu berarti penghematan atau terkompresi sebesar 100% – ( 17.72/106.95 x 100% ) = 83.43% !

Selamat berkompresi, selamat meningkatkan laju loading website anda.

Comments are closed.