Post

Did you know if your load you LCP image from another origin (e.g. an image CDN) then LCP time may not be reported properly in RUM (but is in CrUX)? Let’s dig into why, and also how we’re looking to fix this very soon… 🧵

22 reposts66 likes

Browsers are VERY careful about cross-origin leaks. They can cause all sorts of security issues. In generally, one origin on the web, should not be allowed to know anything about what’s going on from another origin—even if it’s embedding content from that origin on its own page!

It doesn’t take much to come up with scenarios as to how this could be abused. For example if I include an image from another site that is only available to logged in users, then I can easily figure out whether a user is logged in to that site or not.

So web APIs are often deliberately limited to reduce any risks with this by exposing less data than they get for same-origin resources. One of those things is the LCP presentation time (when the pixels are drawn to screen and so viewable by the user). We didn’t want to expose this unconditionally.

So by default an LCP image from another origin does not give the actual LCP, but instead falls back to the load time of that image (as that info was exposed in other ways anyway). This can be MUCH earlier than the render time. E.g. if you preload the image, or have to run a lot of JS before render.

I’ve written a long question (on something else) for Barry but decided I’d wait until tomorrow so he could at least have some life on a Sunday - looks like I could have posted it anyway!

I’ve a date soon with a bear, marmalade sandwiches, a jungle in deepest, darkest Peru, and three children neglected by me for the last week. Plus also to give one amazing mum/wife a much needed break from said children. So I won’t be answering any questions for a bit!

😄 but also great to know. Thanks for sharing. I didn't know this but maybe because most external domain lcp images I've come across are on image cdn services

Not all img CDNs offer this. SpeedSize is an example. However, I reached out to them beginning this month to offer TAO as I had a few (Shopify) clients using their solution. And they then added TAO support (though only on request) 🥳