[WP] Gzip ve Brotli sıkıştırma: iki sıkıştırma algoritması arasındaki fark

WordPress CMS dahil web sitelerini hızlandırmak için sunucuda veri sıkıştırmayı ayarlamak faydalıdır. Böylece web sunucusu ile tarayıcı arasında aktarılan veriler daha hızlı yüklenir ve web sitesinin tamamı hızlanır. Bu, site yöneticilerinin en çok düşündüğü unsurlardan biridir. Gzip sıkıştırma yaygın olarak kullanılır ve birçok web sunucusunda gzip'ten giderek Brotli  sıkıştırmaya geçiş artıyor.

1️⃣ Sıkıştırma nedir?

Site URL: açtığınızda tarayıcı ile sunucu arasında bir konuşma başlar. Bu sırada tarayıcı sunucuya içeriğin sıkıştırmasını (Compression) açıp açamayacağını ve hangi sıkıştırma algoritmalarını kullandığını bildirir. Bu, sunucu sıkıştırılmış veri gönderdiğinde tarayıcının onu doğru açmasına yardım eder. Bu yüzden sıkıştırma algoritmalarını destekleyen bir sunucu ve tarayıcıyla siteniz daha da hızlı yüklenir.

Web tarayıcısı sunucuya bağlandığında gzip ya da Brotli sıkıştırma gibi başlıklar gönderir. İkisinden biriyle sıkıştırılmış veri tarayıcıya ulaşır ve sıkıştırılmış veri sıkıştırılmamış veriden daha hızlı yüklenir.

Content-encoding: gzip
Content-encoding: br

Sıkıştırılan dosyalar çoğunlukla metindir:
· HTML
· CSS
· JavaScript

2️⃣ Gzip sıkıştırma nedir?

Web hosting firmalarının yaygın kullandığı sıkıştırma algoritmaları Gzip ve Brotli'dir. Gzip'in beta sürümü 1992'de çıktı, 1.0 sürümü 1993'te yayımlandı. Genel olarak Gzip internette veri aktarırken sıkıştırma için kullanılan standart yöntemlerden biridir. İlk sıkıştırma algoritmalarından DEFLATE'e dayanır ve adını daha önce Unix için geliştirilmiş dosya sıkıştırma programı gzip'ten alır.

DEFLATE, LZ77 (Lempel-Ziv 1977) algoritmasını Huffman kodlamasıyla birleştirir. LZ77 tekrarlanan verileri arar, eşleşen dizeleri bulur ve bunları kodlarla değiştirir. Huffman kodlaması her karakterin görülme sıklığını kullanarak en kısa bit kodlarını atar.

Gzip verileri DEFLATE ile sıkıştırır ve HTTP istek ile yanıtlarındaki ‘Accept-Encoding: gzip’ başlığı sayesinde yalnızca istemci Gzip'i destekliyorsa sıkıştırır. Bu sıkıştırma web sitelerinin daha hızlı yüklenmesine yardım eder.

3️⃣ Brotli sıkıştırma nedir?

Brotli, 2013'te Google mühendisleri Jyrki Alakuijala ve Zoltán Szabadka tarafından geliştirildi.

Gzip başlangıçta dosya sıkıştırmak için tasarlanmıştı ama web'de de kullanılabilecek şekilde değiştirildi. Brotli ise baştan web'de kullanılmak üzere geliştirildi. Bu nedenle Brotli ile web sunucusu içeriği tarayıcıya göndermeden önce sıkıştırabilir. Tarayıcıya akıtılmadan önce sıkıştırıldığı için daha iyi ve gelişmiş bir yöntemdir.

Brotli, GZIP sıkıştırmayla aynı iki temel tekniği kullanır: LZ77 ve Huffman kodlaması.

4️⃣ Gzip sıkıştırma ve Brotli sıkıştırma

Gzip verileri DEFLATE yöntemiyle sıkıştırır (ve açar); Brotli ise LZ77 ile Huffman kodlamasına bağlam modellemesi ekleyen kendi biçimini kullanır.

• Gzip, Brotli'den daha hızlı sıkıştırır.
• Brotli özel olarak web için tasarlandı.
• Brotli her sıkıştırma düzeyinde daha iyi bir sıkıştırma oranı (yani daha küçük sıkıştırılmış dosyalar) sunar.
• Gzip'e göre Brotli bu üç dosya türünü daha iyi sıkıştırır: HTML'de %21, CSS'te %17, JavaScript'te %14.

Brotli'yi Gzip'e tercih eden web sunucuları giderek artıyor. Brotli akışları anında sıkıştırmak için tasarlandığından ön yüzde açma hızının Gzip'e göre %64'e kadar daha yüksek olduğu söylenir.

Mayıs 1996'da yayımlanan RFC 1952, Gzip biçiminin DEFLATE sıkıştırma yöntemini kullandığını ve veri bozulmasını tespit eden bir CRC değeri içerdiğini açıklar. Sıkıştırılmış verinin sonunda özgün verinin CRC-32 değeri ve boyutu yazılıdır.

Temmuz 2016'da yayımlanan RFC 7932, Brotli'nin LZ77 algoritmasını Huffman kodlamasıyla birleştirerek sıkıştırdığını belirtir. Buna ek olarak sıkıştırılmamış verinin önceki iki baytını bağlam olarak kullanıp Huffman kodlarını seçer; tekrarlanan dizeler yerine 122.784 baytlık statik sözlükteki kelimelere de başvurabilir.

İki biçim yanıt başlığında [Content-Encoding: gzip] ve [Content-Encoding: br] olarak görünür. [br] değeri RFC 7932'de HTTP içerik kodlaması olarak kaydedildi.

5️⃣ Gzip ve Brotli sıkıştırma ölçümü: Nginx + Apache sunucu

Nginx ile Apache'yi birlikte kullanan bir WordPress sunucusunda aynı yazı, WordPress'in varsayılan blok CSS dosyası ve jQuery dosyasının yanıtlarını yalnızca istek başlığını değiştirerek karşılaştırdım. [Accept-Encoding]'e yalnızca gzip koyan, yalnızca br koyan ve başlığı olmayan istekleri aynı sunucudan curl ile gönderdim.

for ae in gzip br ''; do echo == ${ae:-none}; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H Accept-Encoding:$ae https://example.com/hello-world/ | grep -i -E '^(content-encoding|size)'; done

== gzip
content-encoding: gzip
size: 21390
== br
content-encoding: br
size: 20190
== none
size: 90833

Bir yazının HTML'si gzip isteğinde 21.390 bayta, br isteğinde 20.190 bayta sıkıştırıldı; başlıksız istek sıkıştırılmamış 90.833 baytlık yanıt aldı. br yanıtı gzip'ten 1.200 bayt (%5,6) küçüktü.

for f in wp-includes/css/dist/block-library/style.min.css wp-includes/js/jquery/jquery.min.js; do for ae in gzip br ''; do echo == ${f##*/} ${ae:-none}; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H Accept-Encoding:$ae https://example.com/$f | grep -i -E '^(content-encoding|size)'; done; done

== style.min.css gzip
content-encoding: gzip
size: 19655
== style.min.css br
size: 140829
== style.min.css none
size: 140829
== jquery.min.js gzip
content-encoding: gzip
size: 30633
== jquery.min.js br
size: 87553
== jquery.min.js none
size: 87553

gzip isteğinde CSS dosyası 19.655 bayta, jQuery dosyası 30.633 bayta sıkıştırıldı. Yalnızca br istendiğinde ya da başlık olmadığında sunucu [Content-Encoding] başlığı olmadan 140.829 ve 87.553 baytlık özgün dosyaları olduğu gibi döndürdü.

nginx -V 2>&1 | grep -c brotli

0

httpd -M 2>/dev/null | grep -E 'brotli|deflate'

 deflate_module (shared)
 brotli_module (shared)

CSS ve JS gibi statik dosyalara Nginx doğrudan yanıt verir ve sıkıştırır; bu yapılandırmadaki Nginx'te Brotli modülü olmadığından yalnızca gzip ile sıkıştırır.

HTML'de Nginx'in Apache'ye ilettiği isteğe WordPress yanıt verir ve Apache sıkıştırır. Apache'de hem Brotli modülü hem de Gzip sıkıştırmayı üstlenen [mod_deflate] modülü vardır.

for f in hello-world/ wp-includes/css/dist/block-library/style.min.css wp-includes/js/jquery/jquery.min.js; do echo == $f; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H 'Accept-Encoding: gzip, deflate, br, zstd' https://example.com/$f | grep -i -E '^(content-encoding|size)'; done

== hello-world/
content-encoding: gzip
size: 21390
== wp-includes/css/dist/block-library/style.min.css
content-encoding: gzip
size: 19655
== wp-includes/js/jquery/jquery.min.js
content-encoding: gzip
size: 30633

Sunucuda Brotli modülü olması tarayıcının Brotli ile sıkıştırılmış yanıt alacağı anlamına gelmez. Edge 155'in gönderdiği değerle aynı olan [gzip, deflate, br, zstd] ile istendiğinde Apache de HTML'yi gzip ile sıkıştırdı ve üç dosyanın hepsi gzip ile geldi.

br'yi gzip'in önüne koysanız ya da [br;q=1.0, gzip;q=0.5] gibi öncelikli işaretleseniz de HTML gzip ile geldi. Aynı yazı ve iki dosya Edge'de açıldığında da hepsi gzip ile aktarıldı.

İlk bayt süresi, istek sırası karıştırılarak her biri 40 kez ölçülen curl [time_starttransfer] değerlerinin ortancasıdır; her istek yeni bağlantı açtığından TLS bağlantı süresi de dahildir. HTML'de sıkıştırılmamış yanıt 22,7 ms, gzip 26,3 ms, br 26,5 ms, tarayıcı benzeri istek 25,0 ms sürdü. CSS ve JS sıkıştırma olsun olmasın 18–21 ms sürdü.

Gzip ve Brotli'nin sıkıştırma hızını burada ölçmedim, açık kaynaklarla karşılaştırdım. RFC 7932, Brotli'nin gzip programından belirgin şekilde daha yüksek oranla sıkıştırdığını ve mevcut LZMA uygulamalarından çok daha hızlı açtığını yazar. Google Brotli deposunda Brotli'nin deflate ile benzer hızda ama daha yoğun sıkıştırdığını açıklar.

2015'te Cloudflare iki yöntemi 10.655 HTML, CSS ve JavaScript dosyasıyla test etti. En yüksek kalitedeki Brotli, en yüksek kalitedeki zlib'e göre ortalama 1,19 kat daha küçük sonuç verdi ama saniyede 0,5 MB sıkıştırarak zlib 9. düzeyin 41,9 MB'ından çok daha yavaş kaldı. Brotli 4. düzey, zlib 8. düzeyle benzer orana sahipti ve genel ortalamada biraz daha hızlıydı ama yalnızca 64 KB'tan küçük dosyalara bakıldığında 1,48 kat yavaştı.

HTML, CSS ve JavaScript gibi dosyaları sıkıştırarak bir web sitesini optimize etmeyi inceledik. Web sitesini hızlandırmak için dosya sıkıştırma ve Resim İyileştirme temel unsurlardan biridir.

🔢 SSS & önerilen içerikler

ℹ️ Satış ortaklığı bildirimi
Bu sitenin içeriklerinde satış ortaklığı bağlantıları bulunur. Bir ziyaretçi bu bağlantılar üzerinden ürün veya hizmet satın alırsa bu site satıcıdan komisyon alır. Bu süreçte alıcının ödediği tutar ^{(kampanya indirimlerinde tutar düşer↓)} artmaz. Yayımlanan fiyat, indirim ve stok bilgileri yazının yazıldığı zamana aittir ve gerçek durumdan farklı olabilir; bu yüzden satın almadan önce son bilgiyi satıcıdan kontrol etmenizi rica ederiz. Ürünler kendi ölçütlerimize göre seçilir ve değerlendirilir; komisyon alınıp alınmaması tanıtım sırasını veya değerlendirme içeriğini etkilemez.