Veri sıkıştırma, uygun sayfa kaynaklarının boyutunu küçülten ve zamana meydan okuyan bir performans optimizasyonu tekniğidir. Bir süre boyunca, HTML, CSS ve JavaScript dosyaları gibi yaygın metin tabanlı sayfa kaynaklarını sıkıştırmak ve bunları istemciye gönderme amacıyla web sunucularında öncelikli olarak gzip'i kullanmak yaygın bir uygulamaydı. Sonuç olarak, sayfanın amaçlanan davranışını etkilemeden kaynaklar için daha hızlı yükleme süreleri elde edilir.
gzip kendi başına son derece etkili olmasına rağmen, son yıllarda web üzerinde sıkıştırma konusunda başka iyileştirmeler de yapılmıştır. 2016'da Chrome'da kullanıma sunulan Brotli algoritması, uygun kaynaklar için genel olarak daha iyi sıkıştırma oranları sağladı. 2017'nin sonunda tüm modern tarayıcılar Brotli'yi desteklemiş ve sunucu desteği yaygınlaşmıştır. Kısa süre önce de Chrome, ZStandard sıkıştırması kullanıma sunmuştur.
Ancak çalışma bununla da bitmiyor! Chrome ekibi, paylaşılan sözlükleri artık hem Brotli hem de ZStandard için kaynak denemesinde kullanılabilir hale getirmek için çalışıyor. 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ı destekleyebilir ve bazı durumlarda, % 90 veya daha iyi sıkıştırma oranları sağlayabilir. Bu yayında, paylaşılan sözlüklerin işleyiş şekli ve web sitenizde Brotli ve ZStandard kullanmak üzere kaynak denemelerine nasıl kaydolabileceğiniz hakkında daha ayrıntılı bilgi verilmektedir.
Paylaşılan sözlüklerle ilgili açıklama
Sıkıştırma, bir girişteki gereksiz sıraları bulma ve bu bilgileri kullanarak çok daha küçük bir çıktı elde etme işlemidir. Bu çıktı, daha sonra geri alınabilir. Sıkıştırma, kaynak yükleme sürelerini önemli ölçüde kısalttığı için web'de de iyi sonuç verir. Hem Brotli hem de ZStandard, bir sıkıştırma sözlüğü kullanarak bu algoritmaların sıkıştırma sırasında kullanabileceği ek kalıplardan oluşan bir koleksiyondur. Böylece, bu algoritmaların etkinliği daha da artabilir. Aslında, Brotli'nin yüksek verimliliği bir dereceye kadar dahili bir sözlük kullanılarak elde edilmektedir.
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 uygulanabilecek harici bir dosyadır. Sözlükler bir uygulamanın üretim koduna veya herhangi bir içeriğe özgü olabilir. Belirli bir sözlüğün girdisine ne kadar uygulanabilir olduğu, genel sıkıştırma verimliliği üzerinde büyük bir etkiye sahip olabilir. Bir girişin içeriğine çok benzeyen sözlükler, genel veya farklı içeriklere sahip sözlüklerden daha yüksek sıkıştırma oranlarına sahip çıktılar verir.
Özel bir sıkıştırma sözlüğünün ne kadar etkili olabileceğine ilişkin bir örnek: web sitenizin Angular çerçevesini kullandığını ve kullanmakta olduğunuz geçerli sürümün 1.7.9 olduğunu varsayalım. Angular çerçevesinin bu sürümü, sıkıştırılmamış halde yaklaşık 172 KiB'dir. Brotli'nin varsayılan ayarlarıyla sıkıştırıldığında, dosya boyutu yaklaşık 53 KiB olur. Bu, yaklaşık% 70'lik bir sıkıştırma oranı sağlar. Ancak, daha sonra Angular 1.8.3'e geçmeye karar verdiğinizi varsayalım. Angular'ın bu sürümünün boyut olarak 1.7.9 sürümüyle hemen hemen aynı olduğundan, ö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 sözlükten yararlanabilirsiniz. Bu, bir kaynağın önceki sürümüne ait bir sözlüğün, daha sonraki bir sürümü sıkıştırmak için kullanılabileceği zamandır. Önceki örneği kullanarak, Angular'ın 1.8.3 sürümünü sözlük olarak sürüm 1.7.9'u kullanarak sıkıştırdıysanız çıktı 4 KiB'ın biraz üzerinde olur. Bu, yaklaşık%98'lik bir sıkıştırma oranını temsil eder. Sıkıştırma sözlüklerinin yükleme performansı üzerinde büyük bir etkisi olabileceği açıkça bellidir ve bu sözlüklerin etkililiği, gerçek dünyadaki uygulamalarda şimdiden fark edilmiştir!
Ancak, bu akışın web'de çalışmasını sağlama konusunda bir zorluk var. İşin püf noktası, bir kaynağı sıkıştırmak için bir sözlük kullanıyorsanız, kaynağın sıkıştırmasını açmak için aynı sözlüğe ihtiyacınız olmasıdır. Bu akış, daha önce web'de, yani SDCH'de denenmişti ancak güvenli bir şekilde uygulanması zordu. Paylaşılan sözlük sıkıştırmaya yönelik bu en son teklif bu endişeleri giderirken hem statik hem de dinamik kaynaklar için önemli bir fayda sağlamaktadır.
Chrome, paylaşılan sözlüklere yönelik desteği nasıl tanıtır?
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 üstbilgisi, kaynağı isteyen tarayıcının gzip, Brotli ve ZStandard sıkıştırma algoritmalarını desteklediğini belirtir. Böylece, isteğe yanıt veren bir web sunucusu, isteğe yanıt verirken hangi algoritmanın kullanılacağına karar verebilir.
Paylaşılan sözlük desteği etkinleştirildiğinde ve kaynak için ilgili bir sözlük mevcut olduğunda, Accept-Encoding başlığına ek jetonlar eklenir. Bu jetonlar Brotli için br-d ve Zstandard için zstd-d şeklindedir. Chrome, kullanılabilir bir sözlüğün karma değerini de ekler. Bu konu sonraki bölümde açıklanmış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ıldıysa ve sözlüğü tanırsa bu isteğe, geçerli kodlama için sözlük kullanılarak sıkıştırılmış bir kaynakla yanıt verebilir. Bunun pratikte nasıl sağlanacağı, isteğin statik veya dinamik bir kaynak için olmasına 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ı üreten bir kaynaktır. Sıkıştırılabilir statik sayfa kaynaklarına örnek olarak JavaScript ve CSS dosyaları verilebilir. Bu kaynakların sürümü, genellikle bir şekilde önbelleğe alma amacıyla (bazen dosya adında dosya içeriğinin karması (örneğin, styles.abcd1234.css) veya kaynağın dijital parmak izini almanın başka bir yöntemi ile oluşturulur. Statik kaynaklar genellikle uzun süreler için önbelleğe alındığından ve belirli bir sıklıkta güncellenmeye yatkın olduğundan, bu kaynak türleri paylaşılan sözlüklerin sağladığı delta sıkıştırması için mükemmel bir adaydır.
Statik bir kaynak için Use-As-Dictionary yanıt başlığı ayarlanarak bir sözlük belirtilebilir. Başlık birkaç anahtar/değer çiftinden birini alır, ancak yalnızca match, sözlüğün kullanılması gereken kaynak yolunu belirten URLPattern sözdizimini kabul eder:
Use-As-Dictionary: match="/dist/styles.*.css"
Use-As-Dictionary üstbilgisini, bir kaynağın içinde belirtilen kalıpla eşleşen gelecekteki sürümlerine uygulanan bir mekanizma olarak düşünebilirsiniz. Web sitenizin tüm stillerini tek bir CSS dosyasında gönderdiğini varsayalım. Kolaylık olması açısından, söz konusu kaynağın ilk sürümünün /dist/styles.v1.css adresinde bulunduğunu ve /dist/styles.*.css değerine sahip match içeren bir Use-As-Dictionary yanıt başlığıyla gönderildiğini varsayalım.
Bir süre geçtikten sonra web sitenizin CSS'sini güncelleyip /dist/styles.v2.css adresinde bulunan yeni bir sürümünü gönderirsiniz. Ö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ı, yapılandırılmış alan bayt sırası olarak kodlanan sözlüğün karmasını içeren bir Available-Dictionary üstbilgisi 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 sunucuya bağlıdır. Daha sonra, bu sözlükle sıkıştırılan kaynak gönderilir ve kullanıcının tarayıcı önbelleğindeki mevcut sözlük onu açmak için kullanılır.
Web siteniz için sık sık yeni kod gönderiyorsanız delta sıkıştırması çok başarılı olabilir. Ancak süreç esnektir. Tarayıcı, kullanıcının tarayıcı önbelleğinde bir sözlüğün bulunduğunu belirlemezse Accept-Encoding üstbilgisinde 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ırmasından da yararlanabilir. Dinamik kaynaklar, bağlama göre değişen kaynaklardır. Örneğin, bir haber sitesi söz konusu olduğunda ana sayfanın sık sık güncellendiği haber siteleri bu kapsamdadır. HTML belgeleri genellikle dinamik kaynaklardır. Bu gibi durumlarda sözlük, sitenin ortak HTML yapısının ve şablon kodunun büyük bir kısmını içerebilir ve bu durum, her sayfanın yalnızca benzersiz parçalarının gönderildiği sıkıştırılmış sayfalara yönlendirme yapar.
Dinamik olarak oluşturulan kaynakların yapısı nedeniyle, istemciye daha sonra kullanılmak üzere 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ı tahmine dayalı olduğu anlamına gelir. Bu gibi durumlarda umut, web sitenizin sözlük maliyetinin çok sayıda gezinme sonucunda amorti edilebilecek kadar trafik almasıdır. Denemeye karar verirseniz ilk yapmanız gereken, sayfa HTML'nizdeki bir <link> öğesini kullanarak sözlüğün konumunu belirtmektir:
<link rel="dictionary" href="/dictionary.dat">
Chrome bu <link> öğesiyle karşılaştığında, bant genişliği çakışmasını önlemek için sözlüğü sayfa boşta kaldığında ve düşük öncelikte getirebilir. Sözlüğün yanıtının bir Use-As-Dictionary üstbilgisi ve geçerli olduğu dinamik kaynak yolunu belirtmesi gerekir:
Use-As-Dictionary: match="/product/*"
Buradaki akış, statik kaynaklarla büyük ölçüde aynıdır. Tarayıcı, sözlüğün kendisinin eşleşen kaynaklar için geçerli olduğunu görür ve yine daha önce açıklanan statik kaynak akışına benzer şekilde, sözlük içeriğinin karmasını içeren isteğe bir Available-Dictionary üstbilgisi ekler.
Derleme sırasında statik kaynakları sıkıştırın
Paketleyiciler hakkında bilginiz varsa, derleme sırasında kaynakları sıkıştırarak bu sıkıştırılmış kaynakları sunabilen çeşitli eklentiler hakkında bilgi sahibi olabilirsiniz. Örneğin, istek sırasında Apache, bu önceden sıkıştırılmış kaynakları sunmak için yönergeler kullanmanıza izin verir.
Sıkıştırmayı destekleyen Node.js tabanlı paketleyicilerin çoğu Düğüm'ün yerleşik Zlib kitaplığını kullanır. Zlib, Brotli'ye destek sağlıyor ve bunu kullanan paketleyiciler genellikle seçenekleri doğrudan Zlib'e aktaran bir arayüz sunuyor. Bu arayüz, sözlük destekli sıkıştırmayı destekliyor. Sözlük kullanımını destekleyen birkaç paketleyici aşağıda verilmiştir:
- webpack'in
CompressionWebpackPluginiçincompressionOptionsarayüzü üzerinden işlem yapıyor. rollup-plugin-brotli, sözlüklerin belirtilebileceği Node.js'de doğrudan Zlib'e geçen biroptionsyapılandırması sunar.- esbuild için
esbuild-plugin-compressüçüncü taraf eklentisi Node.js'deki Zlib seçeneklerine erişim sunar.
Bir kaynağın belirli bir sürümü için kullanılabilen sözlüklerin, bir kaynağın önceki sürümlerinden herhangi birini kullanabileceğini unutmayın. Diğer bir deyişle, kullanıcı trafiğini analiz etmeniz ve buna göre plan yapmanız gerekir. Dengeyi hedefleyin ve mümkün olan en fazla sayıda geri gelen kullanıcının yararlanabileceği kaynaklar oluşturun. CDN sağlayıcıları şu anda paylaşılan sözlük sıkıştırmayı deniyor. Henüz herkesin kullanımına açık bir uygulama yok ancak bunun 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 gönderen ve geri gelen ziyaretçilerden önemli miktarda trafik alan web siteleri için 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:
- Nasıl çalıştığını anlamak için paylaşılan sözlük sıkıştırmasını kendiniz kurcalamak istiyorsanız,
chrome://flagssayfasında Sıkıştırma sözlüğü aktarımı deneysel özelliğini etkinleştirebilirsiniz. - Bunu üretim web sitenizde denemek ve paylaşılan sözlük sıkıştırmanın gerçek kullanıcılara nasıl avantaj sağlayacağını görmek istiyorsanız jeton almak için kaynak deneme sürümüne kaydolun ve kaynak denemelerinin işleyiş şekli hakkında bilgi edinin.
Sonuç
Web'de sıkıştırma teknolojisindeki bu büyük gelişme ve bu teknolojinin, kullanıcıların her gün kullandığı mevcut uygulamaları ne kadar hızlı hale getireceği bizi çok heyecanlandırıyor. Bu özelliği denemenizi öneririz. En önemlisi de, kullanırsanız ne düşündüğünüzü öğrenmek isteriz! Bir hata bulursanız crbug.com adresinden bildirin. Daha fazla kaynak ve araç için use-as-dictionary.com adresine göz atın. Son olarak, tüm bunların nasıl işlediğine dair daha ayrıntılı bilgi edinmek isterseniz açıklamayı iyi bir şekilde izleyebilirsiniz.