Kompresi gzip pada HTTP bertujuan untuk mengecilkan ukuran file yang akan ditransfer, dengan kecilnya ukuran file maka berdampak pada semakin cepatnya waktu loading website/blog serta hemat bandwith.
Kompresi ini sama seperti kita meng compress file pada umumnya (.zip, .rar, .tar.gz), wah berarti ada tambahan proses yang terjadi ya? jawabnya, iya, karena server harus meng-compress setiap file yang dikirim, namun, proses ini umumnya membutuhkan resource kecil dan berlangsung sangat cepat.
Mengapa GZIP?
Karena standar HTTP (RFC 2616) hanya menspesifikasikan tiga jenis kompresi yaitu GZip, Compress, dan Deflate, yang paling populer adalah GZIP (All Browser) diikuti Deflate (dengan zlip pada header).
File apa yang perlu di compress?
File yang sebaiknya kita compress adalah file text, seperti: html, css, dan javascript, json, xml, serta font, karena ukuran file akan berkurang secara signifikan, dan sebaiknya hindari meng-compress file seperti exe, image, zip, rar, dan PDF, karena tidak berpengaruh signifikan dan malah menambah beban server.
Cek kompresi yang disupport oleh browser
Saat ini, semua browser modern sudah mensupport kompresi, untuk mengeceknya dapat dilihat melalui HTTP Request header yang dikirim oleh browser, request tersebut dapat dilihat melalui fitur Developer tools (Chrome dan Firefox Tekan F12) bagian Network.
Cara Kerja Kompresi Gzip Server – Browser
Cara kerja sistem kompresi ini secara ringkas sebagai berikut:
- Browser meminta halaman tertentu kepada web server disertai informasi kemampuan kompresi yang dimiliki browser.
- Jika browser mimiliki sistem kompresi, server akan mengirim file yang terkompresi (gzip), jika tidak, maka server akan mengirim file apa adanya.
- Browser menerima file tersebut. Jika bentuk file terkompresi, maka browser akan mengekstraknya terlebih dahulu sebelum menampilkannya ke user.
Kompresi Gzip pada server Apache
Apache menggunakan mod_deflate
(ada sejak Apache 1) untuk meng-handle kompresi, dengan module tersebut, server akan secara otomatis membaca kemampuan kompresi browser melalui HTTP Header yang dikirim. Jika browser men-support kompresi maka file yang dikirim akan di compress jika tidak maka akan dikirim apa adanya.
Pada Apache 2, mod_defate
menggantikan mod_gzip
yang ada pada apache 1, sehingga pada apache 2 TIDAK ada lagi mod_gzip
, semua di handle oleh mod_deflate
.
Contoh Code
Kode berikut ini akan meng-compress semua file kecuali image, document (pdf, docx, dll), executable, dan file archive:
<IfModule mod_deflate.c> SetOutputFilter DEFLATE SetEnvIfNoCase Request_URI \ \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \ \.(?:exe|zip|rar|7z)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \ \.(?:pdf|docx|xlsx)$ no-gzip dont-vary </IfModule>
Kenapa kita compress semuanya? jawabnya adalah karena baik sekarang maupun kedepan, kita tidak akan tahu atau setidaknya tidak akan mengecek satu persatu file apa yang akan dikirim ketika user membuka halaman website kita, misal file json tanpa ekstensi, file font yang secara tidak sengaja kita load melalui file css, dll.
Namun demikian, jika sobat ingin meng-compress hanya file tertentu saja, sobat dapat menggunakan format:
<IfModule mod_deflate.c> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE text/plain text/html text/htm text/css AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json </IfModule> </IfModule>
NOTE: jika sobat administrator, untuk dapat menggunakan kode diatas, pastikan mod_filter.so
aktif, buka, file httpd.conf
yang ada di folder apache/conf
cari kata-kata mod_filter
, hilangkan tanda # didepannya.
atau berdasarkan file extension:
<FilesMatch ".(js|css|html|htm|php|xml|json)$"> SetOutputFilter DEFLATE </FilesMatch>
Untuk lebih lengkapnya dapat dibaca pada halaman: mod_deflate – Apache HTTP Server
Demikian pembahasan mengenai kompresi Gzip pada HTTP, semoga dapat bermanfaat.
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
14 Feedback dari pembaca
Sedikit menambahkan mas,
Supaya lebih efisien lagi, maka untuk file statis yang ada di server bisa di compress terlebih dahulu (pre-compressed). Misalnya saja untuk file *.css, *.js, *.svg, *.eot, *.txt, *.htm, *.html dan *.xml
Sedangkan untuk embedded fonts atau web fonts (seperti *.woff, *.woff2) dan file statis lainnya yang memang sudah precompressed (misal *.png, *.jpeg, *.gif, *.webm, dan sejenisnya) tidak perlu dicompress lagi secara on-the-fly melalui apache/nginx.
Web server yang kondisinya sedang tidak terlalu banyak pengunjung, mungkin on-the-fly compression bisa membantu mempercepat loading website. Namun ketika web server sedang melayani banyak sekali pengunjung (load average sedang tinggi, terutama %cpu), kemungkinan malah bisa memperlambat proses loadingnya.
Pre-compressed file bisa menjadi solusinya. Di apache kita bisa menambahkan parameter:
AddEncoding gzip gz
Sedangkan di nginx kita bisa menambahkan parameter:
gzip_static on;
Pada file konfigurasinya.
Selanjutnya kita bisa mulai mengcompressnya, dengan perintah:
gzip -9 -c namafile.css > namafile.css.gz
Perintah ini bisa dilakukan melalui terminal ssh atau bisa juga kita membuat script bash (atau php juga bisa) yang selanjutnya dieksekusi via cronjob.
http://pasted.co/a6af31fe
Oh iya, selain gzip, ada juga format kompresi yg disebut brotli. Brotli memiliki rasio kompresi yang lebih besar daripada gzip. Walaupun di nginx dan apache sudah tersedia modul ini untuk kompresi on-the-fly, namun penggunaannya secara on-the-fly kurang efisien, karena penggunaan cpu-nya lebih besar ketimbang gzip. Jadi lebih baik digunakan untuk membuat pre-compressed saja.
Iya mas, terima kasih banyak sharing infonya
wah bisa nambah ilmu ne.. lagi nyari info juga buat kompres web mana tau bisa jadi lebih ringan dari yang sekarang
kalau yang berupa plugin ada gak mas ?
Yang wordpress ya mas? bisa dicari di WordPress.org, atau kalau tidak bisa mencoba plugin autoptimize
Iya mas tolong bikinin tutornya donk
untuk kompress website yang menggunakan wordpress
Terima Kasih
Untuk website menggunakan wordpress bisa dicoba plugin autoptimize mas
terimkasih tutorialnya : yang jaadi pertanyan. bagus mana mod_deflate VS gzip. ??? yang di rekomenadiskan untu SEO ..??? bantu sharreing ya.!
Yang terbaru menggunakan Gzip mas…
terimkasih atass tread ny
ikut nyimak mas. ntar saya praktekan..
siap mas…
Saya datang ke artikel ini karena blog saya ke warning SEMRush “issues with uncompressed JavaScript and CSS files”. Setelah baca artikel ini wawasan saya jadi bertambah. Terima Kasih
Sama sama mas…