Kompresi Brotli: Alternatif Cepat untuk Kompresi GZIP

Kecepatan penting untuk situs web apa pun. Dalam upaya web untuk mempercepat waktu pemuatan, kami memiliki sejumlah teknologi berbeda untuk membantu kami. Salah satu pendekatannya adalah meminimalkan kode dasar yang akan digunakan situs Anda tanpa memengaruhi cara kerjanya. Kompresi GZIP adalah salah satu cara untuk melakukan ini, tetapi kompresi Brotli adalah metode pemula alternatif yang menarik perhatian.

Ini adalah solusi yang dikembangkan Google yang tampaknya memberikan sejumlah manfaat dibandingkan (dan juga sebagai alternatif) kompresi GZIP. Detail dalam artikel ini akan membahas apa yang ditawarkan teknologi ini, tetapi kompresi Brotli cepat dan efisien — yang menandai semua kotak yang Anda perlukan untuk menyelidikinya.

Untuk tutorial ini, kita akan melihat kompresi Brotli dan menunjukkan cara memeriksa apakah situs Anda menggunakannya, dan cara mengaktifkannya jika perlu. Pertama, kita akan menempatkan Brotli di dalam ruang algoritma kompresi, dan berbicara tentang mengapa Anda ingin menggunakannya di atas solusi lain.

Kompresi Data untuk Web

Dalam bentuknya yang paling dasar, kompresi data mengambil kode untuk situs web atau aplikasi, dan meminimalkan ukuran file. Ini memberi Anda file yang lebih ringan untuk bergerak di web dan mengurangi waktu yang diperlukan untuk memuat dan merender situs web. Anda akan menemukan banyak cara untuk mengompresi data tergantung pada jenis file yang sedang Anda kerjakan.

Pendekatan yang umum adalah "minifikasi." Di sinilah algoritme menghapus kode situs Anda dari beberapa elemen yang berlebihan. Idenya adalah bahwa aspek-aspek seperti indentasi, komentar, spasi, dan lainnya akan meningkatkan ukuran file, dan oleh karena itu waktu pemuatan.

Menghapus elemen-elemen ini tidak memengaruhi pengalaman pengguna (UX) di sebagian besar situasi. Namun, itu membuat segalanya lebih mudah bagi komputer yang harus mengkompilasi dan merender kode. Misalnya, ambil rangkaian kode ini:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. */ require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Kode di atas menggunakan elemen seperti spasi dan carriage return agar dapat dibaca manusia, tetapi komputer tidak memerlukan ini untuk memahami kode inti. Terlebih lagi, kumpulan spasi putih dan jeda baris ini akan memakan ruang berharga yang, jika dihapus, dapat memberi Anda peningkatan kinerja.

Jika Anda meminimalkan kode ini, itu terlihat sangat berbeda:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. * / require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Namun, dasar dari apa yang dilakukan kode ini masih sama.

Anda akan menemukan bahwa jenis file lain memiliki cara untuk mengompresi data. Misalnya, gambar sering kali membutuhkan banyak kompresi untuk diperkecil ukurannya tanpa banyak degradasi gambar itu sendiri:

Kompresi GZIP adalah cara standar untuk meminimalkan ukuran kumpulan file — pikirkan paket seperti kumpulan ZIP atau Linux .tar . Tapi sampai sekarang tidak ada alternatif nyata. Kami akan berbicara lebih banyak tentang mengapa alternatif harus ada nanti, tetapi pertama-tama mari kita kenalkan Anda dengan "pesaing" GZIP.

Kompresi Brotli

Singkatnya, Broti adalah algoritma kompresi data. Namun, jika hanya ini yang harus kami katakan, tidak ada alasan untuk menyelidikinya.

Ini memberikan kompresi "lossless" dan dikembangkan oleh Google di bawah lisensi MIT. Perusahaan sering menjadi yang terdepan dalam teknologi pengembangan web, jadi tidak mengherankan jika Brotli berupaya mengambil apa yang dilakukan GZIP, meningkatkannya, dan menawarkan pengalaman yang ditingkatkan kepada pengguna dan situs.

Kompresi Brotli menggunakan teknologi core base yang sama dengan kompresi GZIP, yaitu:

• Algoritma LZ77
• Encoding dan decoding Huffman

Faktanya, jika Anda menggabungkan kedua teknologi ini, Anda mendapatkan format DEFLATE yang berfungsi sebagai dasar untuk kompresi GZIP dan Brotli. Ini adalah sesuatu yang kami bahas dengan sangat mendalam di pos kami tentang kompresi GZIP.

Singkatnya, file yang tidak dikompresi dijalankan melalui algoritma LZ77 dan Huffman sebagai bagian dari proses DEFLATE untuk mengompresnya ke dalam format Brotli. Dari sana, proses INFLATE akan mendekompresi file lagi bila perlu.

Meskipun Brotli saat ini merupakan pesaing utama GZIP, ada teknologi serupa lainnya di luar sana yang juga menggunakan DEFLATE . Di bagian selanjutnya, kita akan membicarakan apa yang membuat Brotli menonjol.

Kompresi Brotli vs Kompresi GZIP

Seperti disebutkan, baik Brotli dan GZIP menggunakan metode DEFLATE untuk mengompresi (dan mendekompresi) data. Ini dapat membingungkan banyak orang, karena ini saja tidak menjamin peralihan.

Namun, Google sedang membangun di atas DEFLATE untuk menawarkan teknik yang disempurnakan dan mengompresi data ke standar yang lebih besar dan lebih cepat.

Bagaimana Brotli Menggunakan Kamus untuk Meningkatkan Kompresi Data

Salah satu aspek teknis format kompresi data adalah cara kompresi Brotli menggunakan bahasa dan teks yang dikenal yang ada dalam kamus data untuk menggunakan algoritmenya.

Pengembang akan menggunakan kamus pasangan nilai kunci untuk menyimpan data, karena efisien, fleksibel, dan skalabel. Berikut tampilan kamus PHP (disebut "array"):

 $cats = get_categories( array( 'taxonomy' => 'link_category', 'hierarchical' => 0, 'include' => $link_cat, ) );

Sementara GZIP tidak menggunakan kamus, Brotli menggunakan dua .

Kamus Statis Brotli

Yang pertama adalah kamus statis (yaitu yang telah ditentukan sebelumnya) dari istilah kode umum yang bertindak sebagai referensi untuk teks HTML, CSS, dan JavaScript.

Ada lebih dari 13.000 kata dalam enam bahasa yang berbeda, dan Brotli akan menggunakan ini sebagai referensi ke poin dalam kode. Ini bukan analogi yang tepat, tetapi mirip dengan cara pengait WordPress mereferensikan rangkaian kode yang lebih besar.

Dengan demikian, pembuat enkode tidak harus menyaring kode byte demi byte. Sebagai gantinya, ia dapat bertindak berdasarkan referensi, menarik definisi dari kamus, dan melanjutkan ke yang berikutnya.

Anda juga akan menemukan ada frase dunia nyata dalam kamus serta kode yang tidak akan sering melihat kompresi. Ini membantu beberapa tag seperti <HTML> dan parameter seperti type="text/javascript" mengambil beberapa kompresi dan memberi Anda beberapa keuntungan yang lebih besar.

Ada juga beberapa "transformasi" dalam kamus: sebagian, tidak lengkap, dan jenis frasa lain yang dengan awalan, akhiran, atau huruf besar-kecil menjadi kata yang sama sekali baru — misalnya, "Kerja" berubah menjadi "Bekerja" atau "html ” menjadi “HTML.”

Kamus Dinamis Brotli

Kamus dinamis mem-parsing konten dan kode pada sumbernya, yang bagus untuk perangkat yang lebih kecil, tetapi tidak begitu bagus untuk file yang lebih besar. Ini juga disebut "jendela geser" dan dapat berukuran hingga 16 MB. Di sinilah algoritma kompresi 'cache' beberapa data terbaru untuk referensi itu. Ini sangat dinamis karena terus berubah.

Jika Anda membandingkan ini dengan jendela geser GZIP yang berukuran sekitar 32 KB, Anda akan melihat bahwa cakupan untuk penguraian dan kompresi waktu-nyata sangat besar. Faktanya, praktik paling umum menggunakan jendela geser Brotli sekitar 4 MB, yang masih sangat besar dibandingkan dengan algoritma yang bersaing.

Kompresi Brotli vs Kompresi GZIP: Performa dan Dukungan

Dalam hal nomor pengguna murni, kompresi GZIP masih nomor satu. Namun, kompresi Brotli lebih banyak digunakan setiap hari. Ini sebagian karena langkah-langkah adopsi yang lebih luas oleh browser utama; munculnya browser berbasis Chromium juga membantu.

Situs web Can I Use… mencatat teknologi apa yang diadopsi oleh browser, dan menyediakan semacam riwayat. Situs ini mencatat bahwa lebih dari 95% browser menggunakan kompresi Brotli pada penulisan saat ini, termasuk semua versi utama.

Dalam artikel kompresi GZIP kami, kami mencatat tes benchmark di mana Brotli memiliki rasio kompresi yang lebih baik dibandingkan dengan algoritme pesaing, tetapi tertinggal dalam waktu kompresi dan dekompresi:

Namun, tes Squash Benchmark menunjukkan cerita yang berbeda — yang lebih bernuansa. Kesimpulan sebenarnya adalah bahwa secara keseluruhan, Brotli lebih fleksibel daripada GZIP, dengan rasio kompresi yang umumnya lebih tinggi.

Berikut ringkasan temuan Squash Benchmarks:

• Brotli memiliki rasio kompresi yang lebih baik (yaitu menghasilkan file terkompresi yang lebih kecil) di setiap tingkat kompresi.
• Sementara GZIP mengalahkan Brotli pada kecepatan sebagian besar waktu, tingkat yang Anda kompres pada faktor-faktor ke dalam hasil yang akan Anda lihat.

Rincian Paul Calvano memberikan rincian lebih lanjut, tetapi intinya adalah bahwa Brotli membutuhkan lebih banyak daya CPU untuk memberikan faktor kompresi file yang lebih besar. Ini menunjukkan pada tingkat kompresi tertinggi dan terendah. Pembandingan Cloudflare mendukung ini: file yang jauh lebih kecil, dengan angka kecepatan kompresi komparatif yang lebih dekat.

Juga, pertimbangkan bahwa beberapa alat pengujian seperti Pingdom dan beberapa jaringan pengiriman konten (CDN) belum mendukung Brotli. Ini dapat mengubah data yang dikumpulkan orang lain tentang bagaimana Brotli beroperasi. Anda dapat melihat "negatif palsu" jika Anda menjalankan tes: angka kecepatan halaman yang lebih tinggi yang mengabaikan kompresi file yang Anda gunakan.

Manfaat Kompresi Brotli

Ada banyak informasi yang dapat diambil tentang kompresi Brotli sejauh ini. Namun, kami dapat merangkum apa yang perlu Anda ketahui tentang mengapa Anda harus memilih Brotli daripada GZIP:

1. Dibutuhkan teknologi yang sama seperti yang digunakan GZIP dan menyempurnakannya dengan metode modern.
2. Parsing berbasis kamus Brotli berarti dapat memampatkan lebih banyak file Anda ke tingkat yang lebih dalam.
3. Sementara Brotli membutuhkan lebih banyak daya komputasi dibandingkan dengan GZIP, hasilnya berarti file yang lebih kecil.
4. Pada tingkat kompresi yang digunakan sebagian besar host web — sesuatu yang menengah seperti level empat atau lima — Brotli berperforma lebih baik daripada GZIP tanpa berkeringat.
5. Anda akan menemukan bahwa Brotli memiliki dukungan hampir universal di seluruh browser, jika bukan beberapa alat benchmark yang biasa Anda gunakan.
6. Brotli gratis untuk digunakan dan open source. Ini adalah keuntungan jika Anda menggunakan CDN yang kompatibel dengan Broti, seperti Cloudflare.

Perlu dicatat bahwa Cloudflare menggunakan kompresi Brotli di semua servernya. Faktanya, ia menggunakan versi Brotli yang dimodifikasi dan dioptimalkan untuk memberi Anda keuntungan lebih lanjut terkait kecepatan dan pengiriman file.

Karena Kinsta menawarkan integrasi Cloudflare pada semua paket, setiap situs yang dihosting menggunakan Brotli secara default. Ini hanyalah salah satu alasan mengapa Kinsta adalah salah satu penyedia hosting terbaik dan terdepan di pasar.

Cara Memeriksa Apakah Situs Anda Menggunakan Kompresi Brotli

Karena kompresi Brotli belum standar (walaupun hampir sampai), Anda mungkin ingin tahu apakah situs Anda menggunakannya. Ada beberapa cara untuk mengetahui hal ini.

1. Gunakan Alat Online

Cara termudah untuk memeriksa apakah situs Anda menggunakan kompresi Brotli adalah melalui alat online. Meskipun ada beberapa untuk dipilih, Anda akan menginginkan sesuatu yang cepat dan mudah digunakan yang juga akan memberi Anda banyak informasi tentang pengaturan Anda.

Gift of Speed ​​adalah pilihan kami untuk memeriksa kompresi Brotli.

Ini akan menentukan apakah situs Anda menggunakan GZIP, Brotli, atau tanpa kompresi sama sekali, dan memberikan beberapa metrik lain untuk membantu Anda memutuskan apa yang harus dilakukan selanjutnya. Metrik ini menawarkan wawasan penting, karena Anda tidak hanya ingin mempertimbangkan apakah server situs Anda menggunakan "rasa" kompresi yang tepat.

Ada banyak elemen yang membentuk sebuah situs web, dan bahkan perpustakaan dan dependensi pihak ketiga. Anda dapat memilih untuk menyajikannya menggunakan CDN, dan jika demikian, ini perlu menggunakan kompresi Brotli juga untuk kinerja terbaik.

Jika Anda menggunakan Gift Of Speed ​​untuk menguji aset individual, Anda dapat melihat nilai Server untuk melihat cara penyajiannya.

Semua situs Kinsta menggunakan Kinsta CDN yang didukung Cloudflare. Dengan demikian, setiap situs juga akan menggunakan kompresi Brotli di seluruh rantai dan arsitektur server.

2. Periksa Menggunakan Alat Pengembang Peramban Anda

Sebagian besar pengembang akan tahu bahwa peramban menawarkan beberapa alat luar biasa untuk membantu Anda dengan semua jenis penyelidikan dan pemecahan masalah terkait web. Satu pemeriksaan cepat yang dapat Anda lakukan adalah apakah situs Anda (atau aset tertentu) menggunakan kompresi Brotli.

Untuk semua browser utama seperti Brave, Edge, Firefox, atau Chrome, Anda dapat menuju ke layar Network > All .

Pada awalnya, Anda tidak akan melihat apa pun yang berkaitan dengan header konten — Anda harus memilih aset atau permintaan dari sisi kiri. Jika Anda terus mencari dan menggulir daftar ke bawah, Anda akan melihat panel terbuka yang defaultnya adalah informasi Header .

Di sini, gulir ke bawah output hingga Anda melihat content-encoding: br :

Singkatnya: Jika Anda melihat content-encoding: br , ini memberi tahu Anda bahwa Brotli aktif untuk situs itu.

Cara Mengaktifkan Kompresi Brotli untuk Situs Anda

Dalam beberapa bagian terakhir ini, kami akan menunjukkan kepada Anda sejumlah cara berbeda untuk mengaktifkan kompresi Brotli untuk situs Anda. Yang pertama adalah pendekatan yang kami rekomendasikan untuk sebagian besar situs WordPress yang tidak menggunakan Kinsta — dan yang terakhir adalah yang kami rekomendasikan untuk setiap situs yang membaca pendekatan pertama!

1. Gunakan Plugin WordPress

Hampir setiap situs WordPress akan menggunakan setidaknya satu plugin — seringkali lebih tergantung pada fungsionalitas yang dibutuhkan situs. Caching adalah salah satu kasus penggunaan untuk plugin, dan ada banyak hal di sekitarnya. Namun, tidak semua akan memungkinkan Anda mengaktifkan kompresi Brotli, jadi Anda harus memilih dengan bijak dan bersiap untuk mengganti solusi pilihan Anda.

Sebelum Anda melakukan perubahan apa pun pada situs, ingatlah untuk membuat cadangan lengkap jika Anda perlu memulihkannya nanti. Untuk metode ini, kami akan menggunakan W3 Total Cache karena sangat mudah untuk menemukan pengaturan yang tepat.

Anda harus menuju ke halaman Performance > Browser Cache di WordPress:

Layar ini menunjukkan dua pengaturan. Yang ingin Anda pilih adalah Enable HTTP (brotli) Compression :

Namun, ini tidak akan cocok untuk setiap situs dan situasi. Misalnya, Kinsta mengoptimalkan servernya untuk hosting yang cepat, berkinerja tinggi, dan andal. Dengan demikian, ada sejumlah plugin yang tidak Anda perlukan, dan beberapa lainnya bahkan dilarang digunakan di situs Kinsta.

Dalam kasus ini, Anda akan ingin mengambil pendekatan lain.

2. Aktifkan Brotli di Server

Ketika datang untuk memilih jenis server, Nginx vs Apache adalah pertempuran lama yang (untuk saat ini) menang. Apapun, kedua jenis server dapat mengaktifkan kompresi Brotli, dan ada pendekatan yang berbeda untuk masing-masing.

Sebelum Anda melihat ke dalam pendekatan manual, ada beberapa prasyarat yang harus Anda ketahui:

• Anda akan ingin memahami cara mengakses file konfigurasi untuk server spesifik Anda.
• Pengetahuan baris perintah akan bermanfaat, terutama jika menyangkut server Apache. Untuk menjalankan perintah apa pun, Anda harus menjadi pengguna root dengan hak istimewa sudo .
• Anda mungkin memerlukan editor teks, tetapi untuk perubahan cepat seperti ini, Anda akan baik-baik saja.
• Dalam beberapa kasus, Anda memerlukan kredensial login Anda sebagai pengguna shell aman (SSH) di server itu sendiri. Anda dapat menemukannya di dalam panel kontrol hosting Anda, atau hubungi dukungan untuk bertanya.

Jika Anda ragu tentang pendekatan manual, kami sarankan Anda mencari opsi lain, atau hubungi tuan rumah Anda untuk mendapatkan bantuan. Terlepas dari itu, kami akan memberikan gambaran singkat tentang proses untuk setiap server secara bergantian, dimulai dengan Nginx.

Nginx

Untuk mengaktifkan kompresi Brotli di server Nginx, Anda harus menemukan file nginx.conf . Ini akan menjadi salah satu dari beberapa lokasi:

• /usr/local/nginx/conf
• /etc/nginx
• /usr/local/etc/nginx

Saat Anda membuka file, tambahkan yang berikut ini ke bawah:

 brotli on; brotli_static on; brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance. brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

Suite ini akan mengaktifkan Brotli dan menggunakannya untuk menyajikan file statis. Pengaturan brotli_comp_level adalah yang dapat Anda ubah tergantung pada kasus penggunaan dan kebutuhan Anda. Angka yang lebih tinggi menawarkan kompresi yang lebih baik seimbang dengan situs yang kurang berkinerja.

apache

Karena Apache fleksibel dalam hal konfigurasi, Anda dapat mengaktifkan kompresi Brotli tanpa terlalu banyak masalah.

Untuk melakukannya, ikuti langkah-langkah berikut:

1. Masuk ke server Anda menggunakan aplikasi Command Prompt atau Terminal, sebagai pengguna root sudo .
2. Jalankan perintah a2enmod brotli untuk mengaktifkan kompresi.
3. Dalam Apache VirtualHost atau konfigurasi server Anda, tambahkan baris AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript untuk mengatur jenis file yang tepat yang ingin Anda kompres.

Meskipun Apache tidak mendukung kompresi statis, Anda dapat mengubah tingkat kompresi Brotli yang Anda tawarkan menggunakan baris BrotliCompressionQuality LEVEL-NUMBER . Namun, Anda harus mengganti placeholder “LEVEL-NUMBER” dengan angka antara 1–11.

3. Gunakan Host Web Pendukung

Cara paling mudah untuk mengaktifkan kompresi Brotli untuk situs Anda adalah memastikan host Anda melakukan ini secara default. Kinsta menawarkan kompresi Brotli sebagai standar berkat integrasinya dengan CDN Cloudflare.

Kinsta CDN didukung oleh infrastruktur Cloudflare di semua paket — jadi setiap situs menggunakan kompresi Brotli tanpa Anda perlu mengaktifkannya.

Anda akan ingin memeriksa apakah host pilihan Anda menawarkan kompresi Brotli, dan ke tingkat apa Anda perlu mengkonfigurasinya. Untuk menjalankan situs yang paling berkinerja, stabil, dan aman, hosting yang baik sangat penting.

Ringkasan

Kompresi data adalah komponen penting dalam mengembangkan dan menggunakan web modern. Ukuran file dapat meroket karena jenis file yang kaya dan kompleks yang akan Anda gunakan untuk menyusun situs web. Semuanya membutuhkan beberapa bentuk kompresi.

Pendekatan tipikal adalah GZIP sampai sekarang, tetapi ada anak baru di blok itu.

Kompresi Brotli mendasarkan teknologinya pada fondasi yang sama dengan GZIP, tetapi mencakup beberapa manfaat peningkatan kinerja. Seperti yang telah kita diskusikan, ia menggunakan pemetaan konteks untuk memproses permintaan kompresi lebih cepat, dan kamus yang menggunakan populasi dinamis. Ini jauh lebih besar daripada yang dapat ditawarkan GZIP, dan juga memungkinkan pengguna seluler mendapat manfaat dari kompresi juga.

Kabar baiknya adalah bahwa setiap situs Kinsta dapat mengambil manfaat dari kompresi Brotli karena integrasi Cloudflare kami yang unik. Ini berarti situs yang dihosting Kinsta Anda lebih cepat daripada kompetisi menggunakan GZIP dan memuat dengan cepat untuk mereka yang menggunakan perangkat yang lebih kecil.

Apakah Anda memiliki pertanyaan tentang kompresi Brotli? Jangan ragu untuk bertanya di bagian komentar di bawah!