Merge pull request #220 from GoogleChrome/ttfb-bfcache

Report TTFB after a bfcache restore
GoogleChrome · Apr 25, 2022 · 230124b · 230124b
2 parents c9aed5a + aeb6bc9
commit 230124b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/src/getTTFB.ts b/src/getTTFB.ts
@@ -16,6 +16,7 @@
 
 import {bindReporter} from './lib/bindReporter.js';
 import {initMetric} from './lib/initMetric.js';
+import {onBFCacheRestore} from './lib/bfcache.js';
 import {getNavigationEntry} from './lib/getNavigationEntry.js';
 import {ReportHandler} from './types.js';
 
@@ -31,8 +32,8 @@ const afterLoad = (callback: () => void) => {
 }
 
 export const getTTFB = (onReport: ReportHandler, reportAllChanges?: boolean) => {
-  const metric = initMetric('TTFB');
-  const report = bindReporter(onReport, metric, reportAllChanges);
+  let metric = initMetric('TTFB');
+  let report = bindReporter(onReport, metric, reportAllChanges);
 
   afterLoad(() => {
     const navigationEntry = getNavigationEntry();
@@ -51,4 +52,11 @@ export const getTTFB = (onReport: ReportHandler, reportAllChanges?: boolean) =>
       report(true);
     }
   });
+
+  onBFCacheRestore((event) => {
+    metric = initMetric('TTFB');
+    report = bindReporter(onReport, metric, reportAllChanges);
+    metric.value = performance.now() - event.timeStamp;
+    report(true);
+  });
 };
diff --git a/test/e2e/getTTFB-test.js b/test/e2e/getTTFB-test.js
@@ -113,35 +113,38 @@ describe('getTTFB()', async function() {
     assertValidEntry(ttfb.entries[0]);
   });
 
-  it('does not report after a bfcache restore', async function() {
+  it('reports after a bfcache restore', async function() {
     await browser.url('/test/ttfb');
 
-    const ttfb = await getTTFBBeacon();
+    const ttfb1 = await getTTFBBeacon();
 
-    if (browser.capabilities.browserName === 'firefox' && !ttfb) {
+    if (browser.capabilities.browserName === 'firefox' && !ttfb1) {
       // Skipping test in Firefox due to entry not reported.
       this.skip();
     }
 
-    assert(ttfb.value >= 0);
-    assert(ttfb.value >= ttfb.entries[0].requestStart);
-    assert(ttfb.value <= ttfb.entries[0].loadEventEnd);
-    assert(ttfb.id.match(/^v2-\d+-\d+$/));
-    assert.strictEqual(ttfb.name, 'TTFB');
-    assert.strictEqual(ttfb.value, ttfb.delta);
-    assert.strictEqual(ttfb.navigationType, 'navigate');
-    assert.strictEqual(ttfb.entries.length, 1);
+    assert(ttfb1.value >= 0);
+    assert(ttfb1.value >= ttfb1.entries[0].requestStart);
+    assert(ttfb1.value <= ttfb1.entries[0].loadEventEnd);
+    assert(ttfb1.id.match(/^v2-\d+-\d+$/));
+    assert.strictEqual(ttfb1.name, 'TTFB');
+    assert.strictEqual(ttfb1.value, ttfb1.delta);
+    assert.strictEqual(ttfb1.navigationType, 'navigate');
+    assert.strictEqual(ttfb1.entries.length, 1);
 
-    assertValidEntry(ttfb.entries[0]);
+    assertValidEntry(ttfb1.entries[0]);
 
     await clearBeacons();
     await stubForwardBack();
 
-    // Wait a bit to ensure no beacons were sent.
-    await browser.pause(1000);
+    const ttfb2 = await getTTFBBeacon();
 
-    const bfcacheRestoreBeacons = await getBeacons();
-    assert.strictEqual(bfcacheRestoreBeacons.length, 0);
+    assert(ttfb2.value >= 0);
+    assert(ttfb2.id.match(/^v2-\d+-\d+$/));
+    assert.strictEqual(ttfb2.name, 'TTFB');
+    assert.strictEqual(ttfb2.value, ttfb2.delta);
+    assert.strictEqual(ttfb2.navigationType, 'back_forward_cache');
+    assert.strictEqual(ttfb2.entries.length, 0);
   });
 });