Web Sitesinde Cache Sorunu Nasıl Çözülür? Önbellek Temizleme Rehberi

Web sitesinde değişiklik yaptığınız halde eski CSS, JavaScript, görsel veya sayfa içeriği görünmeye devam ediyorsa cache sorunu yaşıyor olabilirsiniz. Bunun nedeni tarayıcı önbelleği olabileceği gibi CDN, proxy, Service Worker veya sunucu tarafındaki cache sistemi de olabilir.

Cache sorununu çözmek için öncelikle eski içeriğin hangi katmandan geldiğini belirlemek gerekir. Her cache probleminde bütün önbelleği silmek yerine kaynağı tespit etmek daha sağlıklı bir yöntemdir.

Cache nedir?

Cache yani önbellek, daha önce kullanılan verilerin geçici olarak saklanmasını sağlar.

Örneğin tarayıcı:

- CSS dosyalarını

- JavaScript dosyalarını

- Görselleri

- Fontları

saklayabilir.

Kullanıcı aynı siteye tekrar girdiğinde bu dosyaların tamamını yeniden indirmek yerine önbellekteki sürümler kullanılabilir.

Bu yöntem doğru yapılandırıldığında web sitesinin daha hızlı açılmasına yardımcı olur.

Cache sorunu nasıl anlaşılır?

Örneğin CSS dosyasında bir değişiklik yaptınız ve sunucuya yüklediniz.

Ancak siteyi açtığınızda eski tasarım görünmeye devam ediyor.

Gizli sekmede veya başka bir cihazda yeni tasarım görünüyorsa sorun büyük ihtimalle tarayıcı tarafındaki cache ile ilgilidir.

Fakat eski sürüm bütün cihazlarda görünüyorsa sunucu, CDN veya deployment tarafını da incelemek gerekir.

1. Sayfayı zorla yenileyin

İlk olarak normal yenileme yerine hard refresh deneyebilirsiniz.

Tarayıcıya ve işletim sistemine göre kısayollar değişebilir ancak Chrome tabanlı masaüstü tarayıcılarda yaygın olarak:

Ctrl + Shift + R

veya:

Ctrl + F5

kullanılabilir.

Bu işlem bazı önbelleğe alınmış kaynakların yeniden istenmesine yardımcı olabilir.

2. Gizli sekmede kontrol edin

Siteyi gizli sekmede açarak karşılaştırma yapabilirsiniz.

Normal sekmede eski CSS görünürken gizli sekmede yeni CSS görünüyorsa tarayıcı cache'i güçlü bir şüphelidir.

Ancak gizli sekmenin bütün cache mekanizmalarını tamamen devre dışı bıraktığını varsaymayın. Bu yalnızca hızlı teşhis yöntemlerinden biridir.

3. Developer Tools ile cache'i devre dışı bırakın

Chrome Developer Tools içerisinde Network bölümünde bulunan Disable cache seçeneği geliştirme sırasında oldukça kullanışlıdır.

Developer Tools açıkken bu seçeneği etkinleştirip sayfayı yeniden yükleyebilirsiniz.

Yeni dosya görünüyorsa problemin tarayıcı cache'iyle ilişkili olduğunu doğrulamış olursunuz.

4. Network bölümünü kontrol edin

Developer Tools → Network bölümünden CSS, JavaScript ve görsel isteklerini inceleyebilirsiniz.

Burada:

- İstek URL'si

- HTTP durum kodu

- Response headers

- Cache bilgileri

- Dosyanın nereden geldiği

gibi ayrıntılar incelenebilir.

Tarayıcının kaynağı ağdan mı yoksa cache üzerinden mi kullandığını kontrol etmek sorunun kaynağını bulmayı kolaylaştırır.

5. Cache-Control başlığını kontrol edin

Sunucu, tarayıcıya kaynakların ne kadar süre önbellekte tutulacağını HTTP başlıklarıyla bildirebilir.

Örneğin Cache-Control başlığı bu amaçla kullanılan önemli mekanizmalardan biridir.

Statik ve sürümlenmiş dosyalarda uzun süreli cache faydalı olabilir.

Ancak sürekli değişen HTML içeriğine çok uzun cache süresi vermek kullanıcıların eski sayfayı görmesine neden olabilir.

Bu nedenle bütün dosya türlerine aynı cache politikası uygulanmamalıdır.

6. CSS ve JavaScript için cache busting kullanın

CSS dosyanız sürekli:

/styles.css

olarak çağrılıyorsa tarayıcı eski kopyayı kullanabilir.

Basit sistemlerde sürüm parametresi gibi yöntemler kullanılabilir:

/styles.css?v=2

Daha gelişmiş build sistemlerinde ise dosya içeriğine göre oluşturulan hash'li dosya adları tercih edilebilir.

Örneğin:

styles.a8f42c.css

Dosya değiştiğinde adı da değişeceği için tarayıcı bunu yeni bir kaynak olarak görür.

Production projelerinde content hash tabanlı dosya isimleri güçlü bir cache yönetimi yöntemidir.

7. HTML ile statik dosyaların cache politikası aynı olmamalı

Sık yapılan hatalardan biri HTML, CSS, JavaScript ve görsellerin tamamına aynı uzun cache süresini vermektir.

Örneğin hash'li:

app.83ab21.js

dosyası uzun süre cache'lenebilir çünkü yeni sürüm çıktığında dosya adı değişir.

Ancak HTML sayfası eski JavaScript dosyasını göstermeye devam ediyorsa yeni deployment kullanıcıya ulaşmayabilir.

Bu nedenle HTML ve sürümlenmiş statik kaynakların cache stratejileri ayrı düşünülmelidir.

8. CDN cache'ini kontrol edin

CDN kullanıyorsanız origin sunucudaki dosya güncel olmasına rağmen ziyaretçilere eski sürüm sunulabilir.

Böyle bir durumda:

1. Origin dosyasının gerçekten güncel olduğunu doğrulayın.

2. CDN üzerinden gelen yanıtı kontrol edin.

3. Gerekliyse ilgili URL'nin cache'ini temizleyin.

4. Uzun vadede versioning veya hash'li dosya adları kullanın.

Her deployment sonrasında bütün CDN cache'ini temizlemek yerine doğru cache stratejisi oluşturmak daha sağlıklı olabilir.

9. Reverse proxy cache kullanılıyorsa kontrol edin

Nginx veya başka bir reverse proxy katmanında cache yapılandırılmış olabilir.

Tarayıcı cache'ini temizlemenize rağmen bütün kullanıcılar eski içeriği görüyorsa sunucu tarafındaki cache sistemlerini inceleyin.

Özellikle dinamik HTML ve API yanıtlarının yanlışlıkla uzun süre cache'lenmesi beklenmedik sonuçlar oluşturabilir.

10. Service Worker eski dosyaları gösterebilir

PWA kullanılan web sitelerinde Service Worker kendi cache sistemini yönetebilir.

Bu durumda:

- Tarayıcı cache'ini temizlemek

- Hard refresh yapmak

- Sunucudaki dosyayı değiştirmek

her zaman yeterli olmayabilir.

Service Worker eski CSS veya JavaScript paketlerini sunmaya devam edebilir.

Developer Tools içerisindeki Application bölümünden Service Worker ve ilgili cache kayıtlarını inceleyebilirsiniz.

11. API cache sorunlarını ayrı değerlendirin

Sayfanın tasarımı güncel ancak kullanıcı bilgileri, gönderiler veya istatistikler eski görünüyorsa problem statik dosya cache'i değil API yanıtlarının önbelleğe alınması olabilir.

Dinamik ve kullanıcıya özel API uçlarında cache politikası özellikle dikkatli yapılandırılmalıdır.

Örneğin oturum açmış kullanıcıya özel bir yanıtın ortak cache içerisinde yanlış biçimde saklanması yalnızca güncellik değil, gizlilik ve güvenlik açısından da ciddi sorunlara yol açabilir.

12. Veritabanı güncel ama sayfa eskiyse

Veritabanındaki kayıt değiştiği halde sitede eski bilgi görünüyorsa şu katmanları kontrol edin:

Veritabanı → Uygulama cache'i → Reverse proxy → CDN → Tarayıcı

Eski verinin hangi aşamada kaldığını belirlemeye çalışın.

Bütün sistemi yeniden başlatmak geçici olarak problemi çözebilir ancak asıl cache hatasını bulmanızı sağlamaz.

13. PM2 yeniden başlatmak cache temizlemek midir?

Her zaman değildir.

Node.js uygulamasını:

pm2 restart

ile yeniden başlatmak uygulamanın belleğinde tutulan bazı geçici verileri sıfırlayabilir.

Ancak bu işlem:

- Tarayıcı cache'ini

- CDN cache'ini

- Service Worker cache'ini

otomatik olarak temizlemez.

Bu nedenle her eski içerik probleminde PM2'yi yeniden başlatmak doğru çözüm değildir.

14. Nginx yeniden başlatmak gerekli mi?

Yalnızca statik CSS veya görsel değiştirdiğiniz için Nginx'i sürekli yeniden başlatmanız normalde gerekli değildir.

Nginx yapılandırmasını değiştirdiyseniz yeni yapılandırmanın uygulanması gerekebilir.

Ancak eski CSS görünüyorsa önce cache ve dosya sürümleme yapısını incelemek daha mantıklıdır.

15. Görsellerde cache sorunu nasıl çözülür?

Aynı dosya adını koruyarak:

logo.webp

dosyasının içeriğini değiştirirseniz bazı kullanıcılar eski görseli görmeye devam edebilir.

Bunun yerine sürümlendirme kullanılabilir.

Örneğin:

logo-v2.webp

veya build sistemi kullanılıyorsa hash'li dosya isimleri tercih edilebilir.

Özellikle logo, favicon ve uzun süre cache'lenen görsellerde güncellemenin kullanıcılara ulaşması biraz zaman alabilir.

16. Favicon neden daha uzun süre eski görünebilir?

Favicon'lar tarayıcılar ve bazı platformlar tarafından ayrıca önbelleğe alınabilir.

Dosyayı değiştirdiğiniz halde eski favicon görünmesi her zaman sunucudaki dosyanın yanlış olduğu anlamına gelmez.

Öncelikle favicon URL'sini doğrudan açarak sunucudaki dosyanın güncel olduğunu kontrol edin.

Arama motorlarının gösterdiği favicon'un güncellenmesi ise tarayıcı cache'inden ayrı bir süreçtir ve yeniden tarama/işleme gerektirebilir.

17. Cache'i tamamen kapatmak doğru mu?

Genellikle hayır.

Cache'i tamamen kapatmak kısa vadede geliştirme sırasında kolaylık sağlayabilir ancak production ortamında performansı olumsuz etkileyebilir.

Amaç cache'i kaldırmak değil, doğru içeriğe doğru cache politikası uygulamaktır.

Örneğin:

- Sürümlenmiş CSS → Uzun cache

- Sürümlenmiş JavaScript → Uzun cache

- Değişmeyen görseller → Uzun cache

- Dinamik HTML → İhtiyaca göre daha kontrollü cache

- Kullanıcıya özel API → Güvenli ve uygun politika

kullanılabilir.

Kesin süreler ise sitenin mimarisine ve güncelleme sıklığına göre belirlenmelidir.

18. Cache sorunu çözmek için hangi sırayla ilerlenmeli?

Pratik kontrol sırası:

1. Sunucudaki dosyanın gerçekten güncel olduğunu doğrulayın.

2. Dosyanın URL'sini doğrudan açın.

3. Hard refresh yapın.

4. Gizli sekmede kontrol edin.

5. Developer Tools ile cache'i devre dışı bırakıp deneyin.

6. Network bölümündeki response header'ları inceleyin.

7. CDN kullanılıyorsa CDN cache'ini kontrol edin.

8. Reverse proxy cache yapılandırmasını inceleyin.

9. Service Worker varsa kontrol edin.

10. CSS ve JavaScript için versioning veya hash sistemi kullanın.

Cache sorununun kalıcı çözümü nedir?

Sürekli kullanıcıya "Ctrl + F5 yap" demek kalıcı bir çözüm değildir.

Production ortamında doğru yöntem, güncellenen statik kaynakların yeni URL'lerle sunulmasını sağlayan bir versioning sistemi ve uygun HTTP cache politikası oluşturmaktır.

Örneğin yeni CSS yayınlandığında:

styles.eski.css

yerine:

styles.yeni-hash.css

kullanılırsa tarayıcı yeni dosyayı otomatik olarak indirir.

Eski ve değişmeyen dosyalar ise cache'ten hızlı şekilde kullanılmaya devam eder.

Özetle, web sitesindeki cache sorunlarını çözmenin ilk adımı eski içeriğin tarayıcıdan mı, CDN'den mi, Service Worker'dan mı yoksa sunucu tarafındaki cache sisteminden mi geldiğini belirlemektir.

Doğru yapılandırılmış cache web sitesi için problem değil, önemli bir performans avantajıdır. Asıl hedef önbelleği tamamen kapatmak değil, güncellenen dosyaların kullanıcılara doğru zamanda ulaşmasını sağlayan güvenilir bir cache stratejisi oluşturmaktır.