Tarayıcı Önbelleği: Yoğun Trafikli Siteler için Cache-Control ve ETag Rehberi

Siteniz düşündüğünüzden daha hızlı — sadece tarayıcı unuttu

Bir kullanıcı ofisten sitenizi ziyaret eder, sayfayı görür ve gider. Beş dakika sonra geri döner. Tarayıcısı istek gönderir, sunucunuz aynı dosyaları tekrar gönderir, aynı görselleri, aynı CSS'i, aynı JavaScript'i. Her şey tekrar. Kullanıcı hiçbir değişiklik görmez, ancak sunucunuz boşuna bant genişliği harcar ve kullanıcı da bekler.

Tarayıcı önbelleği tam olarak burada devreye girer. Sadece maliyet tasarrufu için değil, ikinci, üçüncü ve onuncu sayfanın kullanıcı için neredeyse anlık olması için.

Mesele şu ki, çoğu site yöneticisi önbellek başlıklarını yanlış yapılandırıyor. Ya da hiç yapılandırmıyor. Sonuç? İlk yüklemede 2.8 saniyede açılan ve ikinci yüklemede de 2.8 saniyede açılan bir site. Hiçbir ilerleme kaydetmiyorsunuz.

Bu makalede tam olarak hangi başlıkları göndermeniz gerektiğini, her biri için hangi değeri koymanız gerektiğini ve çoğu insanın nerede hata yaptığını anlatacağız.

Cache-Control: Gerçekten ihtiyacınız olan tek başlık

Cache-Control başlığı HTTP/1.1 ile tanıtıldı ve pratikte Expires ve Pragma gibi eski başlıkların yerini aldı. Sadece bir başlığı doğru yapacaksanız, bu olsun.

En basit hali şudur:

Cache-Control: public, max-age=86400

Bu şu anlama gelir: Bu dosyayı 86400 saniye (bir gün) önbellekte tutabilirsiniz. public, herkesin önbelleğe alabileceği anlamına gelir — kullanıcının tarayıcısı, proxy, CDN. Görseller, CSS ve JS gibi statik dosyalar için bu değer doğrudur.

max-age ve s-maxage farkı — her şeyin bozulduğu yer

Çoğu rehberin değinmediği yer burasıdır. max-age tarayıcıya ne kadar önbelleğe alacağını söyler. s-maxage ise ara sunuculara (proxy ve CDN) ne kadar önbelleğe alacaklarını söyler. Bu ikisi farklı olabilir.

Gerçek örnek: Her saat güncellenen bir HTML sayfanız var. Kullanıcının tarayıcısı bunu 3600 saniye önbelleğe alabilir, ancak CDN'iniz 600 saniyeden fazla tutmamalı çünkü sitenizin trafiği birden fazla sunucudan geçiyor ve daha hızlı yenilenmesi gerekiyor.

Cache-Control: public, max-age=3600, s-maxage=600

İşte burada hata yapıyorlar: Çoğu kişi s-maxage'in gerekli olmayan gelişmiş bir seçenek olduğunu düşünüyor. Sonra sitenin önüne bir CDN koyuyorlar ve değişikliklerin uygulanmadığını görüyorlar. Kullanıcılar sayfanın eski sürümünü görüyor ve siz CDN'in bozuk olduğunu düşünüyorsunuz. Hayır, sadece s-maxage'i ayarlamadınız.

Başka bir nokta: s-maxage belirlerseniz, max-age'i de mutlaka koyun. Bazı tarayıcılar s-maxage gördüklerinde max-age'i yok sayar ve varsayılan değeri kullanır. Sonuç? İstediğinizden çok daha kısa bir önbellek.

immutable: Gereksiz istekleri ortadan kaldıran bir kelime

Tarayıcı bir dosyayı önbelleğe aldığında ve max-age dolmadığında, sunucuya hiçbir istek göndermez. Ancak max-age dolduğunda ne olur?

Tarayıcı koşullu bir istek gönderir: "Bu dosyaya sahibim, değişti mi?" Sunucu "hayır" derse, tarayıcı önbelleği kullanır. Bu tam bir gidiş-dönüştür — her dosya için genellikle 50 ila 200 milisaniye.

Sürüm numaralı dosyalar için (ör. style.abc123.css) bu gidiş-dönüş tamamen gereksizdir. Çünkü dosya değişirse adı değişir ve tarayıcı zaten yeni bir istek gönderir. Peki neden kontrol etsin ki?

Cache-Control: public, max-age=31536000, immutable

Bir yıl önbellek ve tarayıcıya "kontrol bile etme" deyin. Sürüm numaralı statik dosyalar için en iyi durum budur.

Ancak burada hata yapıyorlar: immutable'ı sürüm numaralı olmayan dosyalara koyuyorlar. Örneğin style.css'i immutable ile önbelleğe alıyorlar ve sonra değiştiriyorlar. Kullanıcılar bir yıl boyunca eski sürümü görüyor. immutable yalnızca adında hash veya sürüm içeren dosyalar içindir. Bunu yapmıyorsanız, immutable kullanmayın.

ETag: Değişikliklerin akıllı denetçisi

ETag, bir dosyanın içeriği için benzersiz bir tanımlayıcıdır. Tarayıcı koşullu bir istek gönderdiğinde, önceki ETag değeriyle birlikte If-None-Match başlığını gönderir. Sunucu karşılaştırır ve bir fark yoksa 304 Not Modified koduyla yanıt verir — gövde olmadan, bant genişliği harcamadan.

Nginx'te varsayılan olarak etkindir. Apache'de de genellikle etkindir. Ancak siteniz paylaşımlı bir sunucudaysa ve barındırma sağlayıcınız bunu devre dışı bıraktıysa, kontrol etmelisiniz.

Apache'de etkinleştirmek için:

FileETag MTime Size

Bu, ETag'in dosyanın değişiklik zamanına ve boyutuna göre oluşturulacağı anlamına gelir. Basit ve etkili.

Nginx'te genellikle ayar yapmaya gerek yoktur, ancak emin olmak isterseniz:

etag on;

Önemli bir nokta: Birden fazla sunucunuz varsa (örneğin iki sunuculu yük dengeleyici), Apache'nin varsayılan ETag'i dosyanın inode'unu da içerir. Bu değer sunucular arasında farklılık gösterir ve tarayıcının her seferinde dosyayı yeniden indirmesine neden olur. Çözüm: FileETag MTime Size ayarını yapın ve inode'u kaldırın.

Sürüm numaralı ad: Statik dosyalar için tek doğru yol

Dosyanız style.css ise ve onu değiştirirseniz, önbelleğe almış tarayıcılar eski sürümü alır. max-age'i çok kısa tutmadığınız sürece — bu da önbelleğin neredeyse işe yaramaz olduğu anlamına gelir.

Standart çözüm: Dosya adını değiştirin. style.abc123.css veya style.v2.css. İçerik her değiştiğinde ad değişir. Tarayıcı dosyayı yeni bir kaynak olarak görür ve indirir. Eski dosya süresi dolana kadar önbellekte kalır, ancak kimse onu kullanmaz.

Webpack ve Vite gibi modern araçlar bunu otomatik yapar. WordPress kullanıyorsanız, WP Rocket gibi eklentiler bunu yapar. Manuel çalışıyorsanız, basit bir kural: Dosyayı her değiştirdiğinizde adını da değiştirin.

Burada hata yapıyorlar: Dosya adını değiştiriyorlar ancak HTML içindeki bağlantıları güncellemiyorlar. Ya da daha kötüsü, eski önbelleği sunan bir CDN kullanıyorlar. Dosya adını değiştirdikten sonra her zaman HTML sayfasını da güncelleyin ve CDN önbelleğini temizleyin.

Her dosya türü için önerilen değerler

Dikkat edin: no-cache "önbelleğe alma" anlamına gelmez. "Kullanmadan önce kontrol et" anlamına gelir. Bu önemli bir farktır. Gerçekten önbelleğe alınmamasını istiyorsanız, no-store koymalısınız — bu yalnızca banka bilgileri gibi hassas veriler için önerilir.

Başlıkları barındırma hesabınızda nasıl ayarlarsınız

Apache'de, .htaccess dosyasında:

<IfModule mod_headers.c>
  <FilesMatch "\.(css|js|jpg|jpeg|png|gif|svg|woff2)$">
    Header set Cache-Control "public, max-age=86400"
  </FilesMatch>
</IfModule>

Nginx'te, location bloğunda:

location ~* \.(css|js|jpg|jpeg|png|gif|svg|woff2)$ {
    expires 1d;
    add_header Cache-Control "public, max-age=86400";
}

ServerNet Linux hosting kullanıyorsanız, dosya yöneticisi panelinden .htaccess dosyasını doğrudan düzenleyebilirsiniz. SSH erişiminiz varsa, daha da basittir.

Ayar yaptıktan sonra, ücretsiz webmaster araçları gibi araçlarla başlıkların doğru gönderildiğini mutlaka kontrol edin. Yaygın bir hata: Başlığı ayarlıyorsunuz ancak Apache'de mod_headers modülü etkin değil. Sonuç? Hiçbir şey olmuyor ve siz ayarların doğru olduğunu sanıyorsunuz.

Gerçek bir senaryo: Her şey doğru olduğunda ne olur

50 statik dosyalı bir sayfanız olduğunu varsayalım. Önbellek olmadan, her ziyarette sunucuya 50 istek gider. Doğru önbellekle, ilk seferde 50 istek, ikinci seferde 50 koşullu istek (304 ile), üçüncü seferde 0 istek.

Gerçek rakam: Doğru önbellekle, ikinci sayfanın yükleme süresi genellikle ilk yüklemeden %50 ila %70 daha kısadır. İlk yükleme 3 saniyeyse, ikinci yükleme 1 saniyenin altında olmalıdır. Bu olmuyorsa, ya önbellek ayarlanmamıştır ya da bir şeyler yanlıştır.

Teşhis için tarayıcının DevTools'undaki Network sekmesini kullanın. Size sütununa bakın. 304 Not Modified görüyorsanız, önbellek çalışıyor demektir. 200 OK ve tam boyut görüyorsanız, önbellek çalışmıyor demektir.

Siteniz hâlâ yavaşsa ve önbellek doğruysa, sorun başka yerdedir. Yavaş site teşhis rehberini okuyun — DNS'ten veritabanına kadar.

Sıkça Sorulan Sorular

Tarayıcı önbelleği ile sunucu önbelleği arasındaki fark nedir?

Tarayıcı önbelleği kullanıcının cihazında saklanır ve yalnızca o kullanıcı için çalışır. Sunucu önbelleği (Varnish veya Redis gibi) sunucudadır ve tüm kullanıcılar için çalışır. Bu ikisi birbirini tamamlar, birbirinin yerine geçmez.

Tarayıcı önbelleği sunucunun bant genişliğini azaltır ve tekrar eden kullanıcı için hızı artırır. Sunucu önbelleği veritabanı yükünü azaltır ve herkes için hızı artırır. Yalnızca birini ayarlayabiliyorsanız, tarayıcı önbelleğini seçin — daha basit ve daha etkilidir.

Cache-Control ayarlanmasına rağmen dosyalar neden hâlâ indiriliyor?

Üç yaygın nedeni vardır. Birincisi: Başlığı yanlış dosyaya ayarladınız — örneğin CSS yerine HTML'e. İkincisi: Tarayıcı önbelleği devre dışı bırakan gizli (Incognito) modda. Üçüncüsü: Başka bir taraftan Pragma: no-cache veya Cache-Control: no-store gibi başka bir başlık gönderiliyor ve ayarınızı geçersiz kılıyor.

Tarayıcının DevTools'u, Network sekmesi ile yanıt başlıklarını inceleyin. Tam olarak hangi Cache-Control değerinin gönderildiğini görün. Değer doğru değilse, sorun tarayıcıda değil ayarlarınızdadır.

ETag tüm dosyalar için gerekli mi?

Sürüm numaralı ad ve immutable ile önbelleğe alınan statik dosyalar için ETag işe yaramaz — çünkü tarayıcı zaten kontrol etmez. Ancak no-cache olan HTML dosyaları için ETag gereklidir, böylece tarayıcı içeriğin değişip değişmediğini anlayabilir.

ETag'i devre dışı bırakırsanız, tarayıcılar genellikle son değişiklik tarihini (Last-Modified) kullanır. Bu da çalışır, ancak daha az hassastır — özellikle dosya aynı saniye içinde değişirse.

Tarayıcı önbelleği site hızını ne kadar artırabilir?

Siteyi daha önce açmış kullanıcılar için genellikle yükleme süresinde %50 ila %70 azalma. Yeni kullanıcı için hiçbir etkisi yoktur. Bu yüzden tarayıcı önbelleği sunucu önbelleğiyle birleştirilir — biri yeni kullanıcı için, diğeri tekrar eden kullanıcı için.

Siteniz çok içerikliyse ve kullanıcılar sık sık geri dönüyorsa, tarayıcı önbelleği en büyük hızlı kazancınızdır. Birkaç satır ayar, hiçbir donanım maliyeti olmadan.