Tingkatkan efisiensi kompresi dengan kamus bersama

Jeremy Wagner

Dipublikasikan: 6 Maret 2024

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

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

Namun, pekerjaan ini 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 untuk situs yang sering mengirimkan kode yang diperbarui, dan dalam beberapa kasus dapat memberikan rasio kompresi 90% atau lebih baik. Postingan ini membahas lebih detail cara kerja kamus bersama, dan cara mendaftar ke uji coba origin untuk menggunakannya untuk Brotli dan ZStandard di situs Anda. Anda juga dapat menonton video ini:

Penjelasan tentang kamus bersama

Kompresi adalah proses menemukan urutan berulang dalam input dan menggunakan informasi tersebut untuk membuat output yang jauh lebih kecil, yang dapat dibalik nanti. Kompresi berfungsi dengan baik di web karena mengurangi waktu pemuatan resource secara signifikan. 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 yang dikurasi pengguna kustom 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. Seberapa dapat diterapkan kamus tertentu ke 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 mirip.

Berikut contoh seberapa efektif 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 kompresi. Saat 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 versi Angular ini memiliki ukuran yang hampir 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 versi resource sebelumnya dapat digunakan untuk mengompresi versi yang lebih baru. Menggunakan contoh sebelumnya, jika Anda mengompresi Angular versi 1.8.3 menggunakan versi 1.7.9 sebagai kamus, outputnya akan sedikit lebih dari 4 KiB. Hal ini menunjukkan rasio kompresi hampir 98%. Jelas, kamus kompresi dapat berdampak besar pada performa pemuatan, dan efektivitasnya telah terwujud dalam aplikasi dunia nyata.

Namun, ada tantangan dalam membuat alur ini berfungsi di web. Masalahnya adalah, jika Anda 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 mengatasi masalah tersebut sekaligus memberikan manfaat besar 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 server web dikonfigurasi untuk mengenali token ini, dan mengenali kamus, server dapat merespons permintaan tersebut dengan resource yang dikompresi menggunakan kamus untuk encoding yang berlaku. Cara ini dicapai dalam praktiknya bergantung pada apakah permintaan ditujukan 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 caching dengan cara tertentu—terkadang dengan hash konten file dalam nama file (misalnya styles.abcd1234.css), atau metode sidik jari resource lainnya. Jenis resource ini adalah kandidat yang tepat untuk kompresi delta yang disediakan kamus bersama, karena resource statis sering di-cache dalam 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 ini menggunakan salah satu dari beberapa key-value pair, tetapi satu-satunya yang diperlukan adalah match, yang menerima URLPattern sintaksis 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 gaya dalam satu file CSS. Untuk mempermudah, anggap 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 berada 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 mengirimkan 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 harus mengonfigurasi kompresi di ujungnya 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 mendekompresinya.

Jika Anda sering mengirimkan kode baru untuk situs, kompresi delta dapat sangat membantu. Namun, prosesnya fleksibel. Jika browser 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 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 berita muncul, misalnya. Dokumen HTML sering kali merupakan resource dinamis. Dalam kasus seperti itu, 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 seperti itu adalah situs Anda menerima traffic yang cukup sehingga biaya kamus dapat diamortisasi dalam jumlah navigasi yang 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 Chrome menemukan elemen <link> ini, Chrome dapat mengambil kamus setelah halaman tidak ada aktivitas, dan dengan prioritas rendah dalam upaya 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, alurnya sebagian besar sama dengan 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 Anda memahami bundler, Anda mungkin memahami berbagai plugin untuk bundler yang dapat mengompresi resource pada waktu build, dan selanjutnya 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 yang dibantu kamus. Berikut beberapa bundler 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. Berusahalah untuk mencapai keseimbangan dan membuat resource yang menguntungkan jumlah maksimum pengguna yang kembali sebaik mungkin. Penyedia CDN saat ini sedang bereksperimen dengan kompresi kamus bersama. Tidak ada implementasi yang tersedia untuk penggunaan publik, tetapi kami berharap hal itu akan berubah.

Cobalah!

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

  1. Jika Anda hanya ingin bereksperimen dengan 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 manfaat kompresi kamus bersama bagi pengguna sebenarnya, daftar ke uji coba origin untuk 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. Kami mendorong Anda untuk mencobanya, dan yang terpenting, kami ingin mendengar pendapat Anda jika Anda melakukannya. Jika Anda menemukan bug, laporkan di crbug.com. Untuk resource dan alat tambahan, lihat use-as-dictionary.com. Terakhir, jika Anda tertarik untuk mempelajari lebih dalam cara kerjanya, penjelasan adalah langkah berikutnya yang baik.