LCP and CLS fired on interaction

[lakshbhutani01]

I am using the below functions to log CLS and LCP to my analytics tool. For my case I am using Solidjs onCLS(sendToAnalytics); onLCP(sendToAnalytics);

 function sendToAnalytics(metric) {
   const pathname = window.location.pathname;
   console.log('pathname', pathname);
}

So, now since it is a SPA and when the user navigates from one page to another these callbacks get triggered with the new value of pathname since now they are on the new url, but technically these scores have been calculated on the previous page where the user came from, so ideally pathname should have the previous pathnames instead of new path. How to solve for such cases with this library? How to make sure the correct pathname gets passed for which the metric was calculated? This works fine for FCP and TTFB since it gets triggered on page load.

[tunetheweb]

You can get the origin URL the page was loaded from using this:

performance.getEntriesByType('navigation')[0].name

If you are wanting the previous URL for each page (e.g. to calc LCP and CLS per page) then that is currently not possible and requires the soft navs improvement currently being worked on in Chrome as given in the soft-navs branch.

[lakshbhutani01]

@tunetheweb I am not wanting wanting the previous URL for each page. The problem is that because CLS and LCP are not fired after load like FCP and TTFB are fired. CLS and LCP are fired either on interaction or visibility state hidde...so if the user navigates from one page (A) to another (B) in that case pathname = window.location.pathname;this pathname will be the new value of (B) but because the user landed on A and FCP and TTFB were recorded as pathname A. So, is it correct to pass B or A should be passed and how to achieve this?

[tunetheweb]

CWVs are currently only measured on the original landing page (A in your example). Which the above code snippet will give no matter if you soft nav to B, C, or whever. So, to match CrUX, that should always be used.

However, that does mean you won't get any CWVs for the soft navs. Which matches CrUX, but is obviously not ideal (hence why we are trying to solve this, but that's a longer term piece of work!).

[lakshbhutani01]

So, using this performance.getEntriesByType('navigation')[0].name;to log pathname and sending it to my analytics should be fine since this gives the value of the page url that was loaded in

function sendToAnalytics(metric) {
  //   const pathname = window.location.pathname;
  const pathname = performance.getEntriesByType('navigation')[0].name;
  console.log('pathname', pathname);
}

instead of window.location.pathname;

[tunetheweb]

Yup. Will close this issue then but let us know if you've any other questions.

Longer term, should we add soft navs measurements, we're looking to add a navigationId entries to the performance entries to allow the URL the metric is for to be reported against that URL. See here: https://developer.chrome.com/docs/web-platform/soft-navigations-experiment#metrics-url