CODEWITHSUNDEEP
javascriptperformancelighthouseweb-performance
fraxture
fraxture

Reputation: 5530

What is the most complete way to gather the largest contentful paint metric in the field?

I would like to gather the "Largest Contentful Paint" metric programmatically in the "field" on actual user page loads and report it to a data collection tools.

I know that I can get this metric for individual pages in a more artificial context by running lighthouse on particular URLs, but I want to gather it when actual users are running my app.

I know that there is a new Largest Contentful Paint API in Javascript but it looks to have very partial support: https://developer.mozilla.org/en-US/docs/Web/API/Largest_Contentful_Paint_API. Chrome seems to have robust support but Firefox has none.

Is there any library, tool, or technique that compenstates in some way for this partial support?

Upvotes: 1

Views: 752

Answers (2)

Cole Ellison
Cole Ellison

Reputation: 331

Is there any library, tool, or technique that compenstates in some way for this partial support?

Basically, no. If the LCP API is not implemented by a browser, then it's not available (this is noted in the web-vitals package readme). However, this isn't the end of things. If you know which element is triggering LCP on Chrome, then you could write a listener that fires when that element has rendered on the page (implementation will be specific to how/where you are generating your client HTML). While this approach is more cumbersome, it would yield complete support across browsers. Worth mentioning here that this approach is decidedly cumbersome and not great to maintain.

Of course, you could also cut your losses and accept that not all browsers support the metric right now, but having some signal is better than none, especially if it is coming from actual site visitors.

Upvotes: 0

Ricky Smith
Ricky Smith

Reputation: 2399

Many metrics that have to do with the result of rendering must be collected by the browser that's performing the renderer. The Javascript API is a way to ask the browser for metrics that it is collecting during the render. If

Upvotes: 0

Related Questions