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!

0 reposts2 likes

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!