BFCache Uyumluluk Testi ve Sorun Giderme

Kullanıcılar tarayıcıda geri tuşuna bastığında sayfa anında yüklenmiyorsa, sorun genellikle ağ bağlantısından değil, sayfanın BFCache uyumunu kaybetmesinden kaynaklanır. Sağlıklı bir BFCache yapısı, instant page loading yani anında sayfa yükleme deneyimi sunarak kullanıcı memnuniyetini artırır ve web siteniz için kritik bir performance optimization adımı oluşturur.

Bu durum hem kullanıcı deneyimini bozar hem de performans ölçümlerini gereksiz yere şişirir. Aşağıda, web sitenizin durumunu analiz etmenizi sağlayacak BFCache uyumluluk testi sürecini, sonuçları nasıl doğrulayacağınızı ve başarısız vakaları nasıl temizleyeceğinizi net adımlarla bulacaksınız.

Key Takeaways

• Instant Loading Experience: BFCache enables instant navigation by caching the page state in memory, which significantly boosts Core Web Vitals and user satisfaction.
• Common Obstacles: The most frequent blockers for BFCache are unload event listeners, global Cache-Control: no-store headers, and unmanaged long-lived connections like WebSockets.
• Validation Methods: Use the Chrome DevTools Application panel to identify non-restored reasons, and verify state persistence programmatically using the pageshow event’s persisted property.
• Life Cycle Management: Efficiently manage page transitions by cleaning up connections during pagehide and refreshing stale data upon pageshow to ensure both speed and UI accuracy.

BFCache’e ne zaman girmez?

BFCache (geri-ileri önbellek), klasik bir HTTP önbelleği değildir. Tarayıcı, sayfanın DOM yapısını, JavaScript durumunu ve arayüz halini doğrudan browser memory içinde saklar. Bu sistem, Core Web Vitals metriklerini iyileştirmek için kritik olsa da tarayıcı, bir risk gördüğü anda sayfayı geri-ileri önbellek mekanizmasına dahil etmez.

En sık karşılaşılan engellerden biri unload event kullanımıdır. Bu olay, eski alışkanlıklarla hala birçok projede yer alıyor; ancak sayfayı dondurup tekrar açmak isteyen tarayıcı için bu durum kötü bir sinyaldir. Benzer şekilde beforeunload event kullanımı da dikkat ister. Eğer bu etkinlik sürekli aktifse, tarayıcı BFCache uyumluluğunu zayıflatabilir.

İkinci büyük konu HTTP başlıklarıdır. Cache-Control no-store yönergesi hassas sayfalar için gerekli olabilir; ancak tüm siteye körlemesine eklenirse BFCache davranışını bozabilir. Bu yüzden HTTP cache başlıkları ve bfcache ilişkisi ayrı ayrı düşünülmelidir.

Bir başka yaygın neden ise açık kalan uzun ömürlü işlemlerdir. Aktif bir WebSocket bağlantısı, açık kalan bir IndexedDB bağlantısı veya sayfadan ayrılırken sonlandırılmayan süreçler tarayıcıyı temkinli davranmaya iter. Ayrıca sayfa geri geldiğinde eski veri gösterecek kadar kırılgan bir kullanıcı arayüzü, pratikte ciddi sorun üretir. Testler teknik olarak geçse bile kullanıcı eski sepet sayısı veya güncel olmayan bir durum görüyorsa, kullanıcı deneyimi olumsuz etkilenir.

Aşağıdaki tablo, hızlı teşhis için iyi bir kısa yol verir:

Durum	Etkisi	İlk müdahale
unload event	Çoğu tarayıcıda güçlü engel	Kaldırın, pagehide kullanın
Sürekli beforeunload event	Uyum riski yaratır	Yalnızca veri kaybı riski varsa bağlayın
Cache-Control no-store	BFCache kullanımını sınırlayabilir	Sadece gerekli yanıtlarda kullanın
Açık WebSocket veya IndexedDB bağlantısı	Geri yükleme iptal olabilir	Ayrılırken kapatın, dönünce yeniden açın
Geri dönüşte eski veri	Test geçse de UX bozulur	pageshow sonrası hafif yenileme yapın

Tarayıcıların gerekçe listesi birebir aynı değildir. Yine de ortak tablo büyük ölçüde aynı kalır. Ayrıntılı tarayıcı notları için web.dev üzerindeki bfcache rehberi iyi bir referanstır.

BFCache uyumluluk testi adım adım

En hızlı yol, Chrome DevTools içindeki yerleşik test ekranıdır. Testi uzantıların ve eklentilerin etkisini azaltmak için gizli modda ya da temiz bir profilde çalıştırmak daha sağlıklıdır. Chrome ekibi de DevTools bfcache hata ayıklama ipuçlarında bunu öneriyor.

BFCache, sayfayı tamamen yeniden yüklemek yerine JavaScript execution sürecini duraklatarak anında sayfa yükleme deneyimi sağlar. Chrome’da temel doğrulama akışı şu şekildedir:

1. Test edeceğiniz sayfayı açın.
2. Chrome DevTools aracını açın.
3. Application sekmesine gidin.
4. Back/forward cache panelini açın.
5. Chrome DevTools back/forward cache testi ekranındaki test düğmesini çalıştırın.
6. Chrome sizi başka bir sayfaya götürür ve geri getirir.
7. Sonuç ekranında sayfanın BFCache’ten dönüp dönmediğini, dönmediyse NotRestoredReasons API sayesinde listelenen nedenleri görün.

Bu araç güzel çünkü tahmin yürütmez. “Restored from BFCache” ya da “Not restored” bilgisini verir. Başarısız durumda nedenler çoğu zaman açık şekilde listelenir.

Yine de tek kaynağa güvenmeyin. Tarayıcılar arası ortak doğrulama için küçük bir olay dinleyicisi ekleyin:

window.addEventListener('pageshow', (event) => {
  console.log('pageshow persisted:', event.persisted);
});

window.addEventListener('pagehide', (event) => {
  console.log('pagehide persisted:', event.persisted);
});

pageshow event tetiklendiğinde persisted property değerinin true olduğunu görüyorsanız sayfa BFCache’ten dönmüştür. Bu yöntem Chrome, Firefox ve Safari tarafında ortak bir kontrol noktası verir. Tarayıcı arayüzleri değişse bile bu pageshow event semantiği ve persisted property kullanımı daha kararlıdır. pagehide event ise sayfa önbelleğe alınırken durum takibi yapmanıza yardımcı olur.

İsterseniz gezinme türünü de loglayın:

const nav = performance.getEntriesByType('navigation')[0];
console.log('navigation type:', nav && nav.type);

Burada back_forward değeri, geri veya ileri geçmiş gezintisini gösterir. Yine de bu tek başına BFCache garantisi değildir. En güvenilir sinyal pageshow içindeki persisted bilgisidir.

Kısa bir kontrol özeti:

Doğrulama	Ne ararsınız	Nerede iş görür
DevTools testi	Not restored nedenleri	Chrome
pageshow.persisted	true değeri	Tüm büyük tarayıcılar
Navigation entry	back_forward	Loglama ve analiz

Başarısız testte debug akışı

BFCache testi başarısızsa rastgele kod silmeyin. Önce tekrar üretilebilir bir yol kurun. Aynı giriş durumu, aynı sayfa geçişi, aynı tarayıcı profili ve mümkünse uzantısız ortam kullanın. Aksi halde bazen uygulamayı değil, test ortamını düzeltmiş olursunuz.

İlk adım, not restored nedenini yakalamaktır. Chrome burada çok yardımcı olur. Sebep unload ise doğrudan görünür. Sebep canlı bağlantıysa ya da farklı bir yaşam döngüsü problemi varsa panel bunu da işaret eder. Sonra uygulama içine Page Lifecycle API özelliklerini de kapsayan hafif bir telemetri ekleyin.

['visibilitychange', 'freeze', 'resume', 'pagehide', 'pageshow'].forEach((name) => {
  window.addEventListener(name, (event) => {
    console.log(name, {
      persisted: 'persisted' in event ? event.persisted : undefined,
      hidden: document.hidden
    });
  });
});

Bu loglar, sayfa ayrılırken neler yaşandığını görmenizi sağlar. pagehide event tetikleniyor ama beklediğiniz temizlik yapılmıyorsa sorun bağlantı yönetiminde olabilir. pageshow.persisted değeri hep false kalıyorsa, sayfanın tekrar geri yüklenmesini engelleyen bir yaşam döngüsü engeli vardır. BFCache sorunları, sıklıkla sayfalar arası geçiş sırasında JavaScript execution süreçlerinin nasıl yönetildiğiyle doğrudan ilgilidir.

Ağ tarafını da kontrol edin. Browser back button kullanıldıktan sonra tam bir doküman isteği görüyorsanız tarayıcı sayfayı yeniden yüklemiştir. BFCache geri dönüşünde tam belge isteği beklemezsiniz. Ufak veri yenilemeleri olabilir, ancak ana HTML isteğinin tekrar gelmesi çoğu vakada kaçırılan bfcache anlamına gelir.

unload dinleyicisi tek satır bile olsa BFCache’i devre dışı bırakabilir.

Bir de test yolunu daraltın. Önce boş bir sayfada deneyin, sonra üçüncü taraf script’leri tek tek açın. Analitik araçlar, sohbet widget’ları ve eski etiketler bu alanda sık suçludur. Sorun dış script’ten kaynaklanıyorsa, uygulamanızdaki JavaScript execution yapısını gereksiz yere kurcalamanıza gerek kalmaz. Browser back button testleri sırasında üçüncü taraf araçların bfcache mekanizmasını nasıl etkilediğini izole etmek, performans sorunlarını daha hızlı çözmenize yardımcı olacaktır.

Sık görülen sorunlar ve net düzeltmeler

unload ve beforeunload kullanımını temizleyin

Birçok projede eski kod tabanı sayfa kapanırken belirli işlemlerin yürütülmesi mantığıyla çalışır. Ancak BFCache uyumluluğunu sağlamak için en güvenli yol pagehide olayını kullanmaktır. Özellikle bir unload event veya gereksiz bir beforeunload event kullanımı, tarayıcının sayfayı önbelleğe almasını engelleyen en yaygın faktörlerden biridir. Eğer kullanıcı veri kaybı riski yaşamıyorsa bu dinleyicileri hiç bağlamamak en iyi pratiktir.

let formDirty = false;


function warnBeforeUnload(e) {
  e.preventDefault();
  e.returnValue = '';
}


function updateBeforeUnload() {
  if (formDirty) {
    window.addEventListener('beforeunload', warnBeforeUnload);
  } else {
    window.removeEventListener('beforeunload', warnBeforeUnload);
  }
}

Bu yaklaşım, uyarıyı sadece gerçekten veri kaybı riski olduğunda tetikler. Sürekli aktif bir dinleyiciye göre çok daha temizdir ve tarayıcı performansına olumlu katkı sağlar.

no-store başlığını tüm siteye yaymayın

Giriş sonrası hesap yönetimi, ödeme sayfaları veya tek kullanımlık hassas veriler ayrı ele alınmalıdır. Ancak blog, kategori, ürün veya yardım sayfalarına site geneli bir no-store caching policy uygulamak çoğu zaman gereksizdir. Bu durum sadece tekrar ziyaretleri yavaşlatmakla kalmaz, aynı zamanda Core Web Vitals metriklerini de olumsuz etkileyebilir. Özellikle Largest Contentful Paint, Cumulative Layout Shift ve Interaction to Next Paint değerlerinin iyileştirilmesinde BFCache kritik bir rol oynar.

Ayrıca hibrit render kullanan projelerde veri tazeliği ile önbellek politikasını birlikte düşünmek gerekir. Bu denge için doğru caching stratejileri iyi bir karar çerçevesi sunar. Unutmayın ki BFCache desteği, özellikle düşük bağlantı hızına sahip kullanıcılar için mobil optimization çalışmalarının en verimli parçalarından biridir.

Canlı bağlantılar ve eski veriyi yönetin

Sayfa açıkken canlı skor, sohbet ya da bildirim akışı gibi yapılar kuruyorsanız ayrılma ve geri dönüş yaşam döngüsünü kodla yönetmelisiniz. Basit bir örnek:

let ws;


function connect() {
  ws = new WebSocket('wss://example.com/live');
}


connect();


window.addEventListener('pagehide', () => {
  if (ws) ws.close();
});


window.addEventListener('pageshow', (event) => {
  if (event.persisted) connect();
});

Buna ek olarak geri dönüşte kritik verileri hafifçe yenileyin. Mesela sepet rozeti, oturum durumu veya fiyat gibi alanları pageshow.persisted sonrası küçük bir fetch ile tazeleyin. Böylece BFCache hızını korurken bayat arayüz riskini azaltır ve kullanıcı deneyimini en üst düzeyde tutarsınız.

Frequently Asked Questions

Why does my page not restore from BFCache despite passing basic checks?

Even if your code seems compliant, external third-party scripts, analytics tools, or persistent IndexedDB connections can block BFCache. You should isolate the issue by testing your page in a clean environment without browser extensions or by disabling third-party scripts one by one.

Can I still use unload events in my application?

It is strongly recommended to remove all unload event listeners, as they are a primary reason for BFCache failure in modern browsers. Instead, use the pagehide event, which is compatible with BFCache and provides a more reliable way to perform cleanup tasks.

Should I always use Cache-Control: no-store for sensitive pages?

While no-store is necessary for highly sensitive pages, applying it globally across your site is a common performance mistake. Use it selectively only on specific pages where data privacy is legally or functionally required to ensure the rest of your site remains eligible for BFCache optimization.

How can I ensure users don’t see stale data after a BFCache restore?

Since BFCache restores the page exactly as it was left, you should listen for the pageshow event and check if event.persisted is true. If so, perform lightweight API calls to refresh critical UI elements like cart counts or user authentication status to keep the information current.

Hızlı özet ve kontrol listesi

Geri tuşunda tam sayfa yüklemesi görüyorsanız öncelikle üç kritik noktaya odaklanmalısınız: unload kullanımı, no-store başlığı ve açık kalan bağlantılar. BFCache uyumluluk testi, çoğu vakada sorunu birkaç dakika içinde görünür hale getirir.

Kalıcı bir performans optimizasyonu sağlamak için sadece test sonucuna değil, geri dönüşteki arayüz doğruluğuna da dikkat etmelisiniz. Sayfanın geri-ileri önbellek mekanizması üzerinden dönmesi tek başına yeterli değildir; doğru ve güncel veriyle kullanıcıya sunulması gerekir.

Uygulanabilir kısa kontrol listesi:

• Chrome DevTools içindeki bfcache testini temiz bir profilde çalıştırın.
• pageshow olayında persisted değerini loglayarak geri-ileri önbellek durumunu takip edin.
• Kod tabanında unload araması yapın ve mümkünse bu metodu tamamen kaldırın.
• beforeunload dinleyicisini yalnızca ihtiyaç anında bağlayın.
• Cache-Control: no-store kullanımını sayfa bazında yeniden değerlendirin.
• WebSocket ve benzeri uzun ömürlü bağlantıları pagehide ve pageshow ile yönetin.
• Geri dönüşte kritik UI parçalarını hafifçe tazeleyin.
• Üçüncü taraf scriptleri devre dışı bırakıp tekrar test ederek dış kaynak etkisini ayırın.
• Mobil cihazlarda sorunsuz bir deneyim için mobil optimizasyon süreçlerini gözden geçirin.

Bu akış oturduğunda bfcache, teorik bir teknik detay olmaktan çıkar. Kullanıcı browser back button yani tarayıcı geri tuşuna bastığında sayfanız instant page loading etkisiyle, bekleme süresi olmadan açılır ve kullanıcı farkı anında hisseder.

This post may contain affiliate links. If you make a purchase through these links, I may earn a small commission at no extra cost to you.