(0275) 2974 127
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.
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.
Berikut adalah beberapa manfaat GZIP Compression, yaitu :
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.
Jika belum aktif setelah melakukan pengecekan ada beberapa cara untuk bisa mengaktifkannya. Berikut adalah cara enable GZIP Compression, yaitu :
Ada dua cara mengaktifkan GZIP Compression dengan mengedit file .htaccess, yakni :
Cara mod_deflate lebih direkomendasikan, jadi pastikan mencoba cara ini terlebih dahulu sebelum mencoba mod_gzip.
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>
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>
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;
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 sistem kompresi ini secara ringkas sebagai berikut :
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
.
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>
Berikut ini merupakan keuntungan mengaktifkan GZIP, yaitu :
Sekian artikel kali ini, semoga bermanfaat bagi Anda.
Design website toko online tidak hanya soal estetika, tapi juga UX yang bagus secara keseluruhan.…
Sebelum memulai karir Anda sebagai desainer UX, Anda harus membuat portofolio yang mencakup semua pengalaman…
Keep-Alive memungkinkan browser pengunjung Anda mendownload semua konten (JavaScript, CSS, gambar, video, dll) melalui koneksi…
Job description seorang web developer adalah membuat situs web menggunakan berbagai bahasa pemrograman. Tanggung jawab…
Secara default, WordPress tidak mendukung A/B testing. Tapi jangan khawatir. Di bawah ini, kami telah…
UX design merupakan singkatan dari User Experience design atau desain pengalaman pengguna. Istilah ini sering…