Skip to content
Go for Launch Wiki

Cloudflare RUM Finds a Hidden-Viewport LCP Regression

Context

Section titled “Context”

This case study records a July 2026 production performance incident on an Astro site hosted by Cloudflare. It is historical evidence for the reusable rules in Cloudflare Production Observability.

The release had passed:

  • The exact-candidate staging workflow.
  • Mobile and desktop PageSpeed with 100 in Performance, Accessibility, Best Practices, and SEO.
  • Chromium and Playwright WebKit behavior tests.
  • Native Safari through the Xcode iOS Simulator.
  • Production HTTP and visual smoke checks.

Cloudflare Web Analytics still showed a slow real-user LCP tail on the homepage. Its debug view identified the desktop Capitol artwork at /images/Frame-5_1.webp as the affected resource.

Symptom

Section titled “Symptom”

The Cloudflare dashboard showed most LCP visits in the good range but retained a small poor tail. Element-level data connected the poor observations to the homepage hero artwork rather than to a server error, JavaScript task, or layout shift.

The important lesson was not that PageSpeed was wrong. PageSpeed measured one controlled profile and reported a valid result for that run. Cloudflare RUM measured a distribution of real production sessions, including cold caches, network variation, and actual resource scheduling.

Root Cause

Section titled “Root Cause”

The responsive hero contained three visual resources:

  1. A desktop decorative background.
  2. A mobile Capitol image.
  3. A desktop Capitol image.

CSS hid the inappropriate elements by viewport, but all three remained in HTML as eager image requests. Both mobile and desktop browsers downloaded resources they could not paint.

The page also preloaded the desktop decorative background instead of the image Cloudflare identified as the desktop LCP resource. One responsive source advertised the same 500-pixel file under multiple width descriptors.

The visual tests proved that the correct artwork was visible. They did not prove that hidden artwork was absent from the network request stream.

Fix

Section titled “Fix”

The hero moved mutually exclusive artwork into media-gated CSS declarations so the browser selects only the resource applicable to its viewport.

The page then used exact media-scoped preloads:

  • Mobile preloaded the mobile AVIF.
  • Desktop preloaded the desktop WebP that could become LCP.
  • The desktop decorative background was no longer incorrectly preloaded as the likely LCP resource.

The accessible mobile artwork retained an image label even though its bitmap moved into CSS. Stable geometry remained in place to avoid layout shift.

Regression Test

Section titled “Regression Test”

The new browser test records matching hero requests and asserts:

  • Mobile requests the mobile artwork.
  • Mobile does not request the desktop Capitol or desktop background.
  • Desktop requests the desktop Capitol and desktop background.
  • Desktop does not request the mobile artwork.

This network assertion is the pre-release control that would have caught the defect. A visibility assertion alone would not.

Cloudflare Verifier Proof

Section titled “Cloudflare Verifier Proof”

The first live run of scripts/verify-cloudflare-observability.mjs used a read-only Account Analytics token and the previous 24 hours of production RUM. It returned:

  • 37 route and device groups.
  • 47 LCP debug groups.
  • The homepage desktop LCP selector.
  • /images/Frame-5_1.webp as the LCP asset path.
  • A homepage desktop LCP P75 of 6,240 ms in the selected historical window.
  • A matching element-level P99 tail above the reviewed 8,000 ms advisory threshold.

Those values describe a rolling window that still contained pre-fix traffic. They prove that the verifier can retrieve and classify the same field evidence visible in the Cloudflare dashboard. They do not claim that every observation came from the corrected deployment.

The available token could read account RUM but did not have zone analytics read permission for edge HTTP status data. The verifier preserved the RUM result and recorded edge analytics as unavailable rather than discarding all evidence or silently passing it.

Acceptance Evidence

Section titled “Acceptance Evidence”

After the source fix:

  • Desktop requested the desktop Capitol and decorative background, but not the mobile artwork.
  • Mobile requested only the mobile artwork from the three hero resources.
  • The exact production candidate passed mobile and desktop PageSpeed with four scores of 100 in each strategy.
  • Mobile LCP measured 1.59 seconds in the accepted PageSpeed run.
  • Desktop LCP measured 0.45 seconds in the accepted PageSpeed run.
  • Responsive behavior tests passed across desktop and mobile viewports.
  • Production iPhone WebKit tests passed.
  • The native Safari Simulator render was visually clean.
  • Production HTML matched the tested candidate bytes.

Cloudflare’s rolling field window was expected to age out historical observations as new visits reached the corrected deployment.

Reusable Rules

Section titled “Reusable Rules”
  1. PageSpeed and production RUM are complementary evidence.
  2. Test the network resource set, not only element visibility.
  3. A hidden responsive <img> can still download.
  4. Match preloads to the measured LCP resource for each viewport.
  5. Inspect P75 and the slow tail, including P90 and P99.
  6. Preserve the exact selector and asset URL in incident evidence.
  7. Keep account RUM and zone HTTP permissions separate.
  8. Treat missing data and permission errors as explicit states, never as a pass.
  9. Preserve historical baselines and compare again only after sufficient post-release traffic.
  10. Keep WebKit and native Safari testing because Cloudflare RUM currently covers Chromium Core Web Vitals.

References

Section titled “References”