KATEGORI: WEB SERVER LINUX

Mengompresi file dengan sebuah web server

Menunjukkan cara mengompresi file website dengan Gzip pada nginx.

Thumbnail!

Sebelum kita belajar lebih dalam tentang kompresi gzip nginx, kalian pasti belum tau gunanya kan? Oke, jadi gzip kompresi berdasarkan dokumentasi dari nginx adalah filter yang mengkompresi respons menggunakan metode “gzip”. Ini sering membantu mengurangi ukuran data yang dikirimkan hingga setengah atau bahkan lebih.

Keuntungannya terletak pada kecepatan respon website, tentu saja jika file yang akan ditampilkan lumayan berisi/besar maka itu akan berpengaruh juga pada responsibilitas, dan dengan adanya kompresi ini maka akan reduce file menjadi ukuran yang lebih kecil dari ukuran aslinya.

Hal ini termasuk juga kedalam bagian mengoptimalkan web server, kalau nanti saya sudah mampu mengoptimalkan server. Pasti akan saya buatkan tutorialnya, tunggu saja ya!

Prasyarat untuk mempraktikan tutorial ini adalah kalian sudah menyelesaikan praktikum di tutorial kemarin mengenai Setup HTTPS dengan OpenSSL. Biar apa? biar tidak ada miss komunikasi diantara kita saat kalian mempraktikan tutorial ini. Yok mulai!

1. Download Source Code Website

Pastikan koneksi server debian kalian sudah dapat mengakses internet, jika sudah kita install dulu;

root@server:~/ git clone https://github.com/zuramai/wild_512

Oh iya ini hasil buatan salah satu anak LKS Web Design dan Development yang lolos ke Nasional tahun ini, jadi kita pake buat bahan percobaan. Sekarang kita cek ukuran file dari index htmlnya dulu ya. Ketik perintah ini;

root@server:~/ ls -lh wild_512/

Isi folder dari wild_512

Bisa dilihat file index.html berukuran sekitar 2K.

2. Mengaktifkan Situs

Di tutorial sebelumnya kan sudah dijelaskan caranya, jadi sekarang kita hanya perlu mengubah salah satu konfigurasinya saja. Dengan cara mengetik perintah;

root@server:~/ cp -R wild_512/ /usr/share/

root@server:~/ nano /etc/nginx/sites-available/do_exploit

Nama file do_exploit sesuaikan dengan nama file kalian ya. Lalu rubah dari;

Isi file /etc/nginx/sites-available/do_exploit bekas tutorial kemarin.

Menjadi;

Isi file /etc/nginx/sites-available/do_exploit setelah di konfigurasi lagi.

Jika sudah, saya akan bahas dikit mengenai baris yang kita konfigurasi tadi;

· root /usr/share/wild_512 = Lokasi direktori yang akan kita gunakan untuk tampilan grafis website.

Lanjut, restart dulu dengan mengetik;

root@server:~/ service nginx restart

Nah, sekarang kita akan memastikan website berjalan dengan sempurna. Buka browser kalian lalu ketik;

https://<IP-NUMBER-SERVER-KALIAN>

Tampilan homepage dari website.

Pastikan hasil yang ditampilkan awal seperti diatas, lalu kalian klik kanan di area website -> klik Inspect Elemen -> klik Network. Setelah itu reload website dan kalian lihat ukuran file <IP-NUMBER-SERVER-KALIAN>.

Hasil Inspect Elemen bagian Network.

Kalau di Microsoft Edge tampilannya seperti di gambar, terlihat filenya masih berukuran 2.0+ kb ya, original dan belum di kompresi. Sekarang lanjut ya.

3. Mengaktifkan Kompresi Gzip

Akhirnya masuk ke tahap ini juga, ketik perintah dibawah ini untuk mengubah konfigurasi lalu cari baris yang mengandung kata Gzip.

root@server:~/ nano /etc/nginx/nginx.conf

Isi file /etc/nginx/nginx.conf standar belum dikonfigurasi.

Saat kalian membuka muncul hasil konfigurasi Gzip masih bawaan dari sananya, kita hanya perlu mengubah nilai dan menghapus komentar [ # ] untuk mengaktifkan konfigurasi Gzip berdasarkan kemauan kita. Rubah menjadi seperti dibawah;

Isi file /etc/nginx/nginx.conf setelah dikonfigurasi.

Saya jelaskan sedikit apa saja yang kita lakukan dan rubah;

· gzip_on = Ini memerintahkan nginx untuk mengaktifkan kompresi Gzip.

· gzip_disable “msie6” = msie6 adalah versi dari Internet Explorer yang sudah lama, jadi kompresi gzip tidak akan dilakukan jika browser yang digunakan adalah Microsoft Internet Explorer 6.

· gzip_comp_level 6 = Level kompresi dalam hal ini akan mampu meng-kompres sampai 60% dari file aslinya.

· gzip_http_version = versi HTTP minimum dari permintaan yang diperlukan untuk mengompres.

· gzip_types = Tipe file yang akan di kompresi oleh nginx gzip.

Jika sudah langsung aja direstart dengan mengetik perintah;

root@server:~/ service nginx restart

4. Verifikasi

Waktunya cek-cek-cek yuk langsung saja ke browser kalian lalu ketik url;

https://<IP-NUMBER-SERVER-KALIAN>

Seperti yang sudah kita lakukan tadi, masuk ke Inspect Elemen -> Network.

Melihat ukuran file dari Inspect Elemen bagian Network.

Hebat bukan? Dari 2.2 KB bisa dikompresi menjadi 1.0KB. Jika sudah menampilkan seperti yang di gambar maka kalian sudah selesai mengonfigurasi Gzip.

Hmm dari tadi kalian sadar gak sih file game.js berwarna merah dan status codenya 404? Itu terjadi karena filenya tidak ada atau nama filenya tidak sesuai. Kita atasi yuk. Ketik perintah dibawah ini;

root@server:~/ ls -lh /usr/share/wild_512/js

Tuhkan nama file yang huruf [ G ] nya gede, harusnya kecil semua. Ketik perintah dibawah ini untuk merubah nama file;

root@server:~/ mv /usr/share/wild_512/js/Game.js /usr/share/wild_512/js/game.js

Melihat detail file yang didalam /usr/share/wild_512/js.

Sekarang ayo kita cek di browser.

Melihat ukuran file dari Inspect Elemen bagian Network.

Tuhkan sudah tidak berstatus code 404, perlu kalian ketahui setiap kode website mengandung arti yang berbeda-beda. Lengkapnya klik disini. Jika kalian menemukan error jangan sungkan untuk email, saya usahakan menjawab dengan kemampuan saya.