Merhaba arkadaşlar, bugün sizlere basit gibi görünen ama performansa inanılmaz etki eden bir konudan, Brotli sıkıştırmasından bahsedeceğim. Bir projede, özellikle de zengin içerikli sayfaların (listing, blog detay gibi) HTML'lerinin boyutu beni çok rahatsız ediyordu. Network sekmesine baktığımda 80-90KB'lık HTML'ler görüyordum ve "Bu kadar basit bir sayfa için bu boyut çok fazla" diye düşünüyordum. İşte o zaman Brotli'nin gücünü zorunlu kılmaya karar verdim.
Sorunun Kökeni: Gzip Yetersiz Kalıyordu
Nginx sunucumda varsayılan olarak gzip açıktı ve her şey "sıkıştırılıyor" gibiydi. Ancak biraz araştırınca gördüm ki, modern tarayıcıların neredeyse tamamı Brotli (br) sıkıştırmasını destekliyor ve bu algoritma, özellikle tekrarlanan metinlerde (HTML, CSS, JS) gzip'e göre %15-20 daha iyi sıkıştırma sağlıyor. Sorun şuydu: Sunucu yapılandırmam, eğer tarayıcı hem gzip hem br destekliyorsa, varsayılan olarak gzip'i gönderiyordu. Yani potansiyelin farkında değildik!
Çözüm: Nginx'de Brotli'yi Zorunlu Hale Getirmek
İlk adım, Nginx'in Brotli modülünün yüklü olduğundan emin olmaktı (`nginx -V` komutu ile kontrol edebilirsiniz). Ardından, site konfigürasyon dosyama (genelde `sites-available` içinde) aşağıdaki direktifleri ekledim. Amacım, text/html MIME tipi için Brotli'yi önceliklendirmek ve destekleniyorsa kesinlikle onu kullanmaktı.
Ancak benim asıl istediğim, HTML içeriği için Brotli'yi şart koşmaktı. Bunun için, HTML dosyalarını servis eden özel bir `location` bloğu oluşturdum.
Sonuçlar ve Performans Artışı
Yapılandırmayı kaydedip Nginx'i yeniden başlattıktan sonra, geliştirici konsolunun Network sekmesini açtığımda gördüğüm manzara beni çok mutlu etti. Daha önce 92KB olan bir HTML yanıtı, artık 43KB olarak geliyordu! Bu, neredeyse %50'den fazla bir küçülme demekti. "Content-Encoding" başlığında gzip yerine br yazdığını görmek ise ayrı bir keyifti.
Bu küçülme, özellikle mobil kullanıcılar ve düşük bant genişliğine sahip bölgeler için sayfa yükleme sürelerinde gözle görülür bir iyileşme sağladı. Lighthouse skorlarımda "Performans" alanında hemen bir artış gözlemledim.
Siz Ne Düşünüyorsunuz?
Bu yapılandırma, benim senaryomda harika çalıştı. Siz sunucu tarafında sıkıştırma için hangi yöntemleri kullanıyorsunuz? Cloudflare veya benzeri bir CDN kullanıyorsanız, Brotli ayarlarını doğrudan oradan da yönetebilirsiniz, bu konuda tecrübeleriniz var mı? Ya da farklı bir web sunucusu (Apache, Caddy) kullanıyorsanız, orada Brotli'yi nasıl zorunlu kıldınız? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Sorunun Kökeni: Gzip Yetersiz KalıyorduNginx sunucumda varsayılan olarak gzip açıktı ve her şey "sıkıştırılıyor" gibiydi. Ancak biraz araştırınca gördüm ki, modern tarayıcıların neredeyse tamamı Brotli (br) sıkıştırmasını destekliyor ve bu algoritma, özellikle tekrarlanan metinlerde (HTML, CSS, JS) gzip'e göre %15-20 daha iyi sıkıştırma sağlıyor. Sorun şuydu: Sunucu yapılandırmam, eğer tarayıcı hem gzip hem br destekliyorsa, varsayılan olarak gzip'i gönderiyordu. Yani potansiyelin farkında değildik!
Çözüm: Nginx'de Brotli'yi Zorunlu Hale Getirmekİlk adım, Nginx'in Brotli modülünün yüklü olduğundan emin olmaktı (`nginx -V` komutu ile kontrol edebilirsiniz). Ardından, site konfigürasyon dosyama (genelde `sites-available` içinde) aşağıdaki direktifleri ekledim. Amacım, text/html MIME tipi için Brotli'yi önceliklendirmek ve destekleniyorsa kesinlikle onu kullanmaktı.
NGINX:
brotli on;
brotli_comp_level 6;
brotli_static on;
brotli_types text/plain text/css text/xml application/javascript application/x-javascript application/xml application/xml+rss application/json application/ld+json image/svg+xml text/html;
# Gzip'i de açık tutuyoruz, Brotli desteklemeyen eski istemciler için
gzip on;
gzip_vary on;
# ÖNEMLİ: Eğer istemci Brotli'yi destekliyorsa, Gzip yerine Brotli kullan.
map $http_accept_encoding $compression_type {
default gzip;
"~br" br;
}
# Bu map'i server bloğunuzda kullanabilirsiniz.
# Ana server veya location bloğunuzda aşağıdaki gibi bir kontrol ekleyebilirsiniz:
# add_header Vary Accept-Encoding;
# Bu header, önbellekleme için önemli.Ancak benim asıl istediğim, HTML içeriği için Brotli'yi şart koşmaktı. Bunun için, HTML dosyalarını servis eden özel bir `location` bloğu oluşturdum.
Sonuçlar ve Performans ArtışıYapılandırmayı kaydedip Nginx'i yeniden başlattıktan sonra, geliştirici konsolunun Network sekmesini açtığımda gördüğüm manzara beni çok mutlu etti. Daha önce 92KB olan bir HTML yanıtı, artık 43KB olarak geliyordu! Bu, neredeyse %50'den fazla bir küçülme demekti. "Content-Encoding" başlığında gzip yerine br yazdığını görmek ise ayrı bir keyifti.
Bu küçülme, özellikle mobil kullanıcılar ve düşük bant genişliğine sahip bölgeler için sayfa yükleme sürelerinde gözle görülür bir iyileşme sağladı. Lighthouse skorlarımda "Performans" alanında hemen bir artış gözlemledim.
Siz Ne Düşünüyorsunuz?Bu yapılandırma, benim senaryomda harika çalıştı. Siz sunucu tarafında sıkıştırma için hangi yöntemleri kullanıyorsunuz? Cloudflare veya benzeri bir CDN kullanıyorsanız, Brotli ayarlarını doğrudan oradan da yönetebilirsiniz, bu konuda tecrübeleriniz var mı? Ya da farklı bir web sunucusu (Apache, Caddy) kullanıyorsanız, orada Brotli'yi nasıl zorunlu kıldınız? Yorumlarda deneyimlerinizi paylaşın, tartışalım!