Merge pull request #281 from GoogleChrome/xo-response-start

Ignore TTFB for loads where responseStart is zero

src/onTTFB.ts

@@ -67,20 +67,23 @@ export const onTTFB = (onReport: ReportCallback, opts?: ReportOpts) => {
     const navEntry = getNavigationEntry();
 
     if (navEntry) {
+      const responseStart = navEntry.responseStart;
+
+      // In some cases no value is reported by the browser (for
+      // privacy/security reasons), and in other cases (bugs) the value is
+      // negative or is larger than the current page time. Ignore these cases:
+      // https://github.com/GoogleChrome/web-vitals/issues/137
+      // https://github.com/GoogleChrome/web-vitals/issues/162
+      // https://github.com/GoogleChrome/web-vitals/issues/275
+      if (responseStart <= 0 || responseStart > performance.now()) return;
+
       // The activationStart reference is used because TTFB should be
       // relative to page activation rather than navigation start if the
       // page was prerendered. But in cases where `activationStart` occurs
       // after the first byte is received, this time should be clamped at 0.
-      metric.value = Math.max(navEntry.responseStart - getActivationStart(), 0);
-
-      // In some cases the value reported is negative or is larger
-      // than the current page time. Ignore these cases:
-      // https://github.com/GoogleChrome/web-vitals/issues/137
-      // https://github.com/GoogleChrome/web-vitals/issues/162
-      if (metric.value < 0 || metric.value > performance.now()) return;
+      metric.value = Math.max(responseStart - getActivationStart(), 0);
 
       metric.entries = [navEntry];
-
       report(true);
 
       // Only report TTFB after bfcache restores if a `navigation` entry

test/e2e/onTTFB-test.js

@@ -16,6 +16,7 @@
 
 import assert from 'assert';
 import {beaconCountIs, clearBeacons, getBeacons} from '../utils/beacons.js';
+import {domReadyState} from '../utils/domReadyState.js';
 import {stubForwardBack} from '../utils/stubForwardBack.js';
 
 
@@ -175,15 +176,39 @@ describe('onTTFB()', async function() {
 
     const ttfb2 = await getTTFBBeacon();
 
-    assert(ttfb2.value >= 0);
     assert(ttfb2.id.match(/^v3-\d+-\d+$/));
+    assert.strictEqual(ttfb2.value, 0);
     assert.strictEqual(ttfb2.name, 'TTFB');
     assert.strictEqual(ttfb2.value, ttfb2.delta);
     assert.strictEqual(ttfb2.rating, 'good');
     assert.strictEqual(ttfb2.navigationType, 'back-forward-cache');
     assert.strictEqual(ttfb2.entries.length, 0);
   });
 
+  it('ignores navigations with invalid responseStart timestamps', async function() {
+    for (const rs of [-1, 0, 1e12]) {
+      await browser.url(`/test/ttfb?responseStart=${rs}`);
+
+      await domReadyState('complete');
+
+      // Wait a bit to ensure no beacons were sent.
+      await browser.pause(1000);
+
+      const loadBeacons = await getBeacons();
+      assert.strictEqual(loadBeacons.length, 0);
+
+      // Test back-forward navigations to ensure they're not sent either
+      // in these situations.
+      await stubForwardBack();
+
+      // Wait a bit to ensure no beacons were sent.
+      await browser.pause(1000);
+
+      const bfcacheBeacons = await getBeacons();
+      assert.strictEqual(bfcacheBeacons.length, 0);
+    }
+  });
+
   describe('attribution', function() {
     it('includes attribution data on the metric object', async function() {
       await browser.url('/test/ttfb?attribution=1');

test/views/ttfb.njk

@@ -24,6 +24,18 @@
 
   <p><a id="navigate-away" href="https://example.com">Navigate away</a></p>
 
+  <script>
+    // Set the blocking values based on query params if present.
+    const params = new URLSearchParams(location.search);
+
+    if (params.has('responseStart')) {
+      const navEntry = performance.getEntriesByType('navigation')[0];
+      Object.defineProperty(navEntry, 'responseStart', {
+        value: Number(params.get('responseStart')),
+      });
+    }
+  </script>
+
   <script type="module">
     import {onTTFB} from '{{ modulePath }}';