Menurut Google 53% pengunjung akan meninggalkan website dengan load time lebih dari tiga detik. Jadi bisa di katakan kalau website yang cepat merupakan suatu kewajiban di jaman sekarang.

GZIP Compression sangat cocok untuk membantu mempercepat loading website. Secara sederhana konsepnya sama dengan penerapan saat melakukan compress pada file zip, tar dan rar di komputer. Teknik ini tentunya sangat efektif untuk mempercepat loading dengan cara membuat ukuran file lebih kecil. Tetapi sangat di sayangkan GZIP ini hanya berlaku untuk file berbasis text, tidak bisa digunakan pada file yang berbasis gambar.

Apa Itu GZIP Compression ?

GZIP adalah software compresi zip versi GNU yang berfungsi untuk kompresi file agar ukurannya lebih kecil.

GZIP Compression adalah proses kompresi otomatis yang terjadi secara real time di website. Saat pengunjung mengunjungi suatu website maka browser akan melakukan pengecekan apakah GZIP Compression sudah aktif.

Pengecekan dilakukan dengan cara mendeteksi apakah header “content-encoding: gzip” itu ada pada website tersebut. Jika header terdeteksi maka file yang sudah di kompres akan di tampilkan. Namun jika header tidak terdeteksi file berukuran asli yang akan ditampilkan kepada pengunjung.

Kebanyakan jika GZIP Compression tidak di aktifkan maka akan menemukan error di Tools Pengecekan Kecepatan. Misalnya Google PageSpeed Insight atau GTMetrix.

File yang sebaiknya di kompres adalah file text, seperti: HTML, CSS, JavaScript, JSON, XML, serta font karena ukuran file akan berkurang secara signifikan, dan sebaiknya hindari kompres file seperti exe, image, zip, rar, dan PDF karena tidak berpengaruh signifikan dan akan menambah beban server.

Font-gambar tidak termasuk karena gambar mempunyai teknik kompresi yang berbeda dari file yang lainnya.

Manfaat GZIP Compression

Berikut adalah beberapa manfaat GZIP Compression, yaitu :

• Membuat pengunjung website atau blog menjadi nyaman karena loading website yang lebih cepat.
• Mengurangi beban kerja server karena load data menjadi lebih kecil
• Bagus untuk peringkat ranking SEO di mesin pencari.

Cara Cek GZIP Compression Sudah Aktif Di Website

Cara tercepat dan termudah untuk melakukan pengecekan apakah GZIP Compression sudah aktif di website dengan mengunjungi https://technumero.com/check-gzip-compression/ cukup dengan memasukkan URL website dan klik Check.

Dalam beberapa detik hasilnya akan keluar. Jika sudah aktif akan diberitahu seberapa banyak ukuran file yang akan di kompres. Namun jika tidak maka akan menemukan pesan error yang berarti belum aktif.

Cara Enable GZIP Compression di Website

Jika belum aktif setelah melakukan pengecekan ada beberapa cara untuk bisa mengaktifkannya. Berikut adalah cara enable GZIP Compression, yaitu :

1. Enable GZIP Compression dengan Plugin WordPress

1. Install plugin cache yang mendukung GZIP.
2. Masuk ke menu Performance di dashboard WordPress.
3. Pilih menu Browser Cache dan centang Enable HTTP (gzip) compression.
4. Klik tombol Save Changes untuk menyimpan.

2. Edit File .htaccess

Ada dua cara mengaktifkan GZIP Compression dengan mengedit file .htaccess, yakni :

• mod_deflate.
• mod_gzip.

Cara mod_deflate lebih direkomendasikan, jadi pastikan mencoba cara ini terlebih dahulu sebelum mencoba mod_gzip.

• mod_deflate

Berikut adalah cara mengaktifkan dengan mod_deflate, yaitu :

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Older Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

• mod_gzip

Di bawah ini adalah cara mengaktifkan dengan mod_gzip, yaitu :

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

3. Mengedit File nginx.conf

Cara ini hanya dilakukan apabila web server menggunakan NGINX.

Untuk mengaktifkannya di NGINX cukup menambahkan kode di bawah ini ke file nginx.conf :

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

4. Cara Mengaktifkan Gzip Compresion Via Cpanel

1. Langkah pertama yaitu anda harus login di akun cpanel anda.
2. Berikutnya silahkan menuju optimize website pada menu software and service.
3. Selanjutnya pada menu optimize website silahkan pilih saja compress all content.
4. Klik update setting.

Cek kompresi yang disupport oleh browser

Semua browser modern sudah support kompresi, untuk pengecekan 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 :

1. Browser meminta halaman tertentu kepada web server disertai informasi kemampuan kompresi yang dimiliki browser.
2. Jika browser memiliki sistem kompresi, server akan mengirim file yang terkompresi (gzip). Jika tidak, maka server akan mengirim file apa adanya.
3. Browser menerima file tersebut. Jika bentuk file terkompresi, maka browser akan mengekstrak terlebih dahulu sebelum menampilkan 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 support kompresi maka file yang dikirim akan di kompres 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 GZIP Compression

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 kompres semuanya? karena tidak akan tahu atau setidaknya tidak akan mengecek satu persatu file apa yang akan dikirim ketika user membuka halaman website. Misal file JSON tanpa ekstensi, file font yang secara tidak sengaja load melalui file css, dll.

Namun jika ingin kompres hanya file tertentu saja dapat menggunakan format sebagai berikut :

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 administrator 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>

Keuntungan Mengaktifkan Kompresi GZIP

Berikut ini merupakan keuntungan mengaktifkan GZIP, yaitu :

• Disukai oleh mesin pencari.
• Server Anda tidak lagi memiliki permintaan besar untuk diproses.
• Ukuran situs web Anda akan berkurang 70-90%.
• Tingkatkan kecepatan memuat situs web Anda.

 

Sekian artikel kali ini, semoga bermanfaat bagi Anda.