Cara Mengaktifkan Gzip Compression

Beberapa hari ini saya sedang berusaha untuk mengoptimalkan kecepatan website saya, banyak cara yang sudah saya lakukan agar website / blog menjadi lebih ringan dan juga memiliki loading web yang cepat saat diakses oleh pengunjung (visitor).

Mulai dari melakukan resize dan kompres gambar (jpg/png/gif), minify js dan css, lalu menambahkan lazyload script dan menambahkan Gzip Compression. Mungkin nanti akan saya buat artikel yang membahas bagaimana caranya mempercepat loading website dan juga artikel untuk mengoptimalkan website agar cepat terindeks oleh mesin pencarian google.

Untuk saat ini, saya sedang ingin membahas masalah Gzip Compression yang sering sekali timbul dan menjadi permasalahan para blogger saat mereka melakukan audit (analisa) website menggunakan GTmetrix atau PageSpeed Insights.

Cara mengaktifkan Gzip Compression

Untuk mengaktifkan Gzip Compression, kita bisa melakukannya dengan beberapa cara. Menambahkan script Enable Gzip Compression melalui .htaccess ataupun langsung melalui webserver (apache/nginx/litespeed).

Silahkan simak baik-baik tutorial Cara Mengaktifkan Gzip Compression pada website (wordpress) yang akan saya jelaskan di artikel ini.

1. Mengaktifkan Gzip Compression Melalui .htaccess

Buka file .htaccess yang ada pada website kamu lalu tambahkan script berikut:

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

2. Mengaktifkan Gzip Compression di Apache

Akses lokasi web configuration pada apache web server kamu, lalu tambahkan script berikut:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Lokasi web configuration tiap website dan provider (penyedia layanan) berbeda-beda sesuai dengan standard installation yang mereka gunakan.

Tapi biasanya web config tersimpan pada lokasi (direktori) /etc/httpd/conf dan /etc/httpd/conf.d, sedangkan untuk website biasanya berada pada /var/www.

3. Mengaktifkan Gzip Compression di Nginx

Akses web config atau nginx.conf pada server nginx, lalu tambahkan script berikut:

	# gzip compression
	gzip on;
	gzip_comp_level 2;
	gzip_http_version 1.0;
	gzip_proxied any;
	gzip_min_length 1100;
	gzip_buffers 16 8k;
	gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

	# Disable for IE < 6 because there are some known problems
	gzip_disable "MSIE [1-6].(?!.*SV1)";

	# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
	gzip_vary on;

4. Mengaktifkan Compression di Litespeed Webservers

Kalau web server kamu menggunakan Litespeed, kamu bisa aktifkan compression menggunakan “tuning“, biasanya ada pilihan untuk menonaktifkan ataupun mengaktifkannya (enable compression) pada halaman konfigurasi Litespeed, jika tidak. Kamu bisa mengaktifkannya dengan cara pilih opsi “ON“, nanti akan muncul beberapa pilihan (opsi) Gzip Compression pada configurasi Litespeed website kamu.

Berikut perbandingan skor GTmetrix sebelum Enable Gzip Compression dan sesudah mengaktifkan Gzip Compression.

Selain menggunakan tools Gzip Compression checker, kamu juga bisa melakukan test secara manual menggunakan browser seperti google chrome, mozilla firefox, opera dan lain-lain.

Berikut cara cek manual Gzip Compression menggunakan browser:

• Aktifkan Development Tool (F12) pada website atau halaman yang ingin di uji coba.
• Pilih menu Network.
• Tambahkan Content-Encoding pada tab result.
• Checklist use large request row.
• Pada filter pilih JS (script).
• Selanjutnya refresh halaman (F5).

Setelah kamu mengikuti panduan di atas, maka kamu akan melihat penampakan hasilnya seperti gambar di bawah ini:

Jika Gzip Compression sudah diaktifkan maka pada Content-Encoding akan terlihat format file menjadi Gzip, itu artinya file pada website berhasil di compress menjadi Gzip. Lihat bagian size ada perbedaan size pada file yang telah berhasil dikompresi menggunakan Gzip Compression dengan ukuran file aslinya.

Saya rasa pembahasan tentang Gzip Compression sudah cukup jelas dan mudah dipahami, nantikan artikel tentang cara pengoptimalan website (wordpress) selanjutnya dari saya, selamat mencoba dan semoga bermanfaat.

FAQ