Brotli mi Gzip mi? NGINX, Cloudflare ve cPanel’de En Doğru Sıkıştırma Ayarları

Sitenizin hızını artırmanın en “ucuz” yollarından biri HTTP yanıtlarını sıkıştırmaktır. Yıllardır gzip standart kabul edildi; ancak Brotli, özellikle metin tabanlı varlıklarda (HTML, CSS, JS) daha yüksek sıkıştırma oranı ve daha düşük aktarım süresi sunarak öne çıktı. Peki sizin için en doğru tercih ne? Bu rehberde performans farklarını, gerçek hayattaki etkilerini ve popüler platformlarda kurulumu ele alıyoruz.

1) Brotli ve gzip Temel Farkları

• Sıkıştırma Oranı: Brotli, aynı kalite seviyesinde gzip’ten genelde %15–25 daha küçük dosya üretir. Bu, mobil ağlarda hissedilir derecede daha düşük TTFB ve daha hızlı render demektir.

• CPU Maliyeti: Brotli’nin yüksek seviyeleri (br 9–11) CPU’yu daha çok yorar. Canlı sıkıştırmada (on-the-fly) orta seviye idealdir; statik varlıklar için ise yüksek seviye ile disk üzerinde önceden sıkıştırma (precompression) tercih edilir.

• Tarayıcı Desteği: Modern tarayıcıların tamamı Brotli’yi destekler. Eski istemciler için gzip güvenli geri dönüş (fallback) olmaya devam eder.

• İçerik Tipleri: Metin tabanlı varlıklarda (HTML, CSS, JS, JSON, SVG, XML) Brotli fark yaratır. Resim/video zaten sıkıştırılmıştır; tekrar sıkıştırmayın.

2) Hangi Senaryoda Hangisi?

• Statik varlıklar (CSS/JS) CDN (Cloudflare vb.) üzerinden servis ediliyorsa: Brotli açın; gzip otomatik fallback kalsın.

• Dinamik HTML çok trafik alıyorsa ve CPU kısıtlıysa: Brotli orta seviye (4–6) veya gzip seçin. Sayfa önbelleği (micro-cache/LSCache) varsa Brotli daha rahat uygulanır.

• Eski istemci uyumluluğu kritik (kurumsal intranetler, gömülü cihazlar): gzip’i devre dışı bırakmayın.

3) NGINX Üzerinde Brotli (ve gzip) Kurulumu

Not: Dağıtımınıza bağlı olarak ngx_brotli modülü paketle gelebilir veya ayrı derleme gerekebilir. Yönetimli paneller (CyberPanel, aaPanel, Plesk) bazen bu modülü seçenek olarak sunar. Aşağıdaki direktifler, modül mevcutsa çalışır.

nginx.conf veya site konfigürasyonu:

# GZIP yedeği gzip on; gzip_comp_level 5; gzip_min_length 1024; gzip_types text/plain text/css application/json application/javascript application/xml application/rss+xml text/xml image/svg+xml; # Brotli brotli on; brotli_comp_level 5; # Dinamik için 4–6 arası mantıklı brotli_buffers 16 8k; brotli_min_length 1024; brotli_types text/plain text/css application/json application/javascript application/xml application/rss+xml text/xml image/svg+xml; # Önceden sıkıştırılmış dosyaları servis et (varsa .br ve .gz) gzip_static on; # file.css.gz varsa doğrudan gönderir brotli_static on; # file.css.br varsa doğrudan gönderir

Öneri:

• Statik varlıkları build aşamasında .br ve .gz olarak üretin. Böylece NGINX CPU harcamadan dosyayı diskte hazır bulur.

• Dinamik HTML için brotli_comp_level 4–5 çoğu sunucuda iyi dengedir.

4) Cloudflare’da Brotli

Cloudflare’da Speed > Optimization bölümünden tek tıkla Brotli’yi açabilirsiniz. CDN, ziyaretçinin tarayıcı desteğine göre otomatik seçim yapar ve kenar (edge) tarafında önbelleğe aldığı varlıkları Brotli ile servis eder. Ek olarak:

• Early Hints (103) ve HTTP/3 de aktifse ilk bayta kadar geçen süre daha da azalır.

• Cache Rules ile CSS/JS için uzun TTL belirleyip “Origin cache-control”a saygı kuralı tanımlayın.

• Dinamik HTML için Cache By Device Type veya Cache Key ayarları ile varyasyonları doğru yönetin; oturum/sepet gibi hassas yolları hariç tutun.

5) cPanel/Apache (mod_deflate & mod_brotli)

Apache 2.4+ üzerinde mod_brotli mevcutsa panelden ya da httpd.conf/.htaccess ile etkinleştirebilirsiniz.

.htaccess örneği:

# Brotli <IfModule mod_brotli.c> AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css \ application/javascript application/json image/svg+xml application/xml BrotliCompressionQuality 5 </IfModule> # Gzip (fallback) <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/css \ application/javascript application/json image/svg+xml application/xml </IfModule> # Önceden sıkıştırılmışları servis et FileETag None <FilesMatch "\.(js|css|html|svg)$"> <IfModule mod_headers.c> Header append Vary "Accept-Encoding" Header set Cache-Control "public, max-age=31536000, immutable" </IfModule> </FilesMatch>

Notlar:

• Caching ve Vary: Accept-Encoding başlığı doğru ayarlanmalı.

• Paylaşımlı hosting’de modüller kısıtlı olabilir; sağlayıcınızın Brotli desteğini kontrol edin.

6) Build/Deploy Aşamasında Precompression (.br/.gz)

Modern projenizde (Next.js, Nuxt, Laravel Mix, Vite, Webpack) yayın öncesi iki formatı da üretin:

NPM script fikri:

{ "scripts": { "build": "vite build", "postbuild": "node scripts/compress.mjs" } }

scripts/compress.mjs basit örnek:

import { promisify } from 'node:util'; import { pipeline } from 'node:stream'; import fs from 'node:fs'; import path from 'node:path'; import zlib from 'node:zlib'; const pipe = promisify(pipeline); const root = 'dist'; const exts = ['.js', '.css', '.html', '.svg', '.json']; async function compressFile(file) { const input = fs.createReadStream(file); await pipe(input, zlib.createBrotliCompress({ params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 } }), fs.createWriteStream(file + '.br')); const input2 = fs.createReadStream(file); await pipe(input2, zlib.createGzip({ level: 9 }), fs.createWriteStream(file + '.gz')); } function walk(dir) { for (const entry of fs.readdirSync(dir, { withFileTypes: true })) { const p = path.join(dir, entry.name); if (entry.isDirectory()) walk(p); else if (exts.includes(path.extname(p))) compressFile(p); } } walk(root);

• Üretimde NGINX/Apache tarafında *_static on ve uygun mime türleri ile bu dosyalar doğrudan gönderilir.

• CI/CD hattınıza bu adımı ekleyin; CPU yükü canlı trafikten uzaklaşır.

7) Ölçüm: Etkiyi Nasıl Kanıtlarsınız?

• A/B karşılaştırma: Önce yalnız gzip ile ölçün, sonra Brotli’yi açın.

• Metrikler:

  • Transfer Size (KB ↓), TTFB (ms ↓), LCP (s ↓).

  • Edge vs Origin hit oranları.

• Araçlar: WebPageTest, Lighthouse, DevTools “Network” paneli, curl -H 'Accept-Encoding: br' -I https://site.com/app.css ile başlık kontrolü.

8) Sık Yapılan Hatalar

• JPEG/PNG/WebP’yi yeniden sıkıştırmak: Boşa CPU harcaması, bazen daha büyük dosya bile üretir.

• Vary: Accept-Encoding unutmak: CDN/Proxy karışıklığı ve yanlış içerik sunumu.

• Dinamik içerikte aşırı seviye (br 9–11): Yük altında CPU tıkanması, kuyruklar.

• Precompression var ama sunucu servise etmiyor: gzip_static/brotli_static açık değil veya yanlış dizinde build çıkışı.

9) Önerilen Basit “Altın Ayar”

• Cloudflare: Brotli ON, HTTP/3 ON, Cache Rules ile statik varlıklara uzun TTL.

• NGINX: brotli on; brotli_comp_level 5; brotli_static on; gzip on; gzip_static on;

• Apache: mod_brotli + mod_deflate birlikte; Vary: Accept-Encoding ve uzun cache başlıkları.

Sonuç

Brotli, özellikle metin varlıklarda band genişliğini hissedilir biçimde azaltır ve LCP/TTFB’yi iyileştirir. Dinamik sayfalarda orta sıkıştırma, statik varlıklarda ise önceden sıkıştırma ile en iyi dengeyi yakalarsınız. Geriye yalnızca doğru ölçmek ve CI/CD hattınıza precompression adımı eklemek kalıyor.