WebPageTest custom metric to measure the LCP resource load delay diagnostic.

wpt_lcp_rld.js

[lcp_rld]
// https://web.dev/optimize-lcp/#monitor-lcp-breakdown-in-javascript
return new Promise(resolve => {
  new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    const navEntry = performance.getEntriesByType('navigation')[0];
    const lcpResEntry = performance
      .getEntriesByType('resource')
      .filter((e) => e.name === lcpEntry.url)[0];

    // Ignore LCP entries that aren't images to reduce DevTools noise.
    // Comment this line out if you want to include text entries.
    if (!lcpEntry.url) return;

    // Compute the start and end times of each LCP sub-part.
    // WARNING! If your LCP resource is loaded cross-origin, make sure to add
    // the `Timing-Allow-Origin` (TAO) header to get the most accurate results.
    const ttfb = navEntry.responseStart;
    const lcpRequestStart = Math.max(
      ttfb,
      // Prefer `requestStart` (if TOA is set), otherwise use `startTime`.
      lcpResEntry ? lcpResEntry.requestStart || lcpResEntry.startTime : 0
    );
    
    resolve(lcpRequestStart - ttfb);
  }).observe({type: 'largest-contentful-paint', buffered: true});
});