Tingkatkan efisiensi kompresi dengan kamus bersama

Jeremy Wagner

Kompresi data adalah teknik pengoptimalan performa yang telah teruji dan mengurangi ukuran resource halaman yang memenuhi syarat. Selama beberapa waktu, praktik umum adalah menggunakan gzip di server web untuk mengompresi resource halaman berbasis teks umum seperti file HTML, CSS, dan JavaScript, lalu mengirimkannya ke klien tempat file tersebut dapat didekompresi. Hasilnya adalah waktu pemuatan yang lebih cepat untuk resource tanpa memengaruhi perilaku halaman yang diinginkan.

Meskipun gzip sangat efektif, peningkatan lebih lanjut dalam kompresi di web telah diwujudkan dalam beberapa tahun terakhir. Pada tahun 2016, algoritma Brotli dikirimkan di Chrome, yang memberikan rasio kompresi yang lebih baik secara keseluruhan untuk resource yang memenuhi syarat. Pada akhir tahun 2017, semua browser modern mendukung Brotli, dan dukungan server untuk Brotli mulai lebih luas. Baru-baru ini, Chrome telah mengirimkan kompresi ZStandard.

Namun, pekerjaan tidak berhenti di situ. Tim Chrome telah berupaya membuat kamus bersama dapat digunakan di web, yang kini tersedia dalam uji coba origin untuk Brotli dan ZStandard. Kamus bersama dapat melengkapi kompresi Brotli dan ZStandard untuk memberikan rasio kompresi yang jauh lebih tinggi bagi situs yang sering mengirimkan kode yang diperbarui, dan dalam beberapa kasus dapat memberikan rasio kompresi 90% atau lebih baik. Postingan ini membahas lebih lanjut cara kerja kamus bersama, dan cara mendaftar ke uji coba origin untuk menggunakannya untuk Brotli dan ZStandard di situs Anda.

Penjelasan kamus bersama

Kompresi adalah proses menemukan urutan yang redundan dalam input dan menggunakan informasi tersebut untuk membuat output yang jauh lebih kecil, yang dapat dibalik nanti. Kompresi berfungsi dengan baik di web karena secara substansial mengurangi waktu pemuatan resource. Brotli dan ZStandard dapat lebih meningkatkan efektivitasnya dengan menggunakan kamus kompresi, yang merupakan kumpulan pola tambahan yang dapat digunakan algoritma ini selama kompresi. Faktanya, efisiensi tinggi Brotli dicapai sampai batas tertentu dengan menggunakan kamus internal.

Namun, kamus kustom yang dipilih pengguna dapat digunakan dengan Brotli dan ZStandard yang berisi pola khusus untuk resource tertentu. Dalam praktiknya, kamus kustom adalah file eksternal yang dapat diterapkan ke input apa pun. Kamus dapat sangat spesifik untuk kode produksi aplikasi, atau konten apa pun. Tingkat penerapan kamus tertentu terhadap inputnya dapat berdampak besar pada efisiensi kompresi secara keseluruhan. Kamus yang sangat mirip dengan konten input akan menghasilkan output dengan rasio kompresi yang lebih tinggi daripada kamus dengan konten generik atau tidak serupa.

Berikut adalah contoh efektivitas kamus kompresi kustom: misalnya situs Anda menggunakan framework Angular, dan versi saat ini yang Anda gunakan adalah versi 1.7.9. Versi framework Angular ini berukuran sekitar 172 KiB tanpa dikompresi. Jika dikompresi dengan setelan default Brotli, ukurannya menjadi sekitar 53 KiB. Hal ini menghasilkan rasio kompresi hampir 70%. Namun, misalnya Anda memutuskan untuk mengupgrade ke Angular 1.8.3 nanti. Mengingat bahwa versi Angular ini kira-kira berukuran sama dengan versi 1.7.9, Anda dapat mengharapkan rasio kompresi yang hampir sama dengan versi sebelumnya.

Di sinilah kamus kustom dapat berguna dengan menggunakan proses yang dikenal sebagai kompresi delta , yaitu saat kamus resource versi sebelumnya dapat digunakan untuk mengompresi versi yang lebih baru. Dengan menggunakan contoh sebelumnya, jika Anda mengompresi Angular versi 1.8.3 menggunakan versi 1.7.9 sebagai kamus, output-nya akan sedikit lebih dari 4 KiB. Ini menunjukkan rasio kompresi hampir 98%. Jelas, kamus kompresi dapat berdampak besar pada performa pemuatan, dan efektivitasnya telah diwujudkan dalam aplikasi di dunia nyata.

Namun, ada tantangan dalam membuat alur ini berfungsi di web. Namun, jika menggunakan kamus untuk mengompresi resource, Anda memerlukan kamus yang sama untuk mendekompresi resource tersebut. Alur ini telah dicoba di web sebelumnya—yaitu SDCH—tetapi sulit diterapkan dengan aman. Proposal terbaru untuk kompresi kamus bersama ini menangani masalah tersebut sekaligus memberikan manfaat yang signifikan untuk resource statis dan dinamis.

Cara Chrome mengiklankan dukungan untuk kamus bersama

Semua browser mengiklankan algoritma kompresi yang didukungnya melalui header permintaan Accept-Encoding. Konten header adalah daftar encoding yang didukung yang dipisahkan koma:

Accept-Encoding: gzip, br, zstd

Header Accept-Encoding khusus ini menyatakan bahwa browser yang meminta resource mendukung algoritma kompresi gzip, Brotli, dan ZStandard. Server web yang merespons permintaan kemudian dapat memutuskan algoritma mana yang akan digunakan saat merespons permintaan.

Jika dukungan kamus bersama diaktifkan dan kamus yang relevan tersedia untuk resource, token tambahan akan ditambahkan ke header Accept-Encoding. Token ini adalah br-d untuk Brotli dan zstd-d untuk Zstandard. Chrome juga akan menyertakan hash kamus yang tersedia, yang akan dibahas berikutnya.

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

Jika dikonfigurasi untuk mengenali token ini, dan mengenali kamus, server web dapat merespons permintaan tersebut dengan resource yang dikompresi menggunakan kamus untuk encoding yang berlaku. Cara melakukannya dalam praktik bergantung pada apakah permintaan tersebut untuk resource statis atau dinamis.

Kompresi kamus bersama untuk resource statis

Resource halaman statis adalah resource yang selalu menghasilkan respons yang sama untuk URL yang diminta. Contoh umum resource halaman statis yang dapat dikompresi adalah file JavaScript dan CSS. Resource ini biasanya diberi versi untuk tujuan penyimpanan dalam cache dengan cara tertentu—terkadang dengan hash konten file dalam nama file (misalnya styles.abcd1234.css), atau beberapa metode lain untuk membuat sidik jari resource. Jenis resource ini adalah kandidat yang bagus untuk kompresi delta yang disediakan kamus bersama, karena resource statis sering di-cache untuk jangka waktu yang lama dan cenderung diperbarui dengan frekuensi tertentu.

Kamus dapat ditentukan untuk resource statis dengan menetapkan header respons Use-As-Dictionary untuknya. Header menggunakan salah satu dari beberapa pasangan kunci/nilai, tetapi satu-satunya yang diperlukan adalah match, yang menerima sintaksis URLPattern yang menentukan jalur resource tempat kamus harus digunakan:

Use-As-Dictionary: match="/dist/styles.*.css"

Anggap header Use-As-Dictionary sebagai mekanisme yang berlaku untuk versi resource mendatang yang cocok dengan pola yang ditentukan di dalamnya. Jadi, misalnya situs Anda mengirimkan semua gayanya dalam satu file CSS. Untuk mempermudah, misalkan versi pertama resource tersebut berada di /dist/styles.v1.css, dan dikirim dengan header respons Use-As-Dictionary yang berisi nilai match dari /dist/styles.*.css.

Setelah beberapa waktu berlalu, Anda memperbarui CSS situs dan mengirimkan versi barunya yang terletak di /dist/styles.v2.css. Karena nilai match yang digunakan di header respons Use-As-Dictionary dari versi sebelumnya berlaku untuk permintaan ini, browser akan mengirim header Available-Dictionary yang berisi hash kamus yang dienkode sebagai urutan byte kolom terstruktur:

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

Pada tahap ini, server dapat mengonfigurasi kompresi di sisinya untuk memastikan kamus yang cocok digunakan. Resource yang dikompresi dengan kamus tersebut kemudian akan dikirim, dan kamus yang tersedia di cache browser pengguna akan digunakan untuk mendekompresi resource tersebut.

Jika Anda sering mengirimkan kode baru untuk situs, kompresi delta dapat sangat membantu. Namun, prosesnya fleksibel. Jika tidak menentukan bahwa kamus tersedia di cache browser pengguna, browser tidak akan menentukan token br-d atau zstd-d tambahan di header Accept-Encoding. Dalam hal ini, alur kompresi standar akan berlaku.

Kompresi kamus bersama untuk resource dinamis

Resource dinamis juga dapat memanfaatkan kompresi kamus bersama. Resource dinamis adalah resource yang berubah berdasarkan konteks—seperti situs berita yang halaman utamanya sering diperbarui saat ada berita terbaru. Dokumen HTML sering kali merupakan resource dinamis. Dalam kasus tersebut, kamus dapat berisi sebagian besar struktur HTML dan kode template umum situs yang mengarah ke halaman yang dikompresi, tempat hanya bagian unik dari setiap halaman yang dikirim.

Karena sifat resource yang dibuat secara dinamis, kamus harus dimuat di klien untuk digunakan nanti. Memuat kamus terlebih dahulu berarti menerapkan kompresi kamus bersama ke resource dinamis bersifat spekulatif. Harapannya dalam kasus tersebut adalah situs Anda menerima traffic yang cukup sehingga biaya kamus dapat diamortisasi melalui navigasi dalam jumlah besar. Jika Anda memutuskan untuk mencobanya, langkah pertama adalah menentukan lokasi kamus melalui elemen <link> di HTML halaman Anda:

<link rel="dictionary" href="/dictionary.dat">

Saat menemukan elemen <link> ini, Chrome dapat mengambil kamus setelah halaman tidak ada aktivitas, dan dengan prioritas rendah untuk menghindari pertentangan bandwidth. Respons untuk kamus itu sendiri harus menentukan header Use-As-Dictionary dan menentukan jalur resource dinamis yang berlaku:

Use-As-Dictionary: match="/product/*"

Dari sini, alur sebagian besar sama dengan untuk resource statis. Browser akan melihat bahwa kamus itu sendiri berlaku untuk resource yang cocok, dan browser akan melampirkan header Available-Dictionary ke permintaan dengan hash konten kamus, sekali lagi, mirip dengan alur resource statis yang dijelaskan sebelumnya.

Mengompresi resource statis pada waktu build

Jika sudah memahami bundler, Anda mungkin sudah memahami berbagai plugin untuk bundler yang dapat mengompresi resource pada waktu build, lalu menayangkan resource yang dikompresi tersebut. Misalnya, Apache memungkinkan Anda menggunakan perintah untuk menayangkan resource yang telah dikompresi sebelumnya pada saat permintaan.

Sebagian besar bundler berbasis Node.js yang mendukung kompresi menggunakan library Zlib bawaan Node. Zlib menawarkan dukungan untuk Brotli dan bundler yang menggunakannya biasanya menawarkan antarmuka untuk meneruskan opsi langsung ke Zlib, yang mendukung kompresi dengan bantuan kamus. Berikut beberapa alat pembuat paket yang mendukung penggunaan kamus:

Perhatikan bahwa kamus yang tersedia untuk versi resource tertentu dapat menggunakan salah satu versi resource sebelumnya. Artinya, Anda harus menganalisis traffic pengguna dan membuat rencana yang sesuai. Usahakan untuk menyeimbangkan dan membuat konten yang bermanfaat bagi jumlah maksimum pengguna yang kembali sebaik mungkin. Penyedia CDN saat ini bereksperimen dengan kompresi kamus bersama. Belum ada implementasi yang tersedia untuk penggunaan publik, tetapi kami berharap hal itu akan berubah.

Cobalah!

Mengintegrasikan kompresi kamus bersama dengan kemampuan kompresi yang ada di browser berpotensi meningkatkan performa pemuatan secara substansial untuk situs yang sering mengirimkan kode produksi yang diperbarui dan menerima traffic yang signifikan dari pengunjung yang kembali. Jika tertarik untuk mencoba kompresi kamus bersama, Anda memiliki dua opsi:

  1. Jika hanya ingin mencoba kompresi kamus bersama sendiri untuk merasakan cara kerjanya, Anda dapat mengaktifkan fitur eksperimental Transpor kamus kompresi di halaman chrome://flags.
  2. Jika Anda tertarik untuk mencobanya di situs produksi dan melihat bagaimana kompresi kamus bersama dapat bermanfaat bagi pengguna sebenarnya, daftar untuk uji coba origin guna mendapatkan token, dan baca cara kerja uji coba origin.

Kesimpulan

Kami sangat antusias dengan kemajuan besar dalam teknologi kompresi di web ini, dan seberapa cepat teknologi ini dapat membuat aplikasi yang ada dan digunakan orang setiap hari. Sebaiknya coba, dan yang terpenting, kami ingin mendengar pendapat Anda jika Anda melakukannya. Jika Anda menemukan bug, laporkan di crbug.com. Untuk referensi dan alat tambahan, lihat use-as-dictionary.com. Terakhir, jika Anda tertarik untuk mempelajari lebih lanjut cara kerjanya, penjelasan adalah langkah berikutnya yang tepat.