Custom metric for getting LCP image details

getLCPdetails.js

function getLcpElement() {
  return new Promise((resolve) => {
    new PerformanceObserver((entryList) => {
      const lcpCandidates = entryList.getEntries();
      const naiveLcpEntry = lcpCandidates[lcpCandidates.length - 1];

      resolve(naiveLcpEntry);
    }).observe({ type: "largest-contentful-paint", buffered: true });
  }).then(({ startTime, element, url, size, loadTime, renderTime }) => {
    let attributes = [];
    for (let index = 0; index < element.attributes.length; index++) {
      const ele = element.attributes.item(index);
      attributes[index] = { name: ele.name, value: ele.value };
    }

    return {
      startTime,
      nodeName: element.nodeName,
      url,
      size,
      loadTime,
      renderTime,
      attributes,
    };
  });
}

getLcpElement().then((res) => console.log(res));

//{
//     "startTime": 202.899,
//     "nodeName": "IMG",
//     "url": "https://res.cloudinary.com/siacodes/image/upload/q_auto,f_auto,w_928/v1607719366/sia.codes/A_possum_and_a_movie_camera_1943_f4yflt.jpg",
//     "size": 634068,
//     "loadTime": 198.5,
//     "renderTime": 202.899,
//     "attributes": [
//         {
//             "name": "src",
//             "value": "https://res.cloudinary.com/siacodes/image/upload/q_auto,f_auto,w_928/v1607719366/sia.codes/A_possum_and_a_movie_camera_1943_f4yflt.jpg"
//         },
//         {
//             "name": "alt",
//             "value": ""
//         },
//         {
//             "name": "loading",
//             "value": "lazy"
//         }
//     ]
// }

Nice!