What exactly does loadTime attribute mean?

[xiaofud]

Does loadTime mean how long it take the browser to download(load) the image? Or Is it a timestamp indicating when the image starts loading or finishes loading?

[clelland]

loadTime is a timestamp, indicating the time that the image finished loading (but may be before it was actually rendered to the screen).

The timestamp is captured by the Process image that finished loading algorithm in Element Timing, at the point that an image element or CSS background finishes loading. It is then passed to LCP from Report image Element Timing once the image is rendered.

[xiaofud]

loadTime is a timestamp, indicating the time that the image finished loading (but may be before it was actually rendered to the screen).

The timestamp is captured by the Process image that finished loading algorithm in Element Timing, at the point that an image element or CSS background finishes loading. It is then passed to LCP from Report image Element Timing once the image is rendered.

Thanks for explaining! By the way, does renderTime minus loadTime mean how long the browser spent on actually rendering the image?

[clelland]

By the way, does renderTime minus loadTime mean how long the browser spent on actually rendering the image?

It's not guaranteed that the browser spent all of that time rendering; the browser (or the user's computer) may have been busy doing other things during that time as well. It's just the difference in time between when the network load finished, and when the image appeared on screen.

On Chrome, at least, and I expect that other browsers are similar, that time is taken up by image decoding, applying appropriate style and layout, painting the pixels into GPU memory, doing whatever other visual updates are required in the document, and then waiting for the display to actually update.

[tunetheweb]

A couple of other things to consider as well:

• Cross-origin image will have renderTime set to loadTime unless TAO header is present (i.e. you basically won't get the "render time").
• An image could be loaded well in advance (e.g. with <link rel=preload> or even a simple fetch) but then not used on the page for a while which would also create a delay between load and render time that isn't actually "browser render time".