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

Jeremy Wagner

Veri sıkıştırma, uygun sayfa kaynaklarının boyutunu azaltan, zaman içinde test edilmiş bir performans optimizasyon tekniğidir. Bir süredir, HTML, CSS ve JavaScript dosyaları gibi yaygın metin tabanlı sayfa kaynaklarını sıkıştırmak ve sıkıştırılmış haldeki bu kaynakları istemciye göndermek için web sunucularında öncelikle gzip'in kullanılması yaygın bir uygulamaydı. Sonuç olarak, sayfanın amaçlanan davranışını etkilemeden kaynakların daha hızlı yüklenmesi sağlanır.

gzip kendi başına oldukça etkili olsa da son yıllarda web'de sıkıştırma konusunda daha da iyileştirmeler yapıldı. 2016'da Brotli algoritması Chrome'da kullanıma sunuldu ve uygun kaynaklar için genel olarak daha iyi sıkıştırma oranları sağladı. 2017'nin sonuna kadar tüm modern tarayıcılar Brotli'yi destekledi ve sunucu desteği daha yaygın hale gelmeye başladı. Daha yakın zamanda Chrome, ZStandard sıkıştırmasını kullanıma sundu.

Ancak çalışmalarımız bununla sınırlı değil. Chrome ekibi, paylaşılan sözlükleri web'de kullanılabilir hale getirmek için çalışıyor. Bu sözlükler, hem Brotli hem de ZStandard için orijinal deneme sürümünde kullanıma sunuldu. Paylaşılan sözlükler, sık sık güncellenmiş kod yayınlayan web siteleri için Brotli ve ZStandard sıkıştırmasını destekleyerek önemli ölçüde daha yüksek sıkıştırma oranları sağlayabilir ve bazı durumlarda % 90 veya daha iyi sıkıştırma oranları sunabilir. Bu yayında, paylaşılan sözlüklerin nasıl çalıştığı ve web sitenizde Brotli ve ZStandard için bunları kullanmak üzere kaynak deneme sürümlerine nasıl kaydolacağınız hakkında daha ayrıntılı bilgiler verilmektedir.

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

Sıkıştırma, bir girişte yinelenen dizileri bulma ve bu bilgileri kullanarak daha sonra geri alınabilecek çok daha küçük bir çıkış oluşturma işlemidir. Sıkıştırma, kaynak yükleme sürelerini önemli ölçüde azalttığı için web'de iyi çalışır. Hem Brotli hem de ZStandard, bu algoritmaların sıkıştırma sırasında kullanabileceği ek kalıplardan oluşan bir koleksiyon olan sıkıştırma sözlüğü kullanarak verimliliklerini daha da artırabilir. Aslında Brotli'nin yüksek verimliliği, bir dereceye kadar dahili bir sözlük kullanılarak elde edilir.

Ancak, kullanıcı tarafından seçilen özel sözlükler, belirli kaynaklara özgü kalıplar içeren Brotli ve ZStandard ile kullanılabilir. Pratikte özel sözlük, herhangi bir girişe uygulanabilen harici bir dosyadır. Sözlükler, bir uygulamanın üretim koduna veya herhangi bir içeriğe son derece özel 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ş 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 oranına sahip çıkışlar sağlar.

Özel sıkıştırma sözlüğünün ne kadar etkili olabileceğine dair bir örnek verelim: Web sitenizin Angular çerçevesini kullandığını ve şu anda kullandığınız sürümün 1.7.9 olduğunu varsayalım. Angular çerçevesinin bu sürümü sıkıştırılmadığında yaklaşık 172 KB'tır. Brotli'nin varsayılan ayarlarıyla sıkıştırıldığında boyutu yaklaşık 53 KB olur. Bu işlem, yaklaşık% 70'lik bir 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ünün yaklaşık olarak 1.7.9 sürümüyle aynı boyutta olduğu göz önüne alındığında, önceki sürümle hemen hemen aynı sıkıştırma oranını bekleyebilirsiniz.

Bu noktada, delta sıkıştırma olarak bilinen bir işlem kullanılarak özel bir sözlükten yararlanabilirsiniz. Bu işlemde, bir kaynağın önceki sürümünün sözlüğü daha sonraki bir sürümü sıkıştırmak için kullanılabilir. Önceki örneği kullanarak Angular'ın 1.8.3 sürümünü 1.7.9 sürümünü sözlük olarak kullanarak sıkıştırırsanız çıktı 4 KiB'ın biraz üzerinde olur. Bu, yaklaşık%98 oranında bir sıkıştırma oranı anlamına gelir. Sıkıştırma sözlüklerinin yükleme performansı üzerinde büyük bir etkisi olabileceği açıktır ve bunların etkililiği gerçek dünyadaki uygulamalarda zaten fark edilmiştir.

Ancak bu akışı web'de çalıştırırken bir sorunla karşılaşıyoruz. Ancak bir kaynağı sıkıştırmak için sözlük kullanırsanız sözlüğü sıkıştırılmış dosyadan çıkarmak için de kullanmanız gerekir. Bu akış daha önce web'de (özellikle SDCH) denenmiş ancak güvenli bir şekilde uygulanması zor olmuştur. Paylaşılan sözlük sıkıştırma için sunulan bu son teklif, hem statik hem de dinamik kaynaklar için önemli bir avantaj sağlarken bu endişeleri giderir.

Chrome, paylaşılan sözlükler için destek reklamını nasıl yapar?

Tüm tarayıcılar, destekledikleri sıkıştırma algoritmalarının reklamını Accept-Encoding istek başlığı üzerinden yapar. Ü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 algoritmanın kullanılacağına karar verebilir.

Ortak sözlük desteği etkinleştirildiğinde ve bir kaynak için alakalı bir sözlük mevcut olduğunda Accept-Encoding başlığına ek jetonlar eklenir. Bu jetonlar Brotli için br-d, Zstandard için zstd-d şeklindedir. Chrome, kullanılabilir bir sözlüğün karma değerini de içerir. Bu konu aşağıda 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 sözlük kullanılarak sıkıştırılmış bir kaynakla bu isteğe yanıt verebilir. Bu işlemin pratikte nasıl gerçekleştirileceği, isteğin statik mi yoksa dinamik mi bir kaynak için gönderildiğine bağlıdır.

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

Statik sayfa kaynağı, istenen bir 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ümlendirilir. Bazen dosya adında dosyanın içeriğinin karması (örneğin styles.abcd1234.css) veya kaynağın parmak izi almayla ilgili başka bir yöntem kullanılır. Statik kaynaklar genellikle uzun süreler boyunca önbelleğe alındığı ve belirli bir sıklıkta güncellendiği için bu kaynak türleri, paylaşılan sözlüklerin sağladığı delta sıkıştırması için mükemmel birer adaydır.

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

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

Use-As-Dictionary üst bilgisini, bir kaynağın içinde belirtilen kalıpla eşleşen gelecekteki sürümleri için geçerli olan bir mekanizma olarak düşünebilirsiniz. Örneğin, web sitenizin tüm stillerini tek bir CSS dosyasında gönderdiğini varsayalım. Basitlik açısından, söz konusu kaynağın ilk sürümünün /dist/styles.v1.css adresinde olduğunu ve /dist/styles.*.css değerine sahip bir match içeren 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ış karmasını 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ılmasını sağlamak için sıkıştırmayı sunucunun kendi tarafında yapılandırmak gerekir. Ardından, sözlükle sıkıştırılmış kaynak gönderilir ve sıkıştırmayı açmak için kullanıcının tarayıcı önbelleğindeki sözlük kullanılır.

Web siteniz için sık sık yeni kod gönderiyorsanız delta sıkıştırma çok faydalı olabilir. Ancak süreç esnektir. Tarayıcı, kullanıcının tarayıcı önbelleği iç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ışı geçerli olur.

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

Dinamik kaynaklar, paylaşılan sözlük sıkıştırmasından da yararlanabilir. Dinamik kaynaklar, bağlama göre değişen kaynaklardır (ör. ana sayfanın, yeni haberler geldikçe sık sık güncellendiği bir haber web sitesi). HTML dokümanları 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 her sayfanın yalnızca benzersiz bölümlerinin gönderildiği sıkıştırılmış sayfalara yol açar.

Dinamik olarak oluşturulan kaynakların yapısı nedeniyle, daha sonra kullanmak için müşteriye bir sözlük yüklenmesi gerekir. Bir sözlüğü önceden yüklemek, dinamik kaynaklara ortak sözlük sıkıştırması uygulamanın spekülatif olduğu anlamına gelir. Bu tür durumlarda, web sitenizin sözlük maliyetinin çok sayıda gezinme işleminde amorti edilebilecek kadar trafik alması beklenir. Bu yöntemi denemeye karar verirseniz ilk adım, sayfa HTML'nizde bir <link> öğesi kullanarak sözlüğün konumunu belirtmektir:

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

Chrome bu <link> öğesiyle karşılaştığında, sayfa boş olduğunda sözlüğü getirebilir ve bant genişliği anlaşmazlığını önlemek için sözlüğü düşük öncelikli olarak getirir. Sözlüğün yanıtında bir Use-As-Dictionary üstbilgisi ve hangi dinamik kaynak yolu için geçerli olduğunu belirtmelidir:

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

Bu noktadan sonra akış, büyük ölçüde statik kaynaklarla aynıdır. Tarayıcı, sözlüğün eşleşen kaynaklar için geçerli olduğunu görür ve daha önce açıklanan statik kaynaklar akışına benzer şekilde, sözlüğün içeriğinin karmasını içeren bir Available-Dictionary başlığını isteğe ekler.

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

Paketleyicileri biliyorsanız bunlar için kaynakları derleme sırasında sıkıştırıp daha sonra 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ış bu kaynakları sunmak için yönergeler kullanmanıza olanak tanır.

Sıkıştırmayı destekleyen Node.js tabanlı paketleyicilerin çoğu, Node'un yerleşik Zlib kitaplığını kullanır. Zlib, Brotli için destek sunar ve bunu kullanan paketleyiciler genellikle seçenekleri doğrudan Zlib'e aktarmak 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 birkaç paketleyici aşağıda verilmiştir:

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 planlama yapmanız gerekir. Denge sağlamaya çalışın ve geri gelen kullanıcıların maksimum sayısına mümkün olduğunca fayda sağlayacak kaynaklar oluşturun. CDN sağlayıcılar şu anda paylaşılan sözlük sıkıştırmasını denemektedir. Henüz herkese açık olarak kullanılabilen bir uygulama yok ancak bu durumun değişmesini bekliyoruz.

Yenilikleri inceleyin.

Paylaşılan sözlük sıkıştırmasını, tarayıcının mevcut sıkıştırma özellikleriyle entegre etmek, sık sık güncellenmiş üretim kodu yayınlayan ve geri gelen ziyaretçilerden önemli miktarda trafik alan web sitelerinin yükleme performansını önemli ölçüde iyileştirme potansiyeline sahiptir. Paylaşılan sözlük sıkıştırmayı denemek istiyorsanız iki seçeneğiniz vardır:

  1. Ortak sözlük sıkıştırmanın nasıl çalıştığını anlamak için kendi başınıza denemek istiyorsanız chrome://flags sayfasında Sıkıştırılmış sözlük aktarım 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 kaynak deneme sürümüne kaydolun ve kaynak deneme sürümlerinin işleyiş şekli hakkında bilgi edinin.

Sonuç

Web'deki sıkıştırma teknolojisinde yapılan bu büyük ilerleme ve 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. En önemlisi de, denedikten sonra düşüncelerinizi bizimle paylaşın. Bir hata bulursanız crbug.com adresinden bildirin. Ek kaynaklar ve araçlar için use-as-dictionary.com adresine göz atın. Son olarak, tüm bunların işleyiş şekli hakkında daha ayrıntılı bilgi edinmek istiyorsanız açıklayıcı bölümünü inceleyebilirsiniz.