Why Performance Data Needs Debugging Data
Slow pages cost you visitors. Google's research shows that increasing page load time from 1s to 3s raises bounce rates by 32%, and from 1s to 6s by 106%. But knowing your page is slow is only half the battle. To actually fix the problem, you need to know which elements on the page are causing the delay.
Cloudflare's Web Analytics is a privacy-focused real user measurement tool that uses a lightweight JavaScript beacon. It collects no client-side state (no cookies or localStorage) and doesn't fingerprint users via IP address or User Agent. Earlier this year, the product absorbed Browser Insights, bringing Core Web Vitals — specifically Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) — into the measurement dashboard.
Now the tool is adding a layer of diagnosis on top of those measurements, designed to guide users through a simple loop: measure the real user experience, grade it, and show which page element to tweak for improvement.
Vitals Explorer: Element-Level Insights
The new Vitals Explorer feature shows which elements on a page most negatively affect user experience metrics. The JavaScript beacon has been updated automatically to gather the necessary measurements — still without any visitor-identifying data — so site owners need to do nothing to enable it.
In the Core Web Vitals section of Web Analytics, three graphs now grade user experience for LCP, FID, and CLS. Below each graph is a debug section listing the top five elements with negative impact on that metric. Selecting an element reveals its impact and exact selectors, making it simple to judge whether the element should stay as-is.
The Page Load Time page has also been upgraded with First Paint and First Contentful Paint measurements. Alongside the existing page load summary and timing graph, these additions help users quickly identify regressions in those paint milestones.
What the Beacon Collects
Debugging data is measured for the lifespan of the page, until the user closes the tab or the browser's visibilityState changes to hidden. For every Core Web Vital, the following fields are captured:
- Element — a CSS selector representing the DOM node with negative impact. Developers can run
document.querySelector(<element_name>)in the browser console to locate it. - Path — the URL path at capture time.
- Value — the metric value: milliseconds for LCP or FID, a score for CLS.
For LCP specifically, the beacon also records the source URL (image, text, web font, etc.) and the object's Size in bytes. For FID, it captures the event Name such as mousedown, keydown, or pointerdown.
CLS debugging includes layout information as JSON, showing width, height, x/y positions, left, right, top, and bottom. Two rects are recorded: CurrentRect (layout after the largest shift, shown as "Current" in the UI) and PreviousRect (layout before the shift, shown as "Previous"). Observing how these values change reveals the shifts hurting the page's layout stability.
These measurement details rely on standard browser APIs documented by Google in their field debugging post.
Where This Leads
Vitals Explorer is the first step in a broader plan to apply the same grade-and-act structure to more Web Analytics measurements. The goal is to keep pushing users toward concrete actions that improve visitor experience, rather than stopping at abstract scores.
