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… 🧵

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.

The other origin can “opt-in” to allow your site to give the actual render time if they believe it’s safe by setting the Timing-Allow-Origin HTTP Header, and many image CDNs do this. But if you have your own assets domain for serving images then maybe it doesn’t? If so, look into setting that!

However, after a lot of work (primarily by @nomster.bsky.social !) we believe this was a somewhat needless restriction for images as the information was fairly trivially exposed in other ways and was causing more problems than it was solving by being restricted.

We’re expecting to ship this fairly soon in Chrome (early next year maybe?) and remove one more confusing nuance for LCP! And remove one more difference between CrUX (which didn’t have this restriction) and RUM.

Here’s the full nerdy details for those interested: github.com/w3c/paint-ti... Or let me know if you have any questions!! /🧵