Skip to content

LCP is never reported in Safari #1925

@westonruter

Description

@westonruter

Bug Description

I just discovered that the onLCP callback from web-vitals.js never runs on Safari. This causes detect.js to await indefinitely here:

// 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,
}
);
} );

And the URL Metric data is never submitted to be stored. The issue isn't specific to web-vitals.js either. I never get any console logging for the following either:

const observer = new PerformanceObserver((list) => {
	const entries = list.getEntries();
	const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
	console.log("LCP:", lastEntry.startTime, lastEntry);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

I'm testing in Safari 18.3 on MacOS 15.3.1.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done 😃

Relationships

None yet

Development

No branches or pull requests

Issue actions