Web sitenizde bir metni düzeltir, bir görseli değiştirir ya da renk güncellersiniz; ama tarayıcıda sayfayı açtığınızda eski hali karşınıza çıkar. Değişiklik gerçekten yapılmıştır, dosya sunucuda yenidir, buna rağmen ekranda görünmez. Bunun nedeni neredeyse her zaman cache (önbellek) katmanlarıdır. Önbellek, sayfanın daha hızlı açılması için içeriğin bir kopyasının saklanmasıdır; sorun, bu kopyanın güncellendiğinizde bayatlamasıdır. Aşağıda “değiştirdim ama eski görünüyor” sorununu katman katman ele alıyoruz.
Önbellek kötü bir şey değildir; aksine, bir sitenin hızlı açılmasının temel yollarından biridir. Her ziyaretçi sayfayı her açtığında tüm dosyalar sıfırdan üretilip yeniden indirilse, hem sunucu yükü artar hem de sayfa yavaşlar. Bu yüzden içeriğin kopyaları çeşitli noktalarda tutulur. Sorun, siz bir güncelleme yaptığınızda bu kopyaların otomatik olarak tazelenmemesinden çıkar. Bu nedenle asıl mesele önbelleği tümden kapatmak değil, güncelleme yaptığınızda ilgili kopyanın yenilenmesini sağlamaktır.
Önbellek katmanları: sorun nerede birikiyor?
Bir web sayfası ziyaretçiye ulaşana kadar birkaç noktadan geçer ve her nokta içeriğin bir kopyasını tutabilir. Değişiklik göründüğü halde eski içerik gelmeye devam ediyorsa, kopya bu katmanlardan birinde takılı kalmıştır.
- Tarayıcı önbelleği (browser cache): Ziyaretçinin bilgisayarında saklanır. Tarayıcı, daha önce indirdiği CSS, JavaScript ve görselleri tekrar indirmemek için diskte tutar.
- Sunucu önbelleği: Hosting tarafında sayfanın hazır üretilmiş bir kopyası saklanır; her istekte sayfa yeniden oluşturulmaz.
- CDN önbelleği: İçerik dağıtım ağı (CDN), dosyaları dünya genelindeki sunucularda kopyalar. Ziyaretçiye en yakın kopya sunulur; bu kopya güncellenmediğinde eski dosya gelir.
- WordPress cache eklentileri: WordPress’te önbellek eklentileri sayfaların statik HTML kopyasını üretir. İçerik değişse bile eklenti eski kopyayı sunmaya devam edebilir.
CSS ve JavaScript dosyalarının özel durumu
En çok yanıltan katman CSS ve JavaScript dosyalarının önbelleğidir. Tarayıcı bu dosyaların adını bir kez indirdiğinde, aynı ada sahip dosyayı değişmemiş kabul eder ve tekrar sunucuya sormaz. Dosyanın içeriğini değiştirseniz de dosya adı aynı kaldığı için tarayıcı diskteki eski sürümü kullanır. Sonuç: tasarım değişikliğiniz kodda vardır ama ekranda görünmez.
Aynı durum CSS içindeki url() ile çağrılan görseller için de geçerlidir. Bir arka plan görselini aynı dosya adıyla yeniden yüklerseniz, tarayıcı eski görseli göstermeye devam eder çünkü adres değişmemiştir. Bu, özellikle hero bölümü gibi büyük arka plan görsellerinde yanıltıcıdır: görseli yenilersiniz, sunucuda yeni dosya durur, ama ziyaretçi kırpılmış ya da eski görseli görmeye devam eder.
Bu davranış aslında bilinçli bir hız optimizasyonudur. Tarayıcı, aynı adrese sahip bir dosyanın değişmediğini varsayarak onu tekrar indirmez; site böylece daha hızlı açılır. Sorun yalnızca içerik değiştiği halde adresin sabit kalmasından doğar. Dolayısıyla çözüm, önbelleği devre dışı bırakmak değil, dosya her değiştiğinde tarayıcıya “bu artık farklı bir dosya” mesajını verebilmektir.
Kalıcı çözüm: sürüm parametresi (versiyonlama)
Her değişiklikte önbelleği elle temizlemek sürdürülebilir değildir; asıl çözüm dosya adresine bir sürüm parametresi eklemektir. Dosya her değiştiğinde bu parametre otomatik değişir ve tarayıcı bunu yeni bir dosya sayıp yeniden indirir.
- Sabit sürüm yetmez: style.css?ver=1.0 gibi sabit bir sürümde dosya defalarca değişse de numara aynı kaldığı için tarayıcı eski dosyayı sunmaya devam eder.
- filemtime yöntemi: Sürüme dosyanın son değiştirilme zamanı eklenir (style.css?ver=1.0.1787157120). Dosya her değiştiğinde bu değer kendiliğinden değişir; tarayıcı yeni sürümü indirir, elle müdahale gerekmez.
- CSS içi görseller: Doğrudan sürümlenemeyen url() görselleri için görsel adresi bir değişkene taşınır ve o değişkene aynı zaman damgası eklenir; böylece görsel de her güncellemede yenilenir.
Hangi katmanı nasıl temizlersiniz?
Değişiklik görünmüyorsa çözümü katman sırasıyla uygulamak en hızlı sonucu verir:
- Tarayıcı: Sert yenileme yapın (Windows’ta Ctrl+F5, Mac’te Cmd+Shift+R). Bu, tarayıcının önbelleği atlayıp dosyaları sunucudan yeniden çekmesini sağlar. Farklı bir cihaz ya da gizli sekme de kontrol için işe yarar.
- Eklenti/sunucu: WordPress önbellek eklentisinin ve varsa sunucu önbelleğinin “önbelleği temizle” işlevini çalıştırın.
- CDN: CDN kullanıyorsanız ilgili dosyalar için önbellek boşaltma (purge) yapın; aksi halde CDN eski kopyayı sunmaya devam eder.
- Kalıcı önlem: Bu adımların tekrar tekrar gerekmemesi için dosyaları sürüm parametresiyle sunun.
Bir noktaya dikkat etmekte fayda var: geliştirici olarak sizin ekranınızda güncel görünen bir sayfa, ziyaretçilerinizin ekranında hâlâ eski olabilir. Çünkü siz sık sık sert yenileme yaparken, ziyaretçilerin tarayıcısında eski kopyalar durmaktadır. Bu yüzden bir değişikliğin herkeste göründüğünden emin olmak için, önbelleği yalnızca kendi tarayıcınızda değil, sunucu ve CDN katmanlarında da tazelemek gerekir. Kalıcı çözüm olan sürümleme, tam da bu farkı ortadan kaldırır: dosya değişince adres değişir, herkes yeni sürümü otomatik alır.
Özetle “değiştirdim ama eski görünüyor” sorunu bir hata değil, önbelleğin doğal sonucudur. Doğru kurgulanmış bir sitede CSS ve JavaScript dosyaları otomatik sürümlenir; siz bir değişiklik yaptığınızda ziyaretçi de en geç bir sonraki ziyarette güncel halini görür. Elle temizlik gereksinimini en aza indiren yapı, hem sizin hem ziyaretçinizin zamanını korur.
İlgili hizmetler: Web Tasarım ve Yazılım, Yazılım ve PC Uygulamaları, Sistem Entegrasyonu
Bir yanıt yazın