Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom metric for getting LCP image details
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"
// }
// ]
// }
@Nithanaroy

This comment has been minimized.

Copy link

@Nithanaroy Nithanaroy commented Jun 29, 2021

Nice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment