Brotli Compression: Algoritma untuk Mempercepat Website

Brotli Compression: Algoritma untuk Mempercepat Website

Kamu tentu tahu bahwa kecepatan website adalah hal yang berpengaruh untuk user experience dan SEO. Website yang cepat juga bisa membantu meningkatkan engagement. Tidak hanya itu, conversion rate dan sales revenue juga ikut meningkat. Ada beberapa cara yang bisa kamu lakukan untuk meningkatkan kecepatan website, salah satunya adalah Brotli, sebagai algoritma kompresi data buatan Google.

Cara paling efektif untuk mempercepat situs adalah mengecilkan ukuran website. Semakin kecil ukuran data yang harus di-download ke browser, semakin cepat website akan dimuat. Selain mengoptimasi ukuran CSS dan JavaScript, kamu juga membutuhkan algoritma kompresi superior untuk mengurangi ukuran sebuah file di website, seperti Brotli.

Dewaweb sudah menggunakan LiteSpeed Cache untuk membantu website kamu agar bekerja dengan cepat. Salah satu teknologi yang akan pengguna dapatkan adalah Brotli. Di artikel kali ini, Dewaweb akan mengulas segala hal tentang Brotli, mulai dari definisi, cara kerja, dan manfaatnya. Simak artikel ini ya!

Baca Juga: 12 Cara Mempercepat Website WordPress Paling Ampuh

Apa itu Brotli?

Brotli adalah sebuah algoritma kompresi data open source yang dikembangkan oleh dua engineer Google. Algoritma ini pertama kali dirilis di tahun 2015.

Mungkin kamu pernah mendengar nama gzip. Gzip adalah salah satu algoritma kompresi yang paling banyak digunakan. Tetapi, saat ini ada algoritma kompresi lain yang mulai menjadi populer, Brotli adalah salah satunya.

Brotli dirancang untuk melakukan text compression dan dapat mengecilkan ukuran file sekitar 20%-30% lebih kecil dari gzip. Kecepatan encodingnya memang lebih lambat dari gzip (tergantung dengan pengaturan kualitas), tetapi kecepatan decodingnya bisa dibilang setara dengan gzip.

Sampai saat ini, ada beberapa browser yang juga mendukung Brotli:

  • Chrome mendukung brotli sejak versi 49.
  • Microsoft Edge akan mulai mendukung brotli sejak versi 15.
  • Firefox sudah mengimplementasikan brotli sejak versi 44.
  • Opera sudah mendukung brotli sejak versi 36.

Cara Kerja Brotli

Bagi kamu yang penasaran bagaimana sebenarnya cara Brotli bekerja, berikut ini adalah penjelasan singkatnya:

  1. Seorang user mengakses website atau aplikasi web yang berjalan di sebuah server yang mendukung brotli
  2. Browser akan memberi notifikasi kepada server tentang konten apa saja yang bisa di decompress dengan menggunakan header Accept-Encoding
  3. Server kemudian menentukan mana di antara konten yang sudah dikompresi yang akan dikirim berdasarkan algoritma kompresi yang ada pada permintaan
  4. Server kemudian akan mengirim header Content-Encoding ke browser, ini menandakaan bahwa metodenya sudah digunakan
  5. Browser kemudian akan me-decompress data sebelum disajikan di halaman website

Baca Juga: Cara Mempercepat Loading Website dan Blog dengan Mudah

Keunggulan Brotli untuk Website

Mendukung berbeagai browser

Salah satu keunggulan Brotli adalah hampir semua browser mendukung algoritma kompresi ini. Untuk memastikan apakah browser yang digunakan sudah mendukung Brotli, kamu bisa melakukan pengecekan pada bagian setting browser yang digunakan. Umumnya, mayoritas browser yang banyak digunakan saat ini telah mendukung Brotli, seperti desktop browser Chrome hingga mobile browser seperti Opera Mini.

Lebih cepat melakukan kompresi

Keunggulan lainnya dari Brotli adalah dapat melakukan kompresi secara lebih cepat. Bila dibandingkan algoritma kompresi lainnya, Brotli termasuk salah satu yang paling cepat melakukan kompresi. Hal ini juga telah dibuktikan dengan beberapa pengujian yang sempat dilakukan oleh berbagai pihak.

Hasil kompresi relatif lebih kecil

Selain lebih unggul soal waktu kompresi yang lebih cepat, Brotli juga menghasilkan file kompresi yang lebih kecil. Artinya, hasil kompresi Brotli relatif lebih baik dibandingkan algoritma kompresi lainnya.

Perbandingan Brotli, Zopfli dan gzip

LinkedIn adalah salah satu website yang sudah mengimplementasikan Brotli. LinkedIn sendiri sudah melakukan benchmarked performance antara Brotli, Zopfli, dan gzip pada sebuah file JavaScript di halaman utama LinkedIn. Mereka menemukan bahwa brotli -11 membantu mengecilkan ukuran file 30% lebih dari gzip -6. Kecepatan decompressionnya sendiri lebih cepat dari gzip dan Zopfli.

Brotli-vs-GZIP-vs-Zopfli-LinkedIn-Benchmark-Dewaweb

 

Brotli-vs-zopfli-vs-gzip-LinkedIn-Benchmark-Dewaweb

Untuk mengetes lebih jauh, LinkedIn juga melakukan A/B Testing. LinkedIn mengatur agar 50% anggota LinkedIn mendapatkan penggunaan brotli bila memungkinkan. Sementara  50% lainnya tidak mendapatkannya. LinkedIn kemudian membandingkan waktu loading halaman feed awal untuk 90th percentile.

LinkedIn melihat peningkatan 2-3,6% dalam kecepatan situs di Amerika Serikat, dan peningkatan 6-6,5% di India. Brotli menawarkan hasil yang lebih baik untuk klien dengan bandwidth rendah.

LinkedIn sendiri melihat peningkatan yang lebih besar di India dibandingkan Amerika Serikat. Selain itu, pengguna di mobile juga mengalami peningkatan kecepatan dibanding mereka yang menggunakan desktop.

LinkedIn-Brotli-AB-Testing-Dewaweb

Jumlah ini masih mungkin saja bertumbuh karena tingkat penetrasi belum 100%. Tidak semua orang yang dialihkan ke eksperimen Brotli menggunakan browser yang mendukungnya.

Brotli hanya dapat membantu mempercepat proses download konten. Untuk lebih memahami bagaimana proses download konten berkontribusi terhadap lamanya waktu untuk membuka sebuah halaman website secara keseluruhan, LinkedIn menggunakan alat dev Chrome untuk memecah timeline ke dalam kategori pemrosesan CPU.

Brotli-browser-dewaweb

Baca Juga: 6 Trik untuk Mengoptimalkan Kinerja Website Jadi Lebih Baik

Untuk aplikasi yang berat JavaScript, seperti website utama LinkedIn yang dibuat dengan Ember.js, Brotli bukanlah satu-satunya hal yang bisa membantu menyelesaikan semua masalah kecepatan website. Jaringan yang lambat, seperti 3G, adalah salah satu tempat dimana kamu bisa benar-benar merasakan keuntungan menggunakan Brotli.

Proses download konten sendiri berkontribusi hingga ~ 80% dalam waktu loading sebuah (bagian “kosong” di diagram lingkaran tempat CPU menunggu pengunduhan JavaScript). Untuk jaringan cepat seperti kabel, kemacetan utama biasanya adalah CPU yang mengevaluasi dan menjalankan JavaScript (bagian “scripting” pada diagram lingkaran) untuk merender halaman, bukan bandwidth jaringan.

Ini membantu memperjelas mengapa Brotli menunjukkan peningkatan yang lebih banyak di India daripada Amerika Serikat.

Baca Juga: Apa itu AMP? Pengertian, Cara Kerja dan Manfaatnya untuk SEO

Dari hasil percobaan LinkedIn, dengan menggunakan Brotli untuk konten statis, mereka melihat adanya peningkatan kecepatan website yang cukup mengesankan, terutama untuk user atau pengguna yang berasal dari tempat-tempat yang memiliki bandwidth rendah. LinkedIn juga yakin bahwa Brotli memiliki banyak potensi dan mendorong setiap pemilik website untuk mulai menggunakannya.

Penggunaan brotli dianggap sudah bisa membantu meningkatkan user experience agar pengunjung website kamu mau untuk datang dan kembali ke website kamu. Dengan peluncuran browser baru dan peningkatan pengguna ke browser terbaru, kamu akan melihat bahwa algoritma ini dapat membantu meningkatkan traffic website.

Baca Juga: Core Web Vitals: Panduan Optimasi Website untuk Algoritma Baru Google

Sudah Tahu Apa itu Brotli?

Brotli adalah tool yang bersifat open source, jadi tersedia secra gratis sebagai server add-on untuk provider web hosting dan jaringan pengiriman konten (CDN), serta individu/bisnis yang mengelola server mereka sendiri. Menggunakan algoritma kompresi Brotli tidak hanya menghemat biaya bandwidth pelanggan penyedia hosting dan CDN, tetapi juga mempercepat waktu loading sebuah website.

Dengan munculnya algoritma kompresi seperti brotli, ini merupakan sebuah keuntungan besar bagi pemilik website. Menggunakan brotli dapat membantu menguraikan dan mengoptimalkan pengiriman konten melalui Internet. Namun, kamu harus memastikan bahwa browser yang digunakan juga mendukung teknologi ini.

Dengan website yang lebih cepat, kamu dapat meningkatkan engagement, user experience, traffic website, conversion rate, dan tentunya sales revenue. Kabar baiknya, jika kamu menggunakan paket hosting murah dari Dewaweb, tidak perlu khawatir lagi karena teknologi Brotli sudah akan secara otomatis berjalan di server.

Jika ingin membaca lebih banyak artikel tentang LiteSpeed Cache, kamu bisa membaca artikel kami tentang apa itu LiteSpeed Cache Plugin. Bagi pengguna WordPress, kami juga sudah menyiapkan artikel tentang cara instalasi LiteSpeed Cache Plugin untuk WordPress dan konfigurasi LiteSpeed Cache Plugin untuk mengoptimasi website.  Selain Brotli, LiteSpeed juga mendukung beberapa teknologi lain seperti HTTP/2 dan Redis database object caching.

Semoga membantu!