LCP is never reported when a page is opened in a background tab

[westonruter]

Bug Description

I just noticed in Chrome that when I open a link in a new tab (in the background), the callback passed to onLCP() in web-vitals.js is never invoked, this causes the detection logic to await indefinitely at:

performance/plugins/optimization-detective/detect.js

Lines 657 to 676 in 47eef00

	// Obtain at least one LCP candidate. More may be reported before the page finishes loading.
	await new Promise( ( resolve ) => {
	onLCP(
	/**
	* Handles an LCP metric being reported.
	*
	* @param {LCPMetric|LCPMetricWithAttribution} metric
	*/
	( metric ) => {
	lcpMetricCandidates.push( metric );
	resolve();
	},
	{
	// This avoids needing to click to finalize LCP candidate. While this is helpful for testing, it also
	// ensures that we always get an LCP candidate reported. Otherwise, the callback may never fire if the
	// user never does a click or keydown, per <https://github.com/GoogleChrome/web-vitals/blob/07f6f96/src/onLCP.ts#L99-L107>.
	reportAllChanges: true,
	}
	);
	} );

I wonder if this is an intentional behavior for browsers to not report LCP in this situation.

Steps to reproduce

1. Enable WP_DEBUG
2. Click a link to open a page in a new tab (in the backgroind)
3. Open the tab
4. See that the last log entry is "Proceeding with detection", whereas it is expected last log entry after the page load is "Current URL Metric".

[westonruter]

This seems to fix the problem, waiting for the page to become visible before proceeding to call onLCP():

diff --git a/plugins/optimization-detective/detect.js b/plugins/optimization-detective/detect.js
index cd42fd583..db2669f2d 100644
--- a/plugins/optimization-detective/detect.js
+++ b/plugins/optimization-detective/detect.js
@@ -496,6 +496,14 @@ export default async function detect( {
 		} );
 	}
 
+	if ( document.visibilityState === 'hidden' ) {
+		await new Promise( ( resolve ) => {
+			document.addEventListener( 'visibilitychange', resolve, {
+				once: true,
+			} );
+		} );
+	}
+
 	// TODO: Does this make sense here? Should it be moved up above the isViewportNeeded condition?
 	// As an alternative to this, the od_print_detection_script() function can short-circuit if the
 	// od_is_url_metric_storage_locked() function returns true. However, the downside with that is page caching could

[westonruter]

Opened an issue with web-vitals.js to get confirmation: GoogleChrome/web-vitals#595

[westonruter]

After chatting with @tunetheweb about this, it turns out this is intentional. See GoogleChrome/web-vitals#595 (comment).

Since onLCP will never run on a page opened in a background tab (but it will run on a prerendered page with speculation rules), we can add this as a short-circuit condition to prevent confusion in the future for why detection seems to stall indefinitely at onLCP:

--- a/plugins/optimization-detective/detect.js
+++ b/plugins/optimization-detective/detect.js
@@ -422,6 +422,11 @@ export default async function detect( {
 		return;
 	}
 
+	if ( document.visibilityState === 'hidden' && ! document.prerendering ) {
+		log( 'Page opened in background tab so URL Metric is not collected.' );
+		return;
+	}
+
 	// Abort if the current viewport is not among those which need URL Metrics.
 	const urlMetricGroupStatus = getGroupForViewportWidth(
 		win.innerWidth,