Fix missing FCP and LCP for prerendered pages (#621)

* Fix missing FCP and LCP for prerendered pages

* Switch to real prerender

* Fix tests

* Make more generic

* Fix tests

* Fix tests

* Fix TTFB test

* Fix TTFB test

* Fix INP tests

* Fix INP test

* Stop mocking initial hidden state

* Reset CLS test runs

* Fix FCP test

* Clean up

* Revert the new tab changes as doesn't open in initial hidden state anyway

* Cleanup

* Fix firefox test

* Apply suggestions from code review

Co-authored-by: Philip Walton <philipwalton@users.noreply.github.com>

* Update test/views/layout.njk

---------

Co-authored-by: Philip Walton <philipwalton@users.noreply.github.com>

Author: tunetheweb

src/lib/getVisibilityWatcher.ts

@@ -15,6 +15,7 @@
  */
 
 import {onBFCacheRestore} from './bfcache.js';
+import {getActivationStart} from './getActivationStart.js';
 
 let firstHiddenTime = -1;
 
@@ -64,11 +65,14 @@ const removeChangeListeners = () => {
 export const getVisibilityWatcher = () => {
   if (firstHiddenTime < 0) {
     // Check if we have a previous hidden `visibility-state` performance entry.
+    const activationStart = getActivationStart();
     /* eslint-disable indent */
     const firstVisibilityStateHiddenTime = !document.prerendering
       ? globalThis.performance
           .getEntriesByType('visibility-state')
-          .filter((e) => e.name === 'hidden')[0]?.startTime
+          .filter(
+            (e) => e.name === 'hidden' && e.startTime > activationStart,
+          )[0]?.startTime
       : undefined;
     /* eslint-enable indent */
 

test/e2e/onCLS-test.js

@@ -29,8 +29,12 @@ describe('onCLS()', async function () {
   this.retries(2);
 
   let browserSupportsCLS;
+  let browserSupportsPrerender;
   before(async function () {
     browserSupportsCLS = await browserSupportsEntry('layout-shift');
+    browserSupportsPrerender = await browser.execute(() => {
+      return 'onprerenderingchange' in document;
+    });
 
     // Set a standard screen size so thresholds are the same
     browser.setWindowSize(1280, 1024);
@@ -701,6 +705,9 @@ describe('onCLS()', async function () {
 
     await stubForwardBack();
 
+    // Give it time for beacons to come in
+    await browser.pause(2000);
+
     // clear any beacons from page load.
     await clearBeacons();
 
@@ -720,24 +727,35 @@ describe('onCLS()', async function () {
     assert.strictEqual(cls.navigationType, 'back-forward-cache');
   });
 
-  it('reports prerender as nav type for prerender', async function () {
+  it('reports prerender as nav type and excludes shifts that happen in prerender state', async function () {
     if (!browserSupportsCLS) this.skip();
+    if (!browserSupportsPrerender) this.skip();
 
     await navigateTo('/test/cls?prerender=1');
 
+    // Wait a bit to allow the prerender to happen
+    // and all loading shifts to complete
+    await browser.pause(2000);
+
+    const prerenderLink = await $('#prerender-link');
+    await prerenderLink.click();
+
+    await beaconCountIs(1);
+    await clearBeacons();
+
     // Wait until all images are loaded and rendered, then change to hidden.
     await imagesPainted();
     await stubVisibilityChange('hidden');
 
     await beaconCountIs(1);
     const [cls] = await getBeacons();
 
-    assert(cls.value > 0);
+    assert.strictEqual(cls.value, 0);
     assert(cls.id.match(/^v5-\d+-\d+$/));
     assert.strictEqual(cls.name, 'CLS');
     assert.strictEqual(cls.value, cls.delta);
     assert.strictEqual(cls.rating, 'good');
-    assert.strictEqual(cls.entries.length, 2);
+    assert.strictEqual(cls.entries.length, 0);
     assert.strictEqual(cls.navigationType, 'prerender');
   });
 

test/e2e/onFCP-test.js

@@ -20,14 +20,19 @@ import {browserSupportsEntry} from '../utils/browserSupportsEntry.js';
 import {navigateTo} from '../utils/navigateTo.js';
 import {stubForwardBack} from '../utils/stubForwardBack.js';
 import {stubVisibilityChange} from '../utils/stubVisibilityChange.js';
+import {webVitalsLoaded} from '../utils/webVitalsLoaded.js';
 
 describe('onFCP()', async function () {
   // Retry all tests in this suite up to 2 times.
   this.retries(2);
 
   let browserSupportsFCP;
+  let browserSupportsPrerender;
   before(async function () {
     browserSupportsFCP = await browserSupportsEntry('paint');
+    browserSupportsPrerender = await browser.execute(() => {
+      return 'onprerenderingchange' in document;
+    });
   });
 
   beforeEach(async function () {
@@ -71,11 +76,20 @@ describe('onFCP()', async function () {
 
   it('accounts for time prerendering the page', async function () {
     if (!browserSupportsFCP) this.skip();
+    if (!browserSupportsPrerender) this.skip();
 
     await navigateTo('/test/fcp?prerender=1');
 
     await beaconCountIs(1);
+    await clearBeacons();
+
+    // Wait a bit to allow the prerender to happen
+    await browser.pause(1000);
+
+    const prerenderLink = await $('#prerender-link');
+    await prerenderLink.click();
 
+    await beaconCountIs(1);
     const [fcp] = await getBeacons();
 
     const activationStart = await browser.execute(() => {
@@ -133,6 +147,7 @@ describe('onFCP()', async function () {
     await navigateTo('/test/fcp?invisible=1', {readyState: 'interactive'});
 
     await stubVisibilityChange('hidden');
+    await webVitalsLoaded();
     await stubVisibilityChange('visible');
 
     // Wait a bit to ensure no beacons were sent.
@@ -333,7 +348,11 @@ describe('onFCP()', async function () {
         /^(loading|dom-(interactive|content-loaded)|complete)$/,
       );
 
-      assert.deepEqual(fcp.attribution.fcpEntry, fcpEntry);
+      // TODO Firefox has a bug causing this to fail. Remove once fixed
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=1965441
+      if (browser.capabilities.browserName !== 'firefox') {
+        assert.deepEqual(fcp.attribution.fcpEntry, fcpEntry);
+      }
 
       // When FCP is reported, not all values on the NavigationTiming entry
       // are finalized, so just check some keys that should be set before FCP.
@@ -346,11 +365,21 @@ describe('onFCP()', async function () {
 
     it('accounts for time prerendering the page', async function () {
       if (!browserSupportsFCP) this.skip();
+      if (!browserSupportsPrerender) this.skip();
 
       await navigateTo(`/test/fcp?attribution=1&prerender=1`, {
         readyState: 'complete',
       });
 
+      await beaconCountIs(1);
+      await clearBeacons();
+
+      // Wait a bit to allow the prerender to happen
+      await browser.pause(1000);
+
+      const prerenderLink = await $('#prerender-link');
+      await prerenderLink.click();
+
       await beaconCountIs(1);
 
       const navEntry = await browser.execute(() => {

test/e2e/onINP-test.js

@@ -34,9 +34,13 @@ describe('onINP()', async function () {
 
   let browserSupportsINP;
   let browserSupportsLoAF;
+  let browserSupportsPrerender;
   before(async function () {
     browserSupportsINP = await browserSupportsEntry('event');
     browserSupportsLoAF = await browserSupportsEntry('long-animation-frame');
+    browserSupportsPrerender = await browser.execute(() => {
+      return 'onprerenderingchange' in document;
+    });
   });
 
   beforeEach(async function () {
@@ -431,12 +435,27 @@ describe('onINP()', async function () {
 
   it('reports prerender as nav type for prerender', async function () {
     if (!browserSupportsINP) this.skip();
+    if (!browserSupportsPrerender) this.skip();
 
-    await navigateTo('/test/inp?click=150&prerender=1', {
-      readyState: 'interactive',
-    });
+    await navigateTo('/test/inp?click=150&prerender=1');
 
-    const h1 = await $('h1');
+    await webVitalsLoaded();
+    await firstContentfulPaint();
+
+    let h1 = await $('h1');
+    await simulateUserLikeClick(h1);
+
+    // Wait a bit to allow the prerender to happen
+    await browser.pause(500);
+
+    const prerenderLink = await $('#prerender-link');
+    await prerenderLink.click();
+
+    await beaconCountIs(1);
+    await clearBeacons();
+    await webVitalsLoaded();
+
+    h1 = await $('h1');
     await simulateUserLikeClick(h1);
 
     // Ensure the interaction completes.