Site TTFB'si Yükseldi ve Dosyalar Hâlâ Ağır
Siteyi PageSpeed Insights'ta kontrol ettiniz ve "metin sıkıştırma etkin değil" diyor. Ya da TTFB'yi ölçtünüz ve sayfa içeriğinde neredeyse hiç görsel olmamasına rağmen 1.2 saniye değerini görüyorsunuz. Aklınıza gelen ilk şey Gzip'i etkinleştirmek. Ancak daha yeni bir sürüm olan Brotli de var. Hangisini etkinleştirmelisiniz?
Kısa cevap: Sunucunuz izin veriyorsa Brotli. Ancak bu cevabın koşulları ve maliyeti var. Bu makalede, her ikisini nerede ve nasıl etkinleştireceğinizi, her birinden hangi rakamları beklemeniz gerektiğini ve bu işlemin nerede ters etki yarattığını anlatıyorum.
Gzip ve Brotli'nin Gerçek Farkı Rakamlarda, Sloganlarda Değil
Brotli, Google'ın 2015'te yayınladığı bir algoritmadır. Gzip daha eskidir ve hâlâ web'in varsayılan standardıdır. Temel fark, sıkıştırma oranı ve CPU tüketimidir.
Gerçek bir HTML dosyasında (örneğin, 85 kilobayt ham boyutunda bir haber sitesinin ana sayfası), rakamlar genellikle şöyledir:
- Gzip seviye 6 (varsayılan): yaklaşık 22 ila 28 kilobayt — yani %67 ila %74 boyut azalması
- Brotli seviye 5: yaklaşık 18 ila 21 kilobayt — yani %75 ila %79 boyut azalması
- Brotli seviye 11 (maksimum): yaklaşık 16 ila 18 kilobayt, ancak sıkıştırma süresi Gzip'ten 10 ila 20 kat daha uzun sürebilir
Gzip ve Brotli arasındaki %5 ila %8'lik fark az gibi görünebilir. 40 kilobaytlık bir CSS dosyası için bu, 2 ila 3 kilobayt tasarruf anlamına gelir. Ancak 2 megabayt veri içeren bir JSON dosyası için fark 150 ila 200 kilobayta ulaşır. Aylık 50 gigabayt trafikte bu, birkaç gigabayt daha az bant genişliği demektir.
Önemli not: Brotli'nin küçük dosyalarda (1 kilobaytın altında) pratikte bir üstünlüğü yoktur. Hatta bazen Gzip'ten daha büyük çıktı üretebilir. Yani sitenizin hafif sayfaları varsa, bu optimizasyon öncelik listesinin başında değildir.
CPU Maliyetini Hafife Almayın
Brotli seviye 11, her dosya için 5 ila 20 milisaniye CPU süresi tüketebilir. Üzerinde 200 sitenin olduğu paylaşımlı bir sunucuda bu rakam birikir. İşte burada hata yapılıyor: Seviye 11'i tüm dosyalarda etkinleştirip sonra sunucu CPU'sunun neden %90 olduğuna şaşırıyorlar.
Çözüm: Sıkıştırmayı bir kez yapın ve sonucu önbelleğe alın. ngx_brotli modülüyle Nginx kullanıyorsanız, seviye 5'i ayarlayın ve sıkıştırılmış önbelleği etkinleştirin. Statik dosyaları önceden brotli -q 11 komutuyla sıkıştırdıysanız, seviye 11 sorun değildir çünkü bu yalnızca bir kez yapılır.
Nginx Üzerinde Etkinleştirme; En Fazla Kontrole Sahip Olduğunuz Yer
Nginx varsayılan olarak Gzip'e sahiptir ancak Brotli'yi ayrı bir modül olarak kurmanız gerekir. Debian ve Ubuntu'da nginx-extras paketi ngx_brotli'yi içerir. Diğer dağıtımlarda kaynak depodan derlemeniz gerekir.
http veya server bloğunda Gzip için:
gzip on;
gzip_comp_level 6;
gzip_min_length 1024;
gzip_types text/plain text/css application/json application/javascript application/xml image/svg+xml;
gzip_vary on;
Brotli için, modülü kurduktan sonra:
brotli on;
brotli_comp_level 5;
brotli_min_length 1024;
brotli_types text/plain text/css application/json application/javascript application/xml image/svg+xml;
Ayrıca brotli_static on; ekleyebileceğinizi unutmayın; böylece Nginx, .br uzantılı önceden sıkıştırılmış dosyaları doğrudan sunar. Bu, CPU maliyetini sıfıra indirir.
İnce bir nokta: Her iki modül de etkinse, Nginx tarayıcının Accept-Encoding başlığına göre karar verir. Modern tarayıcılar (Chrome 50 ve üzeri, Firefox 44 ve üzeri, Safari 11 ve üzeri) Brotli'yi destekler. Diğerleri Gzip'e düşer. Yani her ikisini de etkinleştirmek sorun değildir, yeter ki sıralamayı doğru yapın.
Apache ve cPanel Üzerinde Etkinleştirme
Apache, mod_deflate modülüyle çalışır. cPanel'de bu modül genellikle etkindir ve yalnızca .htaccess dosyasına kuralları yazmanız gerekir:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json application/javascript application/xml image/svg+xml
DeflateCompressionLevel 6
</IfModule>
Sorun şu: Apache'nin varsayılan olarak Brotli'si yoktur. mod_brotli modülünün ayrıca derlenmesi gerekir ve paylaşımlı hostingde genellikle etkin değildir. Paylaşımlı Linux hosting kullanıyorsanız, önce mod_brotli'nin yüklenen modüller listesinde olup olmadığını kontrol edin:
httpd -M | grep brotli
Çıktı boşsa, yalnızca Gzip'iniz var demektir. Bu kötü değildir. Seviye 6'daki Gzip, sitelerin %95'i için yeterlidir ve son kullanıcı için Brotli'den farkı, büyük JSON veya JavaScript dosyalarınız yoksa hissedilmez.
cPanel'de, Brotli modülü etkinse, .htaccess dosyasına şunları yazabilirsiniz:
<IfModule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css application/json application/javascript image/svg+xml
BrotliCompressionQuality 5
</IfModule>
Ancak paylaşımlı hosting kullanıyorsanız ve bu modül etkin değilse, destek ekibinden kurulum talep etmek genellikle sonuçsuz kalır. Bu durumda en iyisi, statik dosyaları önceden sıkıştırmak ve Content-Encoding: br başlığıyla sunmaktır. Linux'taki brotli gibi araçlar bunu yapar:
brotli -q 11 -f style.css -o style.css.br
Ardından .htaccess dosyasına, .br dosyası varsa ve tarayıcı destekliyorsa onu sunacak yeniden yazma kuralları ekleyin.
Hangisini Seçmeli? Pratik Bir Karar
Sunucu üzerinde tam kontrole sahipseniz (özel sunucu veya VPS), Brotli'yi seviye 5 ile etkinleştirin ve Gzip'i yedek olarak tutun. Bu kombinasyon, sıkıştırma oranı ile CPU maliyeti arasındaki en iyi dengeyi sağlar.
Paylaşımlı hostingdeyseniz ve yalnızca Gzip mevcutsa, onu seviye 6 ile etkinleştirin ve diğer optimizasyonlara geçin. Sıkıştırma, hız faktörlerinden yalnızca biridir. WebP görselleri, tarayıcı önbelleği ve kullanılmayan JavaScript'lerin kaldırılması genellikle daha büyük etkiye sahiptir.
Gzip'i Brotli'ye tercih etme koşulu: Sunucunuz zayıf bir CPU'ya sahipse (örneğin, 1 paylaşımlı çekirdek) ve yüksek trafik alıyorsa, Gzip daha güvenli bir seçimdir. Zayıf donanımda Brotli ile anlık sıkıştırma, TTFB'yi 100 ila 200 milisaniye artırabilir. Bu tam olarak çözmek istediğiniz şeydir.
Bir diğer not: Siteniz bir CDN arkasındaysa, genellikle sıkıştırma işini CDN yapar ve ana sunucu ayarları etkisiz kalır. Cloudflare'da Brotli seçeneğini Speed bölümünden etkinleştirin ve CDN'nin yönetmesine izin verin. Bu durumda Nginx veya Apache ayarları yalnızca doğrudan sunucuya gelen istekler için geçerlidir.
İşte Burada Hata Yapıyorlar: Önceden Sıkıştırılmış Dosyaları Tekrar Sıkıştırmak
Gördüğüm en yaygın hata: Birisi PNG veya JPEG dosyalarını da gzip_types veya brotli_types listesine ekliyor. Bu işlem yalnızca boyutu küçültmekle kalmaz, CPU'yu da boşa harcar ve bazı durumlarda dosyayı büyütür. PNG ve JPEG görselleri zaten sıkıştırılmıştır ve Gzip veya Brotli ile yeniden sıkıştırma genellikle %0 ila %2 boyut azaltırken, 5 ila 15 milisaniye CPU tüketir.
Bu hatanın belirtisi: Sunucu günlüğüne bakın. .png isteklerinin Content-Encoding: gzip başlığıyla yanıtlandığını görüyorsanız, bu hatayı yapmışsınız demektir. Metin dosyalarını sıkıştırın: HTML, CSS, JavaScript, JSON, XML, SVG, woff2 fontları (kendileri zaten sıkıştırılmış olsa da). Görseller değil, video değil, PDF değil.
İkinci hata: Küçük yanıtlarda sıkıştırmayı etkinleştiriyorsunuz. gzip_min_length 0 veya bu satırın silinmesi, 200 baytlık yanıtların bile sıkıştırılacağı anlamına gelir. Bu yanıtlar için CPU maliyeti, bant genişliği tasarrufundan daha fazladır. En az 1024 bayt ayarlayın.
Ölçüm; Değişiklikten Önce ve Sonra
Herhangi bir değişiklikten önce mevcut durumu ölçün. İki basit araç:
- Komut satırı:
curl -H "Accept-Encoding: br" -o /dev/null -s -w "size_download: %{size_download}\ntime_total: %{time_total}\n" https://example.com/ - Tarayıcı: DevTools'ta Network sekmesinde Size sütununa bakın. İlk sayı aktarılan boyut, ikinci sayı ham boyuttur. Eşitse, sıkıştırma çalışmıyor demektir.
Ayrıca yanıt başlıklarını kontrol etmek için ücretsiz webmaster araçlarını kullanabilirsiniz. Yanıtta Content-Encoding: br veya Content-Encoding: gzip başlığı bulunmalıdır. Hiçbiri yoksa, ayarlarınız uygulanmamıştır.
Değişiklikten sonra tekrar ölçün. TTFB 50 milisaniyeden fazla arttıysa ve boyut yalnızca %5 azaldıysa, sıkıştırma seviyesini düşürün veya sıkıştırılmış önbelleği etkinleştirin.
Sıkıştırmanın Diğer Optimizasyonlarla İlişkisi
Metin sıkıştırma, optimizasyon katmanlarından yalnızca biridir. Siteniz yavaşsa, önce sorunun nerede olduğunu anlayın. Sıkıştırmanın TTFB üzerinde etkisi yoktur. Yüksek TTFB genellikle sunucunun geç yanıt vermesinden, ağır veritabanı sorgularından veya DNS'ten kaynaklanır. TTFB'niz 500 milisaniyenin üzerindeyse, sıkıştırma durumu iyileştirmez.
Sistematik sorun giderme için yavaş site için eksiksiz sorun giderme rehberini okuyun. İşlem sırasını belirler: önce DNS, sonra TTFB, sonra yanıt boyutu, sonra tarayıcı işleme.
Site paylaşımlı hostingdeyse ve kaynak kısıtlamalarınız varsa, belki de özel sunucuya geçme zamanı gelmiştir. Yüksek seviyeli Brotli sıkıştırması, yalnızca sitenizin olduğu bir sunucuda, başkalarının CPU tüketiminden endişe etmeden yapılabilir.
Sıkça Sorulan Sorular
Brotli, Gzip'e kıyasla site hızında hissedilir bir fark yaratır mı?
Son kullanıcı için fark, sitenin metin dosyalarının boyutuna bağlı olarak genellikle %5 ila %15 arasında yükleme süresidir. Yüksek hızlı bağlantılarda bu fark hissedilmez. 3G bağlantıda veya yüksek gecikmeli internette fark daha belirgindir. Sitenizde büyük JSON veya JavaScript dosyaları varsa, Brotli buna değer.
Sitemin sıkıştırmasının etkin olup olmadığını nasıl anlarım?
curl -I -H "Accept-Encoding: gzip, br" https://example.com/ komutuyla yanıt başlıklarını görün. Çıktıda Content-Encoding: br veya Content-Encoding: gzip varsa, sıkıştırma etkindir. GTmetrix gibi çevrimiçi araçlar da bunu gösterir.
Gzip ve Brotli'yi aynı anda etkinleştirmek sorun yaratır mı?
Hayır. Sunucu, tarayıcının Accept-Encoding başlığına göre en iyi seçeneği seçer. Modern tarayıcılar Brotli'yi tercih eder ve eski tarayıcılar Gzip'e düşer. Yalnızca her iki modülün de doğru kurulduğundan ve ayarların çakışmadığından emin olun.
Hangi dosyalarda sıkıştırmayı etkinleştirmemeliyim?
Görsellerde (JPEG, PNG, GIF), videoda, ses dosyalarında ve PDF'de. Bu dosyalar zaten sıkıştırılmıştır ve yeniden sıkıştırma yalnızca CPU tüketir. Sıkıştırmayı metin dosyalarıyla sınırlayın: HTML, CSS, JavaScript, JSON, XML ve SVG.
Yorumlar 0
Henüz yorum yok — ilk siz olun!