demo · v133

RUM dashboard for a third-party hero image

A simulated news article where the LCP element is a hero image hosted on a CDN that doesn't send Timing-Allow-Origin. Before 133, LCP analytics for that image were zero. Now they're a real timestamp, snapped to a 4ms grid.

third-party hero image (no TAO header set by picsum.photos)
LCP renderTime
—
ms since nav start
LCP loadTime
—
network ready
element-timing renderTime
—
hero element
grid step
—
should be 4ms

what changed

Before 133, if a cross-origin resource didn't send Timing-Allow-Origin, the renderTime in PerformanceObserver entries was 0 — an info-leak mitigation. The trouble: most real sites' hero images live on CDNs without TAO, so LCP was unusable for the elements RUM cared about most. The fix: report a real renderTime, but snapped to a multiple of 4ms. Same mitigation (no pixel-level cross-origin timing leak), useful signal. Reload this page a few times and watch the renderTime always end in a multiple of 4.

new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    console.log(e.name, e.renderTime);  // now non-zero even cross-origin
    // e.renderTime % 4 === 0
  }
}).observe({ type: "largest-contentful-paint", buffered: true });

see also

scenario focus

Select a scenario to focus its rendered example and summary.