Geri ve ileri önbellek

Philip Walton
Barry Pollard

Geri-ileri önbellek (veya bfcache), hızlı geri ve ileri gezinmeyi sağlayan bir tarayıcı optimizasyonudur. Özellikle yavaş ağları veya cihazları olan kullanıcılar için tarama deneyimini önemli ölçüde iyileştirir.

Bu sayfada, tüm tarayıcılarda sayfalarınızı bfcache için nasıl optimize edeceğiniz açıklanmaktadır.

Tarayıcı uyumluluğu

bfcache yıllardır hem Firefox hem de Safari'de masaüstü ve mobil cihazlarda desteklenmektedir.

Sürüm 86'dan itibaren Chrome, kullanıcıların küçük bir yüzdesi için Android'de siteler arası gezinme için bfcache'i etkinleştirdi. Sonraki sürümlerde ek destek yavaş yavaş kullanıma sunuldu. bfcache, sürüm 96'dan itibaren masaüstü ve mobil cihazlardaki tüm Chrome kullanıcıları için etkinleştirilmiştir.

bfcache ile ilgili temel bilgiler

bfcache, kullanıcı sayfadan ayrılırken sayfanın eksiksiz bir anlık görüntüsünü depolayan bellek içi önbellektir. Tüm sayfa bellekte olduğunda, kullanıcı geri dönmeye karar verdiğinde tarayıcı sayfayı yüklemek için gereken tüm ağ isteklerini tekrarlamak zorunda kalmadan sayfayı hızlı bir şekilde geri yükleyebilir.

Aşağıdaki videoda bfcache'ın gezinmeyi ne kadar hızlandırabileceği gösterilmektedir:

Bfcache kullanmak, geri ve ileri gezinme sırasında sayfaların çok daha hızlı yüklenmesini sağlar.

Chrome kullanım verileri, masaüstünde 10 gezinmeden 1'inin mobilde ise 5'te 1'inin geri veya ileri gitmediğini gösteriyor. Bu nedenle bfcache önemli ölçüde zaman ve veri kullanımı tasarrufu sağlama potansiyeline sahiptir.

"Önbellek" nasıl çalışır?

Bfcache tarafından kullanılan "önbellek", yinelenen gezinmelerin hızlandırılmasında kendi rolü olan HTTP önbelleğinden farklıdır. bfcache, JavaScript yığını da dahil olmak üzere tüm sayfanın bellekteki anlık görüntüsüdür. HTTP önbelleği ise yalnızca önceden yapılan isteklere ilişkin yanıtları içerir. Bir sayfanın HTTP önbelleğinden karşılanabilmesi için gereken tüm isteklerin HTTP önbelleğinden karşılanabilmesi için gereken tüm isteklerin olması çok nadir görülen bir işlem olduğundan, bfcache geri yüklemelerinin kullanıldığı yinelenen ziyaretler, en iyi optimize edilmiş bfcache olmayan gezinmelerden bile her zaman daha hızlıdır.

Ancak, bir sayfanın bellekteki anlık görüntüsünü oluşturmak, devam etmekte olan kodun en iyi şekilde nasıl korunacağı açısından bazı karmaşık işlemler gerektirir. Örneğin, sayfa bfcache'deyken zaman aşımına ulaşıldığında setTimeout() çağrılarını nasıl ele alırsınız?

Bunun yanıtı, tarayıcılar JavaScript görev sıralarındaki neredeyse tüm bekleyen görevler dahil olmak üzere bfcache'deki sayfalar için bekleyen zamanlayıcıları veya çözülmemiş sözleri duraklatır ve sayfa bfcache'den geri yüklenirse işleme görevlerini devam ettirir.

Zaman aşımları ve vaatler gibi bazı durumlarda, bu oldukça düşük bir risktir ancak diğer durumlarda kafa karıştırıcı veya beklenmedik davranışlara yol açabilir. Örneğin, tarayıcı bir IndexedDB işlemi için gerekli olan bir görevi duraklatırsa, aynı IndexedDB veri tabanlarına aynı anda birden çok sekme tarafından erişilebileceği için bu durum aynı kaynaktaki diğer açık sekmeleri etkileyebilir. Sonuç olarak, tarayıcılar genellikle bir IndexedDB işleminin ortasında veya diğer sayfaları etkileyebilecek API'ler kullanırken sayfaları önbelleğe almaya çalışmaz.

API kullanımının bir sayfanın bfcache uygunluğunu nasıl etkilediği hakkında daha fazla bilgi için Sayfalarınızı bfcache için optimize etme bölümüne bakın.

Bfcache ve Tek Sayfalık Uygulamalar (SPA)

Bfcache tarayıcı tarafından yönetilen gezinmelerle çalıştığından, tek sayfalık bir uygulamadaki (SPA) "soft gezinmeler" için çalışmaz. Ancak bfcache, SPA'dan ayrılma ve dönme sırasında yine de yardımcı olabilir.

Bfcache gözlemlenecek API'ler

Bfcache, tarayıcıların otomatik olarak yaptığı bir optimizasyon olsa da geliştiricilerin, sayfalarını bunun için optimize edebilmeleri ve tüm metrikleri veya performans ölçümlerini uygun şekilde ayarlayabilmeleri için sorunun ne zaman olduğunu bilmesi önemlidir.

Bfcache'i gözlemlemek için kullanılan birincil etkinlikler, çoğu tarayıcı tarafından desteklenen sayfa geçiş etkinlikleri pageshow ve pagehide'dir.

Daha yeni Sayfa Yaşam Döngüsü etkinlikleri (freeze ve resume), sayfalar bfcache'ye girdiğinde veya buradan ayrıldığında ve CPU kullanımını en aza indirmek için bir arka plan sekmesinin dondurulması gibi başka durumlarda da dağıtılır. Bu etkinlikler yalnızca Chromium tabanlı tarayıcılarda desteklenir.

Bir sayfa bfcache'den geri yüklendiğinde gözlemleme

pageshow etkinliği, load etkinliğinden hemen sonra sayfa ilk olarak yüklenirken ve sayfa bfcache'den her geri yüklendiğinde tetiklenir. pageshow etkinliğinin bir persisted özelliği vardır. Bu özellik, sayfa bfcache'den geri yüklendiyse true, aksi takdirde false olur. Normal sayfa yüklemelerini bfcache geri yüklemelerinden ayırt etmek için persisted özelliğini kullanabilirsiniz. Örneğin:

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('This page was restored from the bfcache.');
  } else {
    console.log('This page was loaded normally.');
  }
});

Page Lifecycle API'yi destekleyen tarayıcılarda, sayfalar bfcache'den geri yüklendiğinde (pageshow etkinliğinden hemen önce) ve kullanıcı dondurulmuş bir arka plan sekmesini yeniden ziyaret ettiğinde resume etkinliği tetiklenir. Bir sayfanın dondurulduktan sonraki durumunu (bfcache'daki sayfaları içerir) güncellemek isterseniz resume etkinliğini kullanabilirsiniz ancak sitenizin bfcache isabet oranını ölçmek istiyorsanız pageshow etkinliğini kullanmanız gerekir. Bazı durumlarda her ikisini de kullanmanız gerekebilir.

Bfcache ölçümüyle ilgili en iyi uygulamalar hakkında ayrıntılı bilgi için Bfcache analiz ve performans ölçümünü nasıl etkiler? bölümüne bakın.

Bir sayfa bfcache'e girdiğinde gözlemle

pagehide etkinliği, bir sayfa kaldırıldığında veya tarayıcı sayfayı bfcache'ye yerleştirmeye çalıştığında tetiklenir.

pagehide etkinliğinin bir persisted özelliği de vardır. false ise o sayfanın bfcache'ye girmek üzere olmadığından emin olabilirsiniz. Ancak persisted değerinin true olması, sayfanın önbelleğe alınacağını garanti etmez. Bu, tarayıcının sayfayı önbelleğe almayı intends anlamına gelir, ancak önbelleğe alınmasını imkansız hale getiren başka faktörler de olabilir.

window.addEventListener('pagehide', (event) => {
  if (event.persisted) {
    console.log('This page *might* be entering the bfcache.');
  } else {
    console.log('This page will unload normally and be discarded.');
  }
});

Benzer şekilde, persisted true ise freeze etkinliği pagehide etkinliğinden hemen sonra tetiklenir, ancak bu yalnızca tarayıcının sayfayı önbelleğe almayı intends anlamına gelir. Daha sonra açıklanan çeşitli nedenlerden dolayı hesabın silinmesi gerekebilir.

Sayfalarınızı Bfcache için optimize edin

Tüm sayfalar bfcache'de depolanmaz ve bir sayfa orada depolansa bile süresiz olarak orada kalmaz. Aşağıdaki sayfalarda, sayfaların bfcache için uygun olmasına nelerin uygun olduğu özetlenmiş ve daha iyi önbellek isabet oranları için tarayıcının sayfanızı önbelleğe alma yeteneğini en üst düzeye çıkarmaya yönelik en iyi uygulamalar önerilmiştir.

unload yerine pagehide kullanın

Tüm tarayıcılarda bfcache için optimizasyon yapmanın en önemli yolu unload etkinlik işleyicilerini hiçbir zaman kullanmamaktır. Bunun yerine, pagehide yönergesini dinleyin. Çünkü bu anahtar, hem bir sayfa bfcache'e girdiğinde hem de unload her etkinleştiğinde tetiklenir.

unload, başlangıçta kullanıcı bir sayfadan ayrıldığında tetiklenecek şekilde tasarlanmış eski bir özelliktir. Bu durum artık geçerli değildir, ancak birçok web sayfası hâlâ tarayıcıların unload'yi bu şekilde kullandığı ve unload tetiklendikten sonra yüklenmemiş sayfanın var olmayı durduracağı varsayımına dayanarak çalışmaktadır. Tarayıcı, yüklenmeyen bir sayfayı önbelleğe almaya çalışırsa bu durum bfcache öğesini bozabilir.

Masaüstünde Chrome ve Firefox, unload işleyicileri içeren sayfaları bfcache için uygun olmayan hale getirir. Bu da riski azaltır, ancak birçok sayfanın önbelleğe alınmamasına ve dolayısıyla çok daha yavaş bir şekilde yeniden yüklenmesine neden olur. Safari, unload etkinlik işleyicileri ile bazı sayfaları önbelleğe almaya çalışır ancak olası kesintileri azaltmak için kullanıcı sayfadan ayrıldığında unload etkinliğini çalıştırmaz. Bu da unload işleyicilerini güvenilmez hale getirir.

unload uygulamasının mobildeki güvenilir olmaması, bozulma riskini azaltır. Bu nedenle, mobil cihazlarda Chrome ve Safari, unload etkinlik işleyicileri içeren sayfaları önbelleğe almaya çalışır. Mobil Firefox, tüm tarayıcıların WebKit oluşturma motorunu kullanmasını gerektiren iOS hariç, unload kullanan sayfaları bfcache için uygun değil olarak değerlendirir. Bu nedenle Safari gibi davranır.

Sayfalarınızdaki herhangi bir JavaScript'in unload kullanıp kullanmadığını belirlemek için Lighthouse'taki no-unload-listeners denetimini kullanmanızı öneririz.

Chrome'un unload desteğini sonlandırma planı hakkında bilgi edinmek için Kaldırma etkinliğini kullanımdan kaldırma sayfasını inceleyin.

Bir sayfada kaldırma işleyicilerin kullanılmasını önlemek için İzin Politikası'nı kullanın

Bazı üçüncü taraf komut dosyaları ve uzantıları, bir sayfaya kaldırma işleyicileri ekleyerek siteyi bfcache için uygun olmayacak şekilde yavaşlatabilir. Chrome 115 ve sonraki sürümlerde bunu önlemek için bir İzin Politikası kullanın.

Permission-Policy: unload()

Yalnızca beforeunload işleyicileri koşullu olarak ekle

beforeunload etkinliği, sayfalarınızı bfcache için uygun hale getirmez. Ancak güvenilir olmadığından yalnızca kesinlikle gerekli olduğunda kullanmanızı öneririz.

beforeunload için örnek bir kullanım alanı, kullanıcıya sayfayı terk etmesi durumunda kaybedeceği kaydedilmemiş değişiklikleri olduğu konusunda uyarmaktır. Bu durumda, beforeunload işleyicilerini yalnızca kullanıcıda kaydedilmemiş değişiklikler olduğunda eklemenizi ve bunları, aşağıdaki kodda olduğu gibi kaydedilmemiş değişiklikler kaydedildikten hemen sonra kaldırmanızı öneririz:

function beforeUnloadListener(event) {
  event.preventDefault();
  return event.returnValue = 'Are you sure you want to exit?';
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  window.addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  window.removeEventListener('beforeunload', beforeUnloadListener);
});

Cache-Control: no-store kullanımını en aza indir

Cache-Control: no-store, web sunucularının tarayıcıya yanıtı herhangi bir HTTP önbelleğinde depolamamasını söyleyen yanıtlar üzerinde ayarlayabileceği bir HTTP üst bilgisidir. Bu kaynak, hassas kullanıcı bilgilerini içeren kaynaklar (ör. giriş yapılarak erişilen sayfalar) için kullanılır.

bfcache bir HTTP önbelleği olmasa da tarayıcılar, sayfa kaynağında Cache-Control: no-store ayarlandığında (ancak herhangi bir alt kaynakta değil) sayfaları geçmişte bfcache'den hariç tutmuştur. Chrome, kullanıcı gizliliğini korurken bu davranışı değiştirmek için çalışmaktadır, ancak varsayılan olarak Cache-Control: no-store kullanan sayfalar bfcache için uygun değildir.

Bfcache için optimizasyon yapmak istiyorsanız Cache-Control: no-store öğesini yalnızca önbelleğe alınmaması gereken hassas bilgiler içeren sayfalarda kullanın.

Her zaman güncel içerik sunmak isteyen ancak hassas bilgiler içermeyen sayfalar için Cache-Control: no-cache veya Cache-Control: max-age=0 kullanın. Bunlar, tarayıcıya içeriği sunmadan önce yeniden doğrulamasını söyler ve bir sayfanın bfcache'den geri yüklenmesi HTTP önbelleğine dahil olmadığından sayfanın bfcache uygunluğunu etkilemez.

İçeriğiniz dakika dakika değişiyorsa sayfanızı bir sonraki bölümde açıklandığı gibi güncel tutmak için güncellemeleri pageshow etkinliğini kullanarak alın.

Bfcache geri yüklendikten sonra eski veya hassas verileri güncelleme

Siteniz kullanıcı durumu verilerini saklıyorsa ve özellikle bu veriler hassas kullanıcı bilgileri içeriyorsa, bir sayfa bfcache'den geri yüklendikten sonra bu verilerin güncellenmesi veya temizlenmesi gerekir.

Örneğin, bir kullanıcı herkese açık bir bilgisayarda bir siteden çıkış yaparsa ve sonraki kullanıcı geri düğmesini tıklarsa bfcache'den alınan eski veriler, ilk kullanıcının çıkış yaptığında temizlenmesini beklediği özel verileri içerebilir.

event.persisted true ise buna benzer durumları önlemek için sayfayı bir pageshow etkinliğinden sonra güncelleyin:

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Do any checks and updates to the page
  }
});

Bazı değişikliklerde, ileri gezinmelerin gezinme geçmişini koruyarak tam yeniden yüklemeyi zorlamak isteyebilirsiniz. Aşağıdaki kod, pageshow etkinliğinde siteye özgü bir çerezin olup olmadığını kontrol eder ve çerez bulunamazsa yeniden yüklenir:

window.addEventListener('pageshow', (event) => {
  if (event.persisted && !document.cookie.match(/my-cookie)) {
    // Force a reload if the user has logged out.
    location.reload();
  }
});

Ads ve Bfcache geri yükleme

Sayfanız her geri veya ileri gezinmede yeni bir reklam grubu sunabilmek için bfcache kullanmaktan kaçınmak cazip gelebilir. Ancak bu, site performansı için kötü bir durumdur ve sürekli olarak reklam etkileşimini artırmaz. Örneğin, kullanıcı bir reklamı tıklamak için sayfaya dönmeyi düşünebilir, ancak sayfa bfcache'den geri yüklenmesi yerine yeniden yüklenirse farklı bir reklam gösterebilir. Sayfanız için en iyi stratejiyi belirlemek üzere A/B testini kullanmanızı öneririz.

Bfcache geri yüklemesinde reklamları yenilemek isteyen siteler için bu Google Yayınlama Etiketi örneğinde olduğu gibi, sayfa performansını etkilemeden yalnızca event.persisted true olduğunda pageshow etkinliğindeki reklamları yenileyebilirsiniz. Sitenize yönelik en iyi uygulamalar hakkında daha fazla bilgi için reklam sağlayıcınızla görüşün.

window.opener referanslarından kaçının

Eski tarayıcılarda, bir sayfa rel="noopener" belirtilmeden target=_blank içeren bir bağlantıdan window.open() kullanılarak açıldıysa açılış sayfasında, açılan sayfanın pencere nesnesine bir referans olur.

Boş olmayan bir window.opener referansı olan bir sayfa, güvenlik riski olmasının yanı sıra erişmeye çalışan sayfaları bozabileceğinden bfcache'e güvenli bir şekilde yerleştirilemez.

Bu riskleri önlemek amacıyla window.opener referansları oluşturulmasını önlemek için rel="noopener" öğesini kullanın. Bu, tüm modern tarayıcılarda varsayılan davranıştır. Sitenizin bir pencere açması ve window.postMessage() kullanarak veya doğrudan pencere nesnesine başvuruda bulunarak kontrol etmesi gerekiyorsa ne açılan pencere ne de açıcı bfcache için uygun değildir.

Kullanıcı gitmeden önce açık bağlantıları kapatın

Daha önce belirtildiği gibi, bir sayfa bfcache'e yerleştirildiğinde, programlanmış tüm JavaScript görevlerini duraklatır ve sayfa önbellekten çıkarıldığında bu görevleri devam ettirir.

Bu planlanmış JavaScript görevleri yalnızca DOM API'lerine veya geçerli sayfadan izole edilmiş başka API'lere erişiyorsa, sayfa kullanıcı tarafından görülmezken bu görevlerin duraklatılması soruna neden olmaz.

Ancak bu görevler, aynı kaynaktaki diğer sayfalardan da erişilebilen API'lere (örneğin: IndexedDB, Web Locks ve WebSockets) bağlıysa bunların duraklatılması, bu sayfalardaki kodun çalışmasını engelleyerek bu sayfaları bozabilir.

Sonuç olarak, bir sayfa aşağıdakilerden birine sahipse bazı tarayıcılar sayfayı bfcache'a yerleştirmeye çalışmaz:

Sayfanız bu API'lerden herhangi birini kullanıyorsa pagehide veya freeze etkinliği sırasında bağlantıları ve gözlemcileri kaldırmanızı veya bağlantılarını kaldırmanızı kesinlikle öneririz. Böylece tarayıcı, diğer açık sekmeleri etkileme riski olmadan sayfayı güvenli bir şekilde önbelleğe alabilir. Ardından, sayfa bfcache'den geri yüklenirse pageshow veya resume etkinliği sırasında bu API'leri yeniden açabilir veya bunlara yeniden bağlanabilirsiniz.

Aşağıdaki örnekte, pagehide etkinlik işleyicide açık bir bağlantıyı kapatarak IndexedDB kullanan sayfaların bfcache için uygun olmasını nasıl sağlayacağınız gösterilmektedir:

let dbPromise;
function openDB() {
  if (!dbPromise) {
    dbPromise = new Promise((resolve, reject) => {
      const req = indexedDB.open('my-db', 1);
      req.onupgradeneeded = () => req.result.createObjectStore('keyval');
      req.onerror = () => reject(req.error);
      req.onsuccess = () => resolve(req.result);
    });
  }
  return dbPromise;
}

// Close the connection to the database when the user leaves.
window.addEventListener('pagehide', () => {
  if (dbPromise) {
    dbPromise.then(db => db.close());
    dbPromise = null;
  }
});

// Open the connection when the page is loaded or restored from bfcache.
window.addEventListener('pageshow', () => openDB());

Sayfalarınızın önbelleğe alınabilir olup olmadığını test edin

Chrome Geliştirici Araçları, sayfalarınızın Bfcache için optimize edildiğinden emin olmak amacıyla sayfalarınızı test etmenize ve uygun olmalarını engelleyebilecek sorunları belirlemenize yardımcı olabilir.

Bir sayfayı test etmek için:

  1. Chrome'da sayfaya gidin.
  2. DevTools'da Uygulama > Geri-İleri Önbellek'e gidin.
  3. Testi Çalıştır düğmesini tıklayın. Daha sonra Geliştirici Araçları, sayfanın bfcache'den geri yüklenip yüklenemeyeceğini belirlemek için sayfadan ayrılmayı dener.
Geliştirici Araçları'nda geri-ileri önbellek paneli
DevTools'daki Geri-İleri Önbellek paneli.

Test başarılı olursa panel "Geri-ileri önbellekten geri yüklendi" bildiriminde bulunur. Başarısız olursa panel bunun nedenini belirtir. Nedenlerin tam listesi için Chromium için geri yüklenmeyen nedenler listesi bölümüne bakın.

Bunun nedeni, geliştirici olarak ele alabileceğiniz bir konuysa panel bunu İşlem yapılabilir olarak işaretler.

Geliştirici Araçları'nın raporladığı bir sayfa bfcache'den geri yüklenemedi
Başarısız bir bfcache testi ve uygulanabilir bir sonuç.

Bu resimde, unload etkinlik işleyicinin kullanılması sayfa bfcache için uygun değildir. unload ürününden pagehide kullanımına geçerek şu sorunu düzeltebilirsiniz:

Yapılması gerekenler
window.addEventListener('pagehide', ...);
Yapılmaması gerekenler
window.addEventListener('unload', ...);

Lighthouse 10.0, benzer bir test gerçekleştiren bir bfcache denetimi de ekledi. Daha fazla bilgi için bfcache denetim belgelerine göz atın.

Bfcache analiz ve performans ölçümünü nasıl etkiler?

Sitenize yapılan ziyaretleri izlemek için bir analiz aracı kullanırsanız, Chrome daha fazla kullanıcı için bfcache'i etkinleştirdiğinden, raporlanan toplam sayfa görüntüleme sayısında bir düşüş fark edebilirsiniz.

Aslında, bfcache uygulayan diğer tarayıcılardan gelen sayfa görüntülemelerini muhtemelen eksik raporluyor olabilirsiniz. Bunun nedeni, çoğu popüler analiz kitaplığının bfcache geri yüklemelerini yeni sayfa görüntülemeler olarak izlememesidir.

Sayfa görüntüleme sayınıza bfcache geri yüklemelerini dahil etmek üzere pageshow etkinliği için işleyiciler ayarlayın ve persisted özelliğini kontrol edin.

Aşağıdaki örnekte, bu işlemin Google Analytics ile nasıl yapılacağı gösterilmektedir. Diğer analiz araçları da muhtemelen benzer bir mantık kullanır:

// Send a pageview when the page is first loaded.
gtag('event', 'page_view');

window.addEventListener('pageshow', (event) => {
  // Send another pageview if the page is restored from bfcache.
  if (event.persisted) {
    gtag('event', 'page_view');
  }
});

Bfcache isabet oranınızı ölçün

Henüz bfcache kullanmayan sayfaları tanımlamak amacıyla sayfa yüklemelerinin gezinme türünü aşağıdaki gibi ölçün:

// Send a navigation_type when the page is first loaded.
gtag('event', 'page_view', {
   'navigation_type': performance.getEntriesByType('navigation')[0].type;
});

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Send another pageview if the page is restored from bfcache.
    gtag('event', 'page_view', {
      'navigation_type': 'back_forward_cache';
    });
  }
});

back_forward gezinme ve back_forward_cache gezinme sayılarını kullanarak Bfcache isabet oranınızı hesaplayın.

Geri veya ileri gezinmenin bfcache'ı kullanmamasının nedenleri arasında aşağıdaki kullanıcı davranışları bulunur:

  • Tarayıcıdan çıkılıyor ve tarayıcı yeniden başlatılıyor.
  • Sekme kopyalanıyor.
  • Bir sekmeyi kapatma ve geri yükleme.

Bu durumlardan bazılarında, tarayıcı orijinal gezinme türünü koruyabilir ve geri veya ileri gezinme olmamasına rağmen bir tür back_forward gösterebilir. Gezinme türleri doğru şekilde raporlansa bile bellekten tasarruf etmek için bfcache düzenli olarak silinir.

Bu nedenle, web sitesi sahipleri tüm back_forward gezinmeleri için% 100 bfcache isabet oranı bekleyemezler. Ancak oranını ölçmek, bfcache kullanımını engelleyen sayfaları tespit etmenize yardımcı olabilir.

Chrome ekibi, geliştiricilerin bfcache isabet oranlarını iyileştirebilmesi amacıyla sayfaların neden bfcache kullanmadığını açığa çıkarmaya yardımcı olacak bir NotRestoredReasons API üzerinde çalışıyor.

Performans ölçümü

bfcache, alanda toplanan performans metriklerini, özellikle de sayfa yükleme sürelerini ölçen metrikleri olumsuz yönde etkileyebilir.

Bfcache gezinmeleri yeni bir sayfa yüklemeye başlamak yerine mevcut bir sayfayı geri yüklediği için toplanan sayfa yüklemelerinin toplam sayısı bfcache etkinleştirildiğinde azalır. Bununla birlikte, bfcache değişikliklerinin gerçekleştirildiği sayfa yüklemeleri, büyük olasılıkla veri kümenizdeki en hızlı sayfa yüklemeleri arasındaydı. Bunun nedeni, geri ve ileri gezinmeleri de dahil olmak üzere tekrarlanan sayfa yüklemeleri ve HTTP önbelleğine alma nedeniyle genellikle ilk sayfa yüklemelerinden daha hızlı yükleme yapılmasıdır. Dolayısıyla bfcache'i etkinleştirmek, kullanıcı için site performansını artırmanıza rağmen analizinizin daha yavaş sayfa yüklemeleri göstermesine neden olabilir.

Bu sorunu çözmenin birkaç yolu vardır. Birincisi, tüm sayfa yükleme metriklerine ilgili gezinme türleriyle ek açıklama eklemektir: navigate, reload, back_forward veya prerender. Böylece, genel dağılım negatif olsa bile bu gezinme türlerinde performansınızı izlemeye devam edebilirsiniz. Bu yaklaşımı, İlk Bayt Süresi (TTFB) gibi kullanıcı odaklı olmayan sayfa yükleme metrikleri için öneririz.

Önemli Web Verileri gibi kullanıcı merkezli metrikler için kullanıcının deneyimlerini daha doğru şekilde temsil eden bir değer raporlamak daha iyi bir seçenektir.

Core Web Vitals'a Etkisi

Önemli Web Verileri, çeşitli boyutlar (yükleme hızı, etkileşim, görsel kararlılık) genelinde kullanıcının web sayfasıyla ilgili deneyimini ölçer. Core Web Vitals metriklerinizin, kullanıcıların bfcache'nin varsayılan sayfa yüklemelerine göre daha hızlı gezinmeyle geri yüklendiği gerçeğini yansıtması önemlidir.

Chrome Kullanıcı Deneyimi Raporu gibi Önemli Web Verileri metriklerini toplayan ve raporlayan araçlar, bfcache geri yüklemelerini veri kümelerinde ayrı sayfa ziyaretleri olarak işler. Bfcache geri yüklemelerinden sonra bu metrikleri ölçmek için özel olarak hazırlanmış web performansı API'leri olmasa da mevcut web API'lerini kullanarak bunların değerlerini yaklaşık olarak tahmin edebilirsiniz:

  • Largest Contentful Paint (LCP) için pageshow etkinliğinin zaman damgası ile sonraki boyanan karenin zaman damgası arasındaki deltayı kullanın. Çünkü çerçevedeki tüm öğeler aynı anda boyanacaktır. Bfcache geri yüklemesi durumunda LCP ve FCP aynıdır.
  • Sonraki Boyamayla Etkileşim (INP) için mevcut Performans Gözlemcinizi kullanmaya devam edin ancak geçerli CLS değerini 0 olarak sıfırlayın.
  • Cumulative Layout Shift (CLS) için, mevcut Performance Observer'ınızı kullanmaya devam edin ancak geçerli CLS değerini 0 olarak sıfırlayın.

Bfcache'in her bir metriği nasıl etkilediği hakkında daha fazla bilgi edinmek için bağımsız Core Web Vitals metrik kılavuzları sayfalarına bakın. Bu metriklerin bfcache sürümlerinin nasıl uygulanacağına dair özel bir örnek için bunları web-vitals JS kitaplığına ekleyen PR bölümüne bakın.

Ek Kaynaklar