@westonruter
We could compress the URL metrics before the pagehide promise then it does not cause the issue that you have highlighted here. We could use this solution if we are not modifying the the URL metrics after the pagehide promise is resolved. Here's a patch that could resolve this issue.

diff --git a/plugins/optimization-detective/detect.js b/plugins/optimization-detective/detect.js
index cd42fd58..63ecb0c4 100644
--- a/plugins/optimization-detective/detect.js
+++ b/plugins/optimization-detective/detect.js
@@ -725,6 +725,11 @@ export default async function detect( {
 
 	log( 'Current URL Metric:', urlMetric );
 
+	let compressedPayloadBlob;
+	if ( gzdecodeAvailable ) {
+		compressedPayloadBlob = await compress( JSON.stringify( urlMetric ) );
+	}
+
 	// Wait for the page to be hidden.
 	await new Promise( ( resolve ) => {
 		win.addEventListener( 'pagehide', resolve, { once: true } );
@@ -826,7 +831,7 @@ export default async function detect( {
 	}
 
 	const payloadBlob = gzdecodeAvailable
-		? await compress( jsonBody )
+		? compressedPayloadBlob
 		: new Blob( [ jsonBody ], { type: 'application/json' } );
 	const percentOfBudget =
 		( payloadBlob.size / ( maxBodyLengthKiB * 1000 ) ) * 100;

Alternatively we could also disable URL metrics compression for the pagehide event if we are modifying the the URL metrics after the pagehide promise is resolved.

diff --git a/plugins/optimization-detective/detect.js b/plugins/optimization-detective/detect.js
index cd42fd58..4bce19ea 100644
--- a/plugins/optimization-detective/detect.js
+++ b/plugins/optimization-detective/detect.js
@@ -727,7 +727,14 @@ export default async function detect( {
 
 	// Wait for the page to be hidden.
 	await new Promise( ( resolve ) => {
-		win.addEventListener( 'pagehide', resolve, { once: true } );
+		win.addEventListener(
+			'pagehide',
+			function () {
+				gzdecodeAvailable = false; // Prevent sending compressed data.
+				resolve();
+			},
+			{ once: true }
+		);
 		win.addEventListener( 'pageswap', resolve, { once: true } );
 		doc.addEventListener(
 			'visibilitychange',

@b1ink0 Due to the client-side extension script modules, the URL Metric data may be modified at any point up until pagehide. Specifically here:

This used by Image Prioritizer to populate the lcpElementExternalBackgroundImage property:

(Granted, this might be able to be refactored so that it happens at initialize(), so that in the handleLCPMetric() function it calls the extendRootData() function every time. This would depend on passing extendRootData() and extendElementData() to initialize() and we'd need to define urlMetric earlier. This would allow Image Prioritizer to get rid of its externalBackgroundImages variable since it would be directly putting the LCP data into the urlMetric whenever a new one is detected.)

However, this also used by Embed Optimizer to populate the resizedBoundingClientRect property of an element:

This latter example is more important here because the resize observer will fire only when the embeds get resized, which due to them being lazy loaded, will only happen after the user scrolls down in the page and thus at an indeterminate time after the page has loaded. While the LCP metric happens around when the page loads, normally, the CLS metric is cumulative across the life of the page, so we need to be able to keep capturing the data.

The reason for sending the URL Metric at pagehide is also so that we can gather INP data which also gets reported throughout the life of the page.

Alternatively we could also disable URL metrics compression for the pagehide event if we are modifying the the URL metrics after the pagehide promise is resolved.

But this would entail sending the URL Metric data twice, once when the page loads and then again to try doing when leaving the page, right?

Alternatively we could also disable URL metrics compression for the pagehide event if we are modifying the the URL metrics after the pagehide promise is resolved.

But this would entail sending the URL Metric data twice, once when the page loads and then again to try doing when leaving the page, right?

No, this would only disable the URL metrics compression logic, ensuring that detect.js behaves the same as it did before the compression logic was introduced. However, this means that URL metrics compression will only occur on the visibilitychange event. I'm not sure if it's worth adding all this logic solely for the visibilitychange event, especially since most URL metrics will be collected by the pagehide event.

@b1ink0 OK, it seems that could work since I understand the pagehide event fires before the visibilitychange event when leaving a page. But yeah, this means compressed URL Metrics would only be sent at visibilitychange which is actually not the event we wanted to use in the first place as noted by this TODO:

I can't remember why I added the visibilitychange event, other than it being an alternative to using beforeunload, the same as pagehide is. I vaguely remember pagehide not working in some browsers at the time and that this is why I included it.

@b1ink0 Here's another idea, which is somewhat a variant of your idea: #1893 (comment)

The only downside is it means compression would happen potentially multiple times in the life of the page to re-compress the URL Metric data after each modification (with debouncing).