Wednesday 7 October 2020

Teknik Kompresi untuk Website Lebih Cepat

Posted By: Aan Hariyanto - 21:18
Selalu ada cara membuat website Anda lebih cepat supaya pengunjung tidak menunggu lama. Salah satunya, dengan melakukan kompresi data agar komunikasi data lebih efisien.

Apa itu Brotli?
Brotli adalah algoritma kompresi yang dikembangkan oleh dua teknisi dari Google. Brotli sengaja diciptakan untuk membuat halaman website bisa diakses lebih cepat. 

Dengan teknik kompresi ini, file data menjadi berukuran lebih kecil sehingga menghemat penggunaan data saat komunikasi data terjadi. Kondisi tersebut juga membuat proses transfer data bisa berjalan lebih baik. 
Jika akses ke halaman website bisa lebih cepat, pengunjung website Anda tidak perlu menunggu terlalu lama sehingga kenyamanan bisa ditingkatkan. 

Pada awalnya, Brotli dibuat untuk melakukan kompresi web font secara offline di tahun 2013. Kemudian, di tahun 2015, Google mengembangkannya sebagai teknik kompresi data secara umum (generic purpose) dan bersifat open source. 

Secara teknis, Brotli menggunakan kombinasi dari algoritma LZ77, Huffman coding, dan 2nd order context modeling. Kombinasi ini memungkinkan Brotli membuat backreferences dengan sliding window (bukan fixed window ala Gzip). Hasilnya, upaya kompresi file besar pun dapat berjalan dengan lebih baik dengan peningkatan hingga 25%! 

Google menyebut Brotli sebagai format data baru yang mampu mengalahkan algoritma Zopfli hingga 26%. Tidak hanya lebih baik, Brotli mampu melakukannya dalam waktu yang lebih singkat. 

Saat ini sudah banyak browser dan server yang mendukung Brotli karena performa andal yang mampu dihadirkannya. Diantaranya Mozilla Firefox, Google Chrome, Safari untuk penggunaan di desktop dan Opera Mini untuk pengguna mobile. 
Cara Kerja Brotli

Bagaimanakah Brotli melakukan kompresi pada file dengan efektif? Mari pelajari cara kerja Brotli secara singkat. 

Seperti halnya kegiatan browsing yang biasa dilakukan, pada saat pengguna mengetikan sebuah alamat website, pada dasarnya pengguna meminta akses ke server website tersebut. 
Jika browser sudah mendukung kompresi Brotli, browser akan menginformasikan jenis konten yang bisa di-decompress menggunakan header Accept Encoding kepada server tersebut.
Server akan menentukan jenis kompresi konten yang akan dikirimkan dengan algoritma kompresi yang diminta, dalam hal ini Brotli. 
Tahapan tersebut diikuti oleh proses pengiriman data menggunakan header Content-Encoding ke browser, tentu saja dengan teknik kompresi Brotli.
Browser akan menampilkan konten yang diminta oleh pengguna dengan terlebih dahulu melakukan decompress data. 

Meskipun harus melalui empat langkah, proses ini berjalan hanya dalam sekejap. Bahkan, pengunjung Anda tidak akan menyadarinya sebab halaman yang diminta akan langsung ditampilkan tanpa harus menunggu lama. 

3 Kelebihan Brotli
Secara umum, semua teknik kompresi bertujuan untuk membuat akses ke website menjadi lebih cepat. Dengan proses transfer data yang efisien, proses loading halaman tak akan memakan waktu lama. 
Namun, apa yang membuat Brotli istimewa dibandingkan algoritma kompresi yang sudah ada?

1. File Kompresi Lebih Kecil (Brotli vs Gzip)
Berbicara algoritma kompresi, Gzip lebih dulu digunakan dan mampu menawarkan performa kompresi yang tidak tertandingi. Tapi, itu sebelum adanya Brotli. 

Dari sebuah tes, Brotli memberikan hasil kompresi lebih kecil dibandingkan Gzip. Seberapa kecil? Hasil kompresi lebih kecil ditunjukkan pada JavaScript (14%), HTML (21%) dan CSS (17%). 

Lebih jauh, pengujian lain dilakukan untuk mengetahui performa Brotli vs Gzip pada platform WordPress. Inilah hasilnya dalam bentuk tabel:
Parameter Brotli Gzip
Hasil Kompresi (KB) 81.7 KB 84.7 KB

Hasil tersebut tentu sangat signifikan mengingat banyak website saat ini memiliki file seperti JavaScript yang berukuran cukup besar. Jadi, tanpa optimasi ini, loading website bisa lama dan menjadi masalah.

Mungkin sebelumnya, Anda sudah familiar dengan mempercepat website lewat Minify CSS, HTML dan JavaScript. Nah, dengan menggunakan Brotli, upaya optimasi website Anda tentu akan lebih optimal.

2. Waktu Kompresi Lebih Singkat 
Selain hasil kompresi, waktu kompresi yang lebih singkat menjadi faktor yang penting dari penggunaan Brotli. 
Berdasarkan sebuah pengujianan, Brotli terbukti dapat melakukan proses kompresi dengan lebih cepat dibandingkan beberapa algoritma kompresi lain

Bahkan tes yang dilakukan SitePoint di platform WordPress menunjukkan kompresi Brotli lebih unggul daripada Gzip. Hasilnya seperti tabel berikut:
Parameter Brotli Gzip
Kecepatan 690ms 780ms

Jika Anda mendapatkan hasil sebaliknya, lakukan pengecekan pada setting level of compression Anda. 
Secara default, Brotli mengatur tingkat kompresi di level 11 (paling baik) sehingga membutuhkan waktu lebih banyak. Sesuaikan level kompresi ini untuk hasil yang sesuai keinginan. 

3. Mendukung Berbagai Browser
Saat ini, hampir semua browser mendukung algoritma kompresi Brotli. Mulai dari browser untuk desktop seperti Firefox dan Chrome hingga browser untuk platform mobile seperti Opera Mini.

 

Untuk memastikan apakah browser yang Anda gunakan sudah mendukung kompresi Brotli, Anda bisa melakukan pengecekan. Kami akan menjelaskannya lebih lengkap di bagian Cara Mengecek Brotli. 
Apa Manfaatnya Bagi Website Anda?

Kemampuan kompresi yang baik dari Brotli akan mendukung performa website Anda. 
File yang melewati proses kompresi akan menjadi lebih kecil. Jadi, akan menghemat banyak bandwidth saat komunikasi data dilakukan. Nah, bandwidth yang kecil akan membuat website mampu loading lebih cepat. 

Kenapa kecepatan website itu penting?
Karena pelanggan Anda tak mau menunggu lama. Menurut survey, pengunjung hanya bersedia menunggu selama 3 detik sebelum beralih ke website lain. 

Tidak hanya itu, website yang lambat hanya akan menyebabkan Anda kehilangan kesempatan menjual produk lebih banyak. Menurut sebuah data, delay loading selama 1 detik bisa menurunkan conversation rate hingga 7%!
Nah, dengan penggunaan Brotli, semua dampak negatif di atas bisa Anda hindari.

Cara Mengecek Brotli
Cukup mudah untuk mengecek dukungan Brotli dari sebuah browser. Di contoh ini kami akan menggunakan Firefox.
Langkah pertama, Anda bisa masuk ke menu Settings di sebelah kanan atas, lalu pilih Web Developer. 

Kemudian, Anda bisa masuk ke menu Network. 
Di bagian Network, Anda akan menemukan Accept Encoding di bagian Request Header. Jika sudah mencakup br, artinya sudah mendukung Brotli.


Selain browser, server yang dituju juga harus mendukung kompresi menggunakan Brotli. Jadi, pastikan layanan hosting Anda menggunakan server yang mendukung Brotli. 
Salah satu server yang mendukung Brotli secara default adalah LiteSpeed Server. 

Pengguna Niagahoster dapat menikmati semua kelebihan dari Brotli, karena paket hosting Niagahoster sudah menggunakan server LiteSpeed dengan Brotli Enabled. Artinya, kecepatan akses website Anda akan lebih terjamin. 
Untuk membuktikan dukungan dari Brotli di website Anda, silakan masukkan URL dari website Anda ke tool Brotli Test dari KeyCDN.

Jika hasil di kolom hijau menunjukkan “Brotli compression is supported”, maka artinya kompresi Brotli bisa berjalan dengan baik.
Jika ingin melakukan pengecekan dari browser, Anda bisa masuk ke bagian Network pada menu Developer. Persis seperti cara di atas ketika menggunakan Firefox. 

Bedanya, Anda bisa mencari Content-Encoding pada bagian Response Header. Jika tertulis br, berarti sudah mendukung Brotli dengan baik.


Penutup
Sebuah teknologi baru harus mampu memberikan kemudahan yang meningkatkan kenyamanan pengguna ketika beraktivitas online. Algoritma kompresi Brotli adalah salah satu yang menjalankan perannya dengan baik. 
Dengan Brotli, proses loading website bisa berjalan lebih cepat sehingga tak membuat pengunjung menunggu lama. 
Agar dapat bekerja dengan baik, Brotli harus didukung baik oleh browser yang Anda gunakan maupun server bagi website Anda.

About Aan Hariyanto

Organic Theme is officially developed by Templatezy Team. We published High quality Blogger Templates with Awesome Design for blogspot lovers.The very first Blogger Templates Company where you will find Responsive Design Templates.

Copyright © Sphinx-Computer, Visit Me: Disclaimer | Privacy Policy | Terms and Conditions | Contact Us | About Us

Designed by