Paylaşılan sözlüklerle sıkıştırma verimliliğini artırın

Jeremy Wagner

Yayınlanma tarihi: 6 Mart 2024

Veri sıkıştırma, uygun sayfa kaynaklarının boyutunu küçülten, uzun süredir kullanılan bir performans optimizasyonu tekniğidir. Bir süredir, HTML, CSS ve JavaScript dosyaları gibi yaygın metin tabanlı sayfa kaynaklarını sıkıştırmak ve bunları istemciye göndermek için web sunucularında öncelikle gzip kullanmak yaygın bir uygulamaydı. İstemcide bu dosyalar sıkıştırılmış hâlden çıkarılabiliyordu. Sonuç olarak, kaynaklar daha hızlı yüklenir ve sayfanın amaçlanan davranışı etkilenmez.

Gzip kendi başına oldukça etkili olsa da web'deki sıkıştırma konusunda son yıllarda daha da iyi sonuçlar elde edildi. 2016'da Chrome'da Brotli algoritması kullanıma sunuldu ve uygun kaynaklar için genel olarak daha iyi sıkıştırma oranları sağlandı. 2017'nin sonunda tüm modern tarayıcılar Brotli'yi desteklemeye başladı ve sunucu desteği daha yaygın hale geldi. Daha yakın bir zamanda Chrome'da ZStandard sıkıştırma özelliği kullanıma sunuldu.

Ancak işiniz burada bitmiyor. Chrome Ekibi, paylaşılan sözlüklerin web'de kullanılabilir hale getirilmesi için çalışmaktadır. Bu sözlükler artık hem Brotli hem de ZStandard için kaynak denemesinde kullanılabilir. Paylaşılan sözlükler, sık sık güncellenmiş kod gönderen web siteleri için önemli ölçüde daha yüksek sıkıştırma oranları sağlamak üzere Brotli ve ZStandard sıkıştırmasını tamamlayabilir ve bazı durumlarda % 90 veya daha iyi sıkıştırma oranları sağlayabilir. Bu yayında, paylaşılan sözlüklerin nasıl çalıştığı ve web sitenizde Brotli ve ZStandard için kullanmak üzere nasıl kaynak denemelerine kaydolabileceğiniz hakkında daha ayrıntılı bilgi verilmektedir. Şu videoya da göz atabilirsiniz:

Paylaşılan sözlükler hakkında

Sıkıştırma, bir girişteki gereksiz dizileri bulma ve bu bilgileri kullanarak daha sonra tersine çevrilebilecek çok daha küçük bir çıkış oluşturma işlemidir. Sıkıştırma, kaynak yükleme sürelerini önemli ölçüde kısalttığı için web'de iyi sonuç verir. Hem Brotli hem de ZStandard, sıkıştırma sırasında bu algoritmaların kullanabileceği ek kalıplar koleksiyonu olan bir sıkıştırma sözlüğü kullanarak etkinliklerini daha da artırabilir. Brotli'nin yüksek verimliliği, dahili bir sözlük kullanılarak bir dereceye kadar sağlanır.

Ancak, belirli kaynaklara özgü kalıplar içeren özel kullanıcı tarafından derlenen sözlükler Brotli ve ZStandard ile kullanılabilir. Özel sözlük, pratikte herhangi bir girişe uygulanabilen harici bir dosyadır. Sözlükler, bir uygulamanın üretim kodu veya herhangi bir içerik için çok spesifik olabilir. Belirli bir sözlüğün girişine ne kadar uygun olduğu, genel sıkıştırma verimliliği üzerinde büyük bir etkiye sahip olabilir. Girişin içeriğine çok benzeyen sözlükler, genel veya farklı içeriklere sahip sözlüklere kıyasla daha yüksek sıkıştırma oranlarına sahip çıkışlar üretir.

Özel sıkıştırma sözlüğünün ne kadar etkili olabileceğine dair bir örnek: Web sitenizin Angular çerçevesini kullandığını ve kullandığınız mevcut sürümün 1.7.9 olduğunu varsayalım. Angular çerçevesinin bu sürümü yaklaşık 172 KiB sıkıştırılmamış boyuttadır. Brotli'nin varsayılan ayarlarıyla sıkıştırıldığında boyutu yaklaşık 53 KiB olur. Bu, yaklaşık% 70 sıkıştırma oranı sağlar. Ancak daha sonra Angular 1.8.3'e yükseltmeye karar verdiğinizi varsayalım. Angular'ın bu sürümü yaklaşık olarak 1.7.9 sürümüyle aynı boyutta olduğundan önceki sürümle hemen hemen aynı sıkıştırma oranını bekleyebilirsiniz.

Bu durumda , bir kaynağın önceki sürümünün sözlüğünün daha sonraki bir sürümü sıkıştırmak için kullanılabildiği delta sıkıştırma olarak bilinen bir işlem kullanılarak özel sözlükten yararlanılabilir. Önceki örneği kullanarak, Angular'ın 1.8.3 sürümünü sözlük olarak 1.7.9 sürümünü kullanarak sıkıştırdığınızda çıkış 4 KiB'ın biraz üzerinde olur. Bu, yaklaşık%98 sıkıştırma oranını gösterir. Açıkça görülüyor ki sıkıştırma sözlükleri yükleme performansı üzerinde büyük bir etkiye sahip olabilir ve etkinliği gerçek dünya uygulamalarında zaten fark edildi.

Ancak bu akışın web'de çalışmasını sağlamak zorlu bir süreçtir. Bir kaynağı sıkıştırmak için sözlük kullanırsanız bu kaynağı açmak için aynı sözlüğe ihtiyacınız olur. Bu akış daha önce web'de (ör. SDCH) denenmiş ancak güvenli bir şekilde uygulamak zor olmuştur. Paylaşılan sözlük sıkıştırmasıyla ilgili bu son teklif, hem statik hem de dinamik kaynaklar için önemli bir avantaj sağlarken bu endişeleri de gideriyor.

Chrome, paylaşılan sözlükler için desteği nasıl duyurur?

Tüm tarayıcılar, destekledikleri sıkıştırma algoritmalarını Accept-Encoding istek başlığı aracılığıyla duyurur. Üstbilginin içeriği, desteklenen kodlamaların virgülle ayrılmış bir listesidir:

Accept-Encoding: gzip, br, zstd

Bu Accept-Encoding başlığı, kaynağı isteyen tarayıcının gzip, Brotli ve ZStandard sıkıştırma algoritmalarını desteklediğini belirtir. İsteğe yanıt veren bir web sunucusu, isteğe yanıt verirken hangi algoritmayı kullanacağına karar verebilir.

Paylaşılan sözlük desteği etkinleştirildiğinde ve bir kaynak için alakalı bir sözlük mevcut olduğunda Accept-Encoding üstbilgisine ek jetonlar eklenir. Bu jetonlar Brotli için br-d, Zstandard için zstd-d'dir. Chrome, mevcut bir sözlüğün karma değerini de içerir. Bu konu bir sonraki bölümde ele alınmıştır.

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

Bir web sunucusu bu jetonu tanıyacak şekilde yapılandırılmışsa ve sözlüğü tanıyorsa bu isteğe, geçerli kodlama için sözlük kullanılarak sıkıştırılmış bir kaynakla yanıt verebilir. Bunun uygulamada nasıl gerçekleştirileceği, isteğin statik veya dinamik bir kaynak için olup olmadığına bağlıdır.

Statik kaynaklar için paylaşılan sözlük sıkıştırması

Statik sayfa kaynağı, istenen URL için her zaman aynı yanıtı veren kaynaktır. Sıkıştırılabilir statik sayfa kaynaklarına örnek olarak JavaScript ve CSS dosyaları verilebilir. Bu kaynaklar genellikle önbelleğe alma amacıyla bir şekilde sürüm oluşturulur. Bazen dosya adında dosya içeriğinin karma değeri (örneğin, styles.abcd1234.css) veya kaynağın parmak izini alma için başka bir yöntem kullanılır. Statik kaynaklar genellikle uzun süre önbelleğe alındığından ve belirli bir sıklıkta güncellendiğinden, bu kaynak türleri paylaşılan sözlüklerin sağladığı delta sıkıştırma için idealdir.

Statik bir kaynak için sözlük, Use-As-Dictionary yanıt başlığı ayarlanarak belirtilebilir. Başlık, birkaç anahtar/değer çiftinden birini alır ancak yalnızca match gereklidir. Bu anahtar, sözlüğün kullanılacağı kaynak yolunu belirten URLPattern söz dizimini kabul eder:

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

Use-As-Dictionary üst bilgisini, içinde belirtilen kalıpla eşleşen bir kaynağın gelecekteki sürümlerine uygulanan bir mekanizma olarak düşünebilirsiniz. Örneğin, web sitenizin tüm stillerini tek bir CSS dosyasında gönderdiğini varsayalım. Basitlik adına, söz konusu kaynağın ilk sürümünün /dist/styles.v1.css konumunda bulunduğunu ve /dist/styles.*.css match değerini içeren bir Use-As-Dictionary yanıt başlığıyla gönderildiğini varsayalım.

Bir süre sonra web sitenizin CSS'sini günceller ve /dist/styles.v2.css adresinde yeni bir sürümünü yayınlarsınız. Önceki sürümdeki Use-As-Dictionary yanıt başlığında kullanılan match değeri bu istek için geçerli olduğundan tarayıcı, sözlüğün yapılandırılmış alan bayt dizisi olarak kodlanmış karma değerini içeren bir Available-Dictionary başlığı gönderir:

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

Bu noktada, eşleşen sözlüğün kullanıldığından emin olmak için sıkıştırmayı kendi tarafında yapılandırmak sunucunun sorumluluğundadır. Ardından, sözlükle sıkıştırılan kaynak gönderilir ve kullanıcının tarayıcı önbelleğindeki sözlük, kaynağı açmak için kullanılır.

Web siteniz için sık sık yeni kod gönderiyorsanız delta sıkıştırma çok işinize yarayabilir. Ancak süreç esnektir. Tarayıcı, kullanıcının tarayıcı önbelleğinde bir sözlüğün mevcut olduğunu belirlemezse Accept-Encoding başlığında ek br-d veya zstd-d jetonlarını belirtmez. Bu durumda standart sıkıştırma akışı uygulanır.

Dinamik kaynaklar için paylaşılan sözlük sıkıştırması

Dinamik kaynaklar, paylaşılan sözlük sıkıştırmadan da yararlanabilir. Dinamik kaynaklar, bağlama göre değişen kaynaklardır. Örneğin, ana sayfasının haberler çıktıkça sık sık güncellendiği bir haber web sitesi. HTML belgeleri genellikle dinamik kaynaklardır. Bu gibi durumlarda sözlük, sitenin ortak HTML yapısının ve şablon kodunun çoğunu içerebilir. Bu da yalnızca her sayfanın benzersiz kısımlarının gönderildiği sıkıştırılmış sayfalara yol açar.

Dinamik olarak oluşturulan kaynakların yapısı nedeniyle, daha sonra kullanılmak üzere istemciye bir sözlük yüklenmelidir. Sözlüğün önceden yüklenmesi, paylaşılan sözlük sıkıştırmasının dinamik kaynaklara uygulanmasının spekülatif olduğu anlamına gelir. Bu gibi durumlarda, web sitenizin sözlük maliyetinin çok sayıda gezinme üzerinden amortize edilebileceği kadar trafik alması beklenir. Bu özelliği denemeye karar verirseniz ilk adım, sözlüğün konumunu sayfa HTML'nizde bir <link> öğesiyle belirtmektir:

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

Chrome bu <link> öğesiyle karşılaştığında, bant genişliği anlaşmazlığını önlemek için sayfa boşta kaldığında sözlüğü getirebilir ve bunu düşük öncelikli olarak yapar. Sözlüğün yanıtında Use-As-Dictionary üstbilgisi belirtilmeli ve hangi dinamik kaynak yolu için geçerli olduğu tanımlanmalıdır:

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

Bu noktadan sonraki akış, büyük ölçüde statik kaynaklardaki akışla aynıdır. Tarayıcı, sözlüğün eşleşen kaynaklar için geçerli olduğunu görür ve sözlüğün içeriklerinin karma değeriyle birlikte isteğe bir Available-Dictionary üstbilgisi ekler. Bu işlem, daha önce açıklanan statik kaynak akışına benzer.

Statik kaynakları derleme sırasında sıkıştırma

Paketleyicileri biliyorsanız derleme sırasında kaynakları sıkıştırabilen ve ardından bu sıkıştırılmış kaynakları sunabilen çeşitli eklentileri de biliyor olabilirsiniz. Örneğin, Apache, istek sırasında önceden sıkıştırılmış kaynakları sunmak için yönergeler kullanmanıza olanak tanır.

Sıkıştırmayı destekleyen çoğu Node.js tabanlı paketleyici, Node'un yerleşik Zlib kitaplığını kullanır. Zlib, Brotli'yi destekler ve bunu kullanan paketleyiciler genellikle seçenekleri doğrudan Zlib'e iletmek için bir arayüz sunar. Bu arayüz sözlük destekli sıkıştırmayı destekler. Sözlük kullanımını destekleyen bazı paketleyiciler:

Bir kaynağın belirli bir sürümü için kullanılabilen sözlüklerin, kaynağın önceki sürümlerinden birini kullanabileceğini unutmayın. Bu nedenle, kullanıcı trafiğini analiz etmeniz ve buna göre plan yapmanız gerekir. Dengeyi hedefleyin ve mümkün olduğunca çok sayıda geri gelen kullanıcıya fayda sağlayan kaynaklar oluşturun. CDN sağlayıcılar şu anda paylaşılan sözlük sıkıştırmasıyla ilgili denemeler yapmaktadır. Henüz herkese açık kullanıma sunulan bir uygulama olmasa da bu durumun değişmesini bekliyoruz.

Yenilikleri inceleyin.

Paylaşılan sözlük sıkıştırmanın tarayıcının mevcut sıkıştırma özellikleriyle entegre edilmesi, sık sık güncellenmiş üretim kodu gönderen ve geri gelen ziyaretçilerden önemli ölçüde trafik alan web sitelerinin yükleme performansını önemli ölçüde artırabilir. Paylaşılan sözlük sıkıştırmayı denemek istiyorsanız iki seçeneğiniz vardır:

  1. Nasıl çalıştığını anlamak için paylaşılan sözlük sıkıştırmayı kendi başınıza denemek istiyorsanız chrome://flags sayfasında Sıkıştırma sözlüğü aktarma deneysel özelliğini etkinleştirebilirsiniz.
  2. Bu özelliği üretim web sitenizde denemek ve paylaşılan sözlük sıkıştırmanın gerçek kullanıcılara nasıl fayda sağlayabileceğini görmek istiyorsanız jeton almak için kaynağın deneme sürümüne kaydolun ve kaynağın deneme sürümlerinin nasıl çalıştığı hakkında bilgi edinin.

Sonuç

Web'deki sıkıştırma teknolojisinde bu büyük ilerleme ve bu ilerlemenin, kullanıcıların her gün kullandığı mevcut uygulamaları ne kadar hızlandırabileceği konusunda oldukça heyecanlıyız. Bu özelliği denemenizi öneririz. Denerseniz düşüncelerinizi bizimle paylaşmanızı çok isteriz. Bir hata bulursanız crbug.com adresinden bildirin. Ek kaynaklar ve araçlar için use-as-dictionary.com adresini ziyaret edin. Son olarak, her şeyin nasıl çalıştığına dair daha ayrıntılı bilgi edinmek isterseniz açıklayıcı iyi bir sonraki adım olacaktır.