Browser Caching Nedir ve Neden Önemlidir?
Browser caching, bir web sayfasının statik kaynaklarını (CSS, JS, resim, font vb.) ziyaretçinin tarayıcısında geçici olarak saklamasını sağlayan bir tekniktir. Kullanıcı aynı sayfayı tekrar ziyaret ettiğinde, sunucuya her bir dosya için yeni bir istek gönderilmez; tarayıcı önceden kaydedilmiş dosyayı yerel olarak sunar. Bu sayede ortalama sayfa yükleme süresi %40‑%60’a kadar azalır ve bounce rate düşer.
Cache mekanizması iki temel başlık üzerinden kontrol edilir: Cache-Control ve Expires. İlk başlık modern tarayıcılarda tercih edilirken, Expires eski tarayıcılar için geriye dönük uyumluluk sağlar. Yanlış yapılandırılmış cache, hem güncel olmayan içerik gösterilmesine hem de gereksiz bant genişliği tüketimine yol açar; bu da SEO ve maliyet açısından ciddi bir dezavantajdır.
Cache‑Control ve Expires Başlıkları Nasıl Çalışır?
Cache-Control başlığı, tarayıcıya dosyanın ne kadar süreyle önbellekte tutulacağını ve hangi koşullarda yeniden doğrulanacağını söyler. En yaygın direktifler şunlardır:
- public: Dosyanın hem tarayıcı hem de ara sunucular (CDN) tarafından cachelenebileceğini belirtir.
- private: Sadece son kullanıcının tarayıcısında cachelenir, proxy'ler atlanır.
- max-age=seconds: Dosyanın kaç saniye boyunca geçerli olacağını tanımlar.
- must-revalidate: Süre dolduğunda sunucuya yeniden doğrulama yapılmasını zorunlu kılar.
Expires başlığı ise sabit bir tarih‑zaman değeri içerir. Tarayıcı, bu tarihe kadar dosyayı saklar; tarih geçtiğinde yeni bir istek yapılır. Örneğin, “Expires: Wed, 21 Oct 2026 07:28:00 GMT” gibi bir değer, dosyanın 2026 yılı sonuna kadar cachelenmesini sağlar. Cache-Control ve Expires birlikte kullanıldığında, modern tarayıcı Cache-Control’u, eski tarayıcılar ise Expires’ı dikkate alır.
Apache ve Nginx’te Browser Caching Nasıl Ayarlanır?
Çoğu web sitesi Apache veya Nginx üzerinde çalışır. Her iki sunucuda da .htaccess (Apache) ya da server block (Nginx) dosyaları üzerinden cache başlıkları eklenebilir.
Apache örneği: .htaccess dosyasına aşağıdaki kuralları ekleyerek CSS, JS ve resim dosyaları için 1 yıl cache süresi tanımlayabilirsiniz.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresDefault "access plus 2 weeks"
</IfModule>
<IfModule mod_headers.c>
Header set Cache-Control "public, max-age=31536000"
</IfModule>
Nginx örneği: nginx.conf içinde location bloklarıyla aynı ayarları yapabilirsiniz.
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000";
}
Bu yapılandırmalar, VDS sunucu paketleri gibi paylaşımlı olmayan ortamlarda daha kontrollü bir performans artışı sağlar. Eğer WordPress hosting kullanıyorsanız, eklentiler üzerinden de aynı ayarları otomatikleştirebilirsiniz.
ETag Başlığı ve Its Role in Conditional Requests
ETag (Entity Tag), bir dosyanın benzersiz bir kimliğini temsil eder. Sunucu, dosyanın içeriği değiştiğinde yeni bir ETag üretir. Tarayıcı, aynı dosyayı tekrar talep ettiğinde If-None-Match başlığıyla mevcut ETag’i gönderir; sunucu eşleşme varsa 304 Not Modified yanıtı döner, böylece dosya tekrar indirilmez.
ETag’ın avantajı, max-age süresi dolmadan da dosyanın güncel olup olmadığını kontrol etmesidir. Ancak, paylaşımlı hosting ortamlarında her sunucu farklı bir ETag üretebilir; bu da gereksiz 304 yanıtlarına yol açabilir. Bu yüzden fiziksel sunucu (dedicated server) kullanıyorsanız ETag’ı etkin bırakmak, web hosting paketleri gibi ortak ortamlarda ise ETag off; ile devre dışı bırakmak daha akıllıca olabilir.
Browser Caching’in SEO ve Core Web Vitals Üzerindeki Etkisi
Google, sayfa hızı ve kullanıcı deneyimini sıralama faktörü olarak kullanıyor. Core Web Vitals içinde LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift) gibi metrikler, cache sayesinde doğrudan iyileşir. Özellikle Cache-Control: max-age ayarları, LCP’yi 2 saniyenin altına çekebilir.
Bir e‑ticaret sitesinde %30‑%40 daha hızlı yükleme, dönüşüm oranlarını %15‑%20 artırabilir. Bu da e-ticaret hosting seçiminde cache yapılandırmasının kritik bir kriter olduğunu gösterir. Aynı zamanda, Google PageSpeed Insights raporunda “Leverage browser caching” uyarısı alıyorsanız, hemen .htaccess ya da nginx.conf dosyalarına ilgili satırları eklemelisiniz.
Adım Adım Browser Caching Nasıl Yapılandırılır?
- Sunucu Tipinizi Belirleyin: Apache mi, Nginx mi? VDS veya dedicated kullanıyorsanız root erişiminiz var mı?
- Modülleri Aktif Edin: Apache için
mod_expiresvemod_headersaktif olmalı. Nginx’tengx_http_headers_modulevarsayılan olarak gelir. - Dosya Türlerini Sınıflandırın: Görseller, CSS, JS, font gibi gruplara ayırın. Her grup için uygun
max-agebelirleyin (örnek: görseller 1 yıl, CSS/JS 1 ay). - .htaccess veya server block dosyasına ekleyin: Yukarıdaki örnek kodları kopyalayıp özelleştirin.
- ETag Ayarını Kontrol Edin: Gerekirse
FileETag None(Apache) ya daetag off;(Nginx) ile devre dışı bırakın. - Cache Testi Yapın: Google PageSpeed Insights veya
curl -I https://example.com/style.csskomutu ile başlıkları kontrol edin. - Performans İzleme: 30‑günlük raporlarla
Cache Hit Ratio’yu takip edin; %80’in üzeri ideal kabul edilir.
Bu adımları uyguladığınızda, sitenizin ortalama yanıt süresi 1,2 saniyeden 0,5 saniyeye düşebilir. Ayrıca, kurumsal hosting paketlerinde sunulan CDN entegrasyonuyla cache katmanını bir adım daha ileri taşıyabilirsiniz.
Avantaj‑Dezavantaj Karşılaştırma Tablosu
| Özellik | Avantaj | Dezavantaj |
|---|---|---|
| Cache‑Control (max‑age) | Modern tarayıcılarda kesin kontrol, %60‑%70 hız artışı | Yanlış ayar güncel içerik gösterme riski |
| Expires Header | Eski tarayıcılarda uyumluluk | Sabit tarih, dinamik içeriklerde esneklik yok |
| ETag | Conditional request sayesinde bant tasarrufu | Paylaşımlı ortamda tutarsızlık, ek işlem süresi |
| CDN Entegrasyonu | Coğrafi yakınlık, global cache | Ek maliyet, yapılandırma karmaşıklığı |
Sıkça Sorulan Sorular
Browser caching ne kadar süreyle etkin olmalı?
Statik dosyalar (görseller, fontlar) için 1‑2 yıl, CSS/JS gibi sık güncellenen dosyalar için 1‑3 ay önerilir. Daha kısa bir süre seçmek, içerik güncelliğini korurken cache hit oranını biraz düşürebilir.
Cache‑Control ve Expires aynı anda kullanılabilir mi?
Evet. Modern tarayıcılar Cache-Control’ı, eski tarayıcılar ise Expires’ı dikkate alır. İkisini birlikte eklemek, tüm kullanıcı segmentlerinde tutarlı bir deneyim sağlar.
ETag’ı tamamen kapatmak güvenli mi?
Paylaşımlı hosting ortamlarında ETag tutarsızlıkları nedeniyle kapatmak önerilir. Dedicated veya VDS gibi kontrolünüzdeki sunucularda ise ETag açık bırakmak, özellikle büyük dosyalar için bant tasarrufu sağlar.
Cache yapılandırması SEO sıralamamı etkiler mi?
Doğrudan bir sıralama faktörü olmasa da, sayfa hızı Core Web Vitals içinde yer alır ve Google bu metrikleri sıralama algoritmasına dahil eder. İyi bir cache yapılandırması, LCP ve FID değerlerini iyileştirerek dolaylı olarak SEO performansını artırır.
Sonuç ve Bir Sonraki Adımınız
Browser caching, düşük maliyetli ama yüksek etkili bir performans artırma tekniğidir. Doğru Cache-Control, Expires ve ETag ayarlarıyla sitenizin yanıt süresini %60’a kadar düşürebilir, SEO puanınızı yükseltebilir ve kullanıcı memnuniyetini artırabilirsiniz. Şimdi, kullandığınız sunucu tipine göre yukarıdaki adımları uygulayın, ardından SEO hosting paketimizdeki CDN entegrasyonunu test edin. Performans ölçümleriniz istediğiniz seviyeye ulaşana kadar ayarları ince ayar yaparak optimize edin.