Pernahkah kamu mendengar tentan web compression?
Ketika kamu berkunjung ke sebuah website dan performanya lemot, tentu kamu akan jengkel bukan? Tidak lama kemudian kamu akan meninggalkannya dan mencari alternatif website lain yang serupa. Berbeda saat loading website cepat. Kamu tentu akan memilih melanjutkan apa yang kamu cari di website tersebut.
Maka dari itu, kecepatan performa website tidak boleh dianggap remeh. Pasalnya, hal ini akan berpengaruh pada traffic website itu sendiri. Pengelola website harus memikirkan hal ini.
Penyebab lemotnya kecepatan loading website salah satunya adalah muatannya yang berat. Jadi, saat ada orang yang berkunjung ke website kamu, maka akan terjadi permintaan atau request yang dikirimkan ke server untuk memberikan file yang diminta. Semakin besar file ini, maka akan membutuhkan waktu semakin lama untuk memuatnya.
Agar bisa jadi lebih ringan, muatan ini harus dikurangi. Salah satu caranya adalah denan melakukan web compression. Dengan mengkompres halaman website dan CSS sebelum dikirimkan ke browser kamu, maka akan bisa membantu mengurangi waktu yang dibutuhkan untuk loading. Dengan file yang lebih kecil, maka loading akan semakin cepat.
Nah, apa yang dimaksud dengan web compression? Selengkapnya akan kita bahas dalam artikel ini!
Daftar Isi
Apa Itu Web Compression
Web compression adalah sebuah cara untuk memadatkan konten website agar lebih ringkas dan ukurannya lebih kecil. Tujuan dilakukannya web compression yaitu untuk meringankan proses transfer data. Jadi, saat file website kamu lebih kecil, maka data yang dikirimkan dari web server ke browser komputer lebih ringan. Dengan begitu, performa website jadi lebih cepat.
Selain itu, kecepatan performa website juga berpengaruh pada penilaian search engine seperti Google. Semakin cepat loading website kamu, maka Google akan merekomendasikannya untuk muncul di halaman pencarian milik mereka. Jadi, bisa dikatakan bahwa kecepatan loading website ini juga berpengaruh pada SEO.
Cara Kerja Web Compression
Kamu bisa menganalogikan cara kerja web compression dengan penataan barang di koper. Misalnya, kamu hendak liburan ke luar kota. Kamu harus membawa banyak barang tapi hanya memiliki satu koper. Agar bisa memaksimalkan bawaanmu ini, tentu kamu harus pandai menata barang dalam koper.
Kamu tidak bisa sembarang meletakkan barang di koper. Kamu harus menata dengan cermat agar barang-barang yang kamu butuhkan bisa masuk. Misalnya dengan menata baju-baju dengan serapi mungkin sehingga bisa dimampatkan di koper dan tidak membiarkan ada ruang kosong terbuang sia-sia. Dengan penataan yang padat memungkinkan barang-barang yang kamu butuhkan bisa tersimpan semua dalam koper.
Nah, kurang lebih seperti itulah cara kerja web compression. Teks dan skrip pemprograman dikompres atau dimampatkan sehingga ukurannya bisa lebih ringkas. Dengan begitu, data akan lebih cepat untuk ditransfer dari server ke komputer klien.
Jenis Web Compression
Web compression yang paling sering digunakan adalah gzip. Gzip sendiri merupakan pengembangan lanjutan dari deflate dan kini menjadi standar kompresi website yang sudah diadopsi oleh banyak web server dan browser di seluruh dunia.
Gzip compression merupakan proses kompresi otomatis yang terjadi secara real time di website. Gzip akan mencari string serupa yang ada di dalam sebuah file teks dan mengganti string tersebut sementara. Dengan begitu, gzip bisa membuat seluruh ukuran file menjadi lebih kecil.
Gzip compression ini bisa sangat bermanfaat pada performa website. Pasalnya, HTML dan file CSS memakai banyak teks dan spasi berulang-ulang. Dengan menggunakan gzip compression, ukuran file yang besar ini bisa menjadi lebih kecil sekitar 60-70 persen.
Ketika pengunjung datang ke sebuah website, browser secara otomatis akan mengecek apakah gzip compression ini sudah diaktifkan. Pengecekan ini dilakukan dengan mendeteksi apakah header “content-encoding: gzip” ada di website tersebut. Ketika header ini terdeteksi, maka file yang dikompres akan muncul. Apabila header tidak ditemukan, yang akan ditampilkan ke pengunjung adalah file dengan ukuran asli yang biasanya cukup besar.
Pada tahun 2013, Google memperkenalkan jenis web compression baru yang diberi nama Brotli compression. Brotli compression pertama kali dibuat dengan tujuan untuk melakukan kompresi pada web fonts. Namun, akhirnya Google mengembangkannya lagi dan menjadikan Brotli compression ini sebagai salah satu metode web compression baru. Brotli compression disebut lebih cepat kinerjanya dibandingkan Gzip compression.
Yang perlu kamu ingat, walaupun gzip ini bisa mempercepat performa website kamu, tapi akan memakan lebih banyak resource pada CPU. Maka dari itu, sebelum kamu mengaktifkannya, pastikan bahwa CPU dalam keadaan stabil.
Cara Menggunakan Web Compression
Seperti yang sudah disebutkan di atas, metode web compression yang paling populer digunakan adalah gzip. Untuk mengaktifkannya, kamu membutuhkan akses ke file .htaccess dan akses ke cPanel. Berikut langkah-langkahnya:
1. Aktifkan gzip compression
Untuk mengaktifnya gzip compression, kamu bisa menggunakan mod_zip atau mod_deflate. Yang paling umum digunakan adalah mod_deflate. Pasalnya, algoritma konversinya lebih baik dan modulnya sendiri lebih kompatibel dengan versi Apache yang lebih tinggi. Ada beberapa opsi yang bisa kamu pilih untuk mengaktifkan gzip compression, yaitu:
Mengedit file .htaccess
Kamu bisa mengaktifkan gzip compression dengan menambahkan kode berikut ke file .htaccess:
<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>
Apabila server kamu tidak mendukung mod_deflate ini, kamu bisa menggunakan alternatif berikut ini:
<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>
Setelah perubahan tersebut kamu simpan, maka gzip compression akan langsung aktif.
Enable gzip melalui CMS plugin
Opsi kedua ini bisa dipakai bagi pengguna WordPress. Caranya adalah dengan cara menginstall plugin seperti GZip Ninja Speed Compression. Apabila kamu menggunakan Joomla, maka bisa melakukan gzip website melalui menu System > Global Configuration > Server.
Enable gzip melalui cPanel
Opsi selanjutnya adalah melakukan gzip melalui cPanel. Kamu bisa melakukan gzip compression pada semua website dalam akun hosting yang kamu pakai. Caranya adalah menggunakan Optimize Website.
Enable gzip melalui hosting basis Windows
Bagi kamu yang menggunakan server Windows, bisa mengaktifkan kompresi HTTP untuk konten yang statis maupun dinamis dengan memasukkan perintah berikut:
appcmd set config /section:urlCompression /doDynamicCompression:True
Enable gzip compression melalui plugin WordPress
Kamu bisa menginstall plugin cache yang mendukung gzip seperti W3 Total Cache. Untuk mengaktifkannya, masuklah ke menu Performance pada dashboard WordPress.
Setelah berhasil masuk, pilih menu Browser Cache dan centang Enable HTTP (gzip) compression. Klik tombol Save Changes untuk menyimpan. Gzip sudah berhasil aktif di website kamu.
Mengedit file nginx.conf
Cara ini bisa dilakukan jika web server kamu memakai Nginx. Nginx adalah web server yang memiliki performa bisa diandalkan dan punya beberapa fitur anggih lain yang mudah dikonfigurasi. Dengan menggunakan ini, website kamu bisa lebih powerful performanya.
Untuk mengatifkannya, kamu cukup menambahkan kode berikut pada 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;
Nah, kamu bisa menggunakan salah satu dari beberapa opsi di atas.
2. Uji gzip compression
Setelah berhasil melakukan langkah pertama, berikutnya adalah menguji gzip compression. Bagaimana caranya? Gzip compression ini bisa diuji dengan berbagai tool seperti WebPageTest atau GTMetrix.
Setelah gzip compression berhasil ditambahkan, maka skor yang akan muncul di GTMetrix adalah 100%. Itu artinya, file-file sudah berhasil di-compress.
Nah, itu dia penjelasan lengkap tentang apa itu web compression, jenis, dan cara menggunakannya. Dengan menerapkan metode ini, website kamu akan lebih optimal dan cepat performanya. Selamat mencoba!
