Tarayıcı önbelleği: Cache-Control ve ETag uygulaması

Her yanıt için uygun önbellek politikasını seçin

Tarayıcı önbelleği tekrar aktarımları azaltabilir; ancak hash içeren bir CSS dosyası ile hesap sayfası aynı politikayı kullanmamalıdır. Önce yanıtın türünü, güncellik ihtiyacını ve kişisel veri içerip içermediğini belirleyin. Ayarı ilgili yola uygulayın ve tarayıcıya ulaşan gerçek yanıtı kontrol edin.

Kararı değiştiren Cache-Control yönergeleri

• max-age, saniye cinsinden tazelik süresidir.
• s-maxage, paylaşılan önbelleğin süresini belirler ve orada max-age değerinin önüne geçer. Tarayıcı s-maxage değerini yok sayar; bu nedenle max-age değerini bırakmaz.
• no-cache, saklamaya izin verir fakat yeniden kullanımdan önce doğrulama ister.
• no-store, yanıtın HTTP önbelleğinde saklanmamasını ister.
• private, paylaşılan önbellekte saklamayı engeller; tarayıcı önbelleğini tamamen kapatmaz.

Ayrıntılar için MDN Cache-Control başvurusuna bakın. Private tek başına hassas verinin kullanıcının cihazında saklanmasını engellemez.

Farklı amaçlar için üç örnek

# İçeriği bu URL'de değişmeyen genel dosya: app.a81c9.css
Cache-Control: public, max-age=31536000, immutable

# Yeniden kullanılmadan önce kontrol edilecek genel HTML
Cache-Control: no-cache

# HTTP önbelleğinde tutulmaması gereken hesap veya sipariş yanıtı
Cache-Control: private, no-store

Bunlar tüm sitelere uygulanacak tek bir ayar değildir. Immutable, yanıt tazeyken değişmeyeceğini belirtir; süresi biten yanıtı sonsuza kadar doğrulamadan kullanmak anlamına gelmez. Dosya değiştiğinde URL de değişmeli ve CDN bu sürümü önbellek anahtarına katmalıdır.

Görseller ve fontlar da sürümleme gerektirir. Bir fontun nadiren değişmesi, değiştirilebilir URL için yıllık immutable politikasını haklı çıkarmaz. Oturuma özel HTML'yi public olarak önbelleğe almayın; CDN kullanmak kişisel veriyi ortak kullanıma uygun hale getirmez.

ETag ve 304 yanıtı

ETag bir yanıt sürümünü tanımlar. İstemci eski değeri If-None-Match ile gönderdiğinde ve sürüm değişmediğinde sunucu gövdesiz 304 döndürebilir. Yine de ağ üzerinden bir gidiş dönüş gerçekleşir. Last-Modified ve If-Modified-Since başka bir doğrulama yöntemidir; ETag her kaynak için zorunlu değildir.

Taze bir yanıt sunucuya başvurmadan bellek veya disk önbelleğinden kullanılabilir. “İkinci ziyarette 304, üçüncüde sıfır istek” şeklinde sabit bir sıra yoktur. Araçta 200 görmek de tek başına önbelleğin çalışmadığını göstermez; aktarılan baytları ve kaynağı inceleyin.

Tekrarlanabilir kontrol

curl -sS -D - -o /dev/null https://example.com/assets/app.a81c9.css
curl -sS -D - -o /dev/null -H 'If-None-Match: "ETAG-FROM-FIRST-RESPONSE"' https://example.com/assets/app.a81c9.css

Örnek URL'yi kendi dosyanızla değiştirin ve ilk yanıtın gerçek ETag değerini tırnaklarıyla birlikte ikinci komuta yazın. Bu GET istekleri başlıkları tutup gövdeyi atar; HEAD davranışının aynı olduğunu varsaymaz. Dosya değişmemiş ve sunucu koşullu isteği destekliyorsa 304 beklenir.

1. DevTools'ta Disable cache seçeneğini kapatıp ilk ziyareti kaydedin.
2. Aynı profille tekrar gezinin; aktarılan baytları, Age, Cache-Control ve memory/disk cache bilgilerini karşılaştırın.
3. Deneme dosyasını yeni URL ile yayımlayın ve HTML'nin yeni sürüme bağlandığını doğrulayın.
4. CDN ve origin farklı davranıyorsa kullanıcıya ulaşan son yanıtı esas alın.

Gizli mod önbelleği her durumda kapatmaz; normal profilden ayrı, oturum süresiyle sınırlı bir önbellek kullanır. Hard reload ve Disable cache test koşullarını değiştirir. Age başlığının olmaması veya sıfır olması, tarayıcı önbelleği hakkında tek başına yeterli değildir.

Yayımlama ve geri dönüş

Değişiklikten önce mevcut başlıkları ve bir örnek URL'yi kaydedin. Uzun önbelleği bilinen genel dosya yollarıyla sınırlandırın. Yeni dosyayı ona bağlanan HTML'den önce yayımlayın; önbellekteki eski sayfalar için önceki dosyaları bir süre tutun. Kişisel yanıt ortak önbellekten sunulduysa ilgili yolu önbellek dışında bırakın ve kayıtlı yanıtı temizleyin. Gelecekteki başlığı değiştirmek eski kopyayı silmez.

Önbelleğin çözemediği sorunlar

Yavaş HTML üretimi, ilk ziyarette font indirilmesi veya uzun JavaScript görevleri devam edebilir. Her site için garanti edilmiş bir iyileşme yüzdesi yoktur. Soğuk ve sıcak ziyaretleri, aktarılan baytları ve LCP'yi ayrı ölçün. Sonraki adım için yavaş site teşhisi ve gerçek kullanıcı performans ölçümü rehberlerini kullanın.