Is There a Way to Make Sure Image Load Time is Less Than FCP?

Hao Liu

unread,

Nov 27, 2022, 5:57:42 PM11/27/22

to blink-dev

Hi,

I want a LCP entry that has loadTime < FCP, but can't make it.

what I did is

// Load the image

await new Promise(function (resolve, reject) {

let image = new Image();

image.addEventListener('load', () => { resolve(image); console.log('Resolve Time', performance.now()); });

image.addEventListener('error', reject);

image.src = url;

image.setAttribute('decoding', 'sync');

});

// Add a text so that FCP is set.

const paragraph = document.createElement('p');

paragraph.innerHTML = text;

document.body.appendChild(paragraph);

//Attach Image

document.body.appendChild(img);

// Get the LCP entry corresponding to the image

lcp = await getLCPStartTime();

fcp = getFCPStartTime();

But the LCP.loadTime is not the one printed out when the promise resolves

and is larger than FCP.

Is this expected behavior?

or

Is there a way to force the LCP.loadTime < FCP and RenderTime>FCP?

Thanks!

Yoav Weiss

unread,

Nov 28, 2022, 12:06:22 AM11/28/22

to Hao Liu, blink-dev

You could style the opacity of your <body> element to 0, then load your image, and then turn the opacity to 1 with JS.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ece19d26-cea8-48fb-b3f1-677012785433n%40chromium.org.

Hao Liu

unread,

Nov 28, 2022, 12:07:19 PM11/28/22

to blink-dev, yoav...@chromium.org, blink-dev, hao...@chromium.org

Thanks! would give it a try.

Reply all

Reply to author

Forward