Cloudflare Web Analytics - Deeper Core Web Vitals Diagnostics: LCP & INP Sub-Part Metrics in Real User Monitoring

<p>The Core Web Vitals tell you whether a page is slow but beyond perceived load time, layout instability, or responsiveness they do not guide you to the problematic area directly. To help you with this, Real User Monitoring (RUM) in Web Analytics now breaks Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) into their respective sub-parts. It also splits connection time into TCP and TLS. You can see this visualised in the dashboard or query it through the GraphQL Analytics API.</p> <div tabindex="-1" class="heading-wrapper level-h4"><h4 id="lcp-sub-parts">LCP sub-parts</h4><a class="anchor-link" href="#lcp-sub-parts"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span></a></div> <p>LCP is broken into four phases, so you can see which one is impacting your perceived load time:</p> <ol> <li><strong>Time to First Byte:</strong> how long the browser waits for the HTML document (<code>timeToFirstByte</code> in GraphQL).</li> <li><strong>Resource load delay:</strong> how long the browser takes to discover the LCP resource after the document starts arriving (<code>lcpResourceLoadDelay</code>).</li> <li><strong>Resource load duration:</strong> how long it takes to download that resource (<code>lcpResourceLoadTime</code>).</li> <li><strong>Element render delay:</strong> the gap between the resource arriving and the element appearing on screen (<code>lcpElementRenderDelay</code>).</li> </ol> <p>You do not have to remember all this detail, there are tooltips available to guide you next to each sub-part metric in the dashboard.</p> <img src="https://developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1704,height=384,format=webp/_astro/dash-web_analytics-lcp-sub-parts.CSpKXT00.png" alt="LCP sub-parts visual in the dashboard" loading="lazy" decoding="async" width="1704" height="384"> <div tabindex="-1" class="heading-wrapper level-h4"><h4 id="inp-sub-parts">INP sub-parts</h4><a class="anchor-link" href="#inp-sub-parts"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span></a></div> <p>INP is broken into three phases, guiding you to the area slowing down responsiveness:</p> <ol> <li><strong>Input delay:</strong> how long an interaction (click, tap or key press) is blocked before it can be processed (<code>inpInputDelay</code>).</li> <li><strong>Processing duration:</strong> how long your event handlers take to run (<code>inpProcessingDuration</code>).</li> <li><strong>Presentation delay:</strong> how long the browser takes to render the next frame after the handlers finish (<code>inpPresentationDelay</code>).</li> </ol> <img src="https://developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1704,height=382,format=webp/_astro/dash-web_analytics-inp-sub-parts.DWKDfc7K.png" alt="INP sub-parts visual in the dashboard" loading="lazy" decoding="async" width="1704" height="382"> <div tabindex="-1" class="heading-wrapper level-h4"><h4 id="tcp-and-tls-timing">TCP and TLS timing</h4><a class="anchor-link" href="#tcp-and-tls-timing"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span></a></div> <p>The page load timing breakdown now separates connection setup from the TLS handshake, so you can tell a slow network path from a slow TLS negotiation:</p> <ul> <li><strong>Connection time (excluding TLS)</strong> (<code>connectionTimeWithoutTLS</code>)</li> <li><strong>TLS handshake time:</strong> (<code>tlsTime</code>).</li> </ul> <p>Note: we've retained <code>connectionTime</code> in the GraphQL API so you can still analyze the combined time.</p> <div tabindex="-1" class="heading-wrapper level-h4"><h4 id="how-to-query-the-graphql-data">How to query the GraphQL data</h4><a class="anchor-link" href="#how-to-query-the-graphql-data"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span></a></div> <p>The sub-parts are available on <code>rumWebVitalsEventsAdaptiveGroups</code> as percentiles, for example: <code>lcpResourceLoadDelayP50</code> or <code>inpInputDelayP50</code>. The connection split is available on <code>rumPerformanceEventsAdaptiveGroups</code> as <code>connectionTimeWithoutTLSP50</code> and <code>tlsTimeP50</code>, and so on for the other percentiles.</p> <p>The percentiles available are: P25, P50, P75, P90, P95, P99, P999. All values are in microseconds. A negative value means the data is not available.</p> <div tabindex="-1" class="heading-wrapper level-h4"><h4 id="how-to-get-started">How to get started</h4><a class="anchor-link" href="#how-to-get-started"><span aria-hidden="true" class="anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span></a></div> <a href="https://dash.cloudflare.com/?to=/:account/:zone/speed/rum" data-nb-button class="group inline-flex w-max shrink-0 items-center justify-center rounded-full font-medium whitespace-nowrap no-underline shadow-xs transition-colors cursor-pointer select-none focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary-hover h-9 gap-1.5 px-3 text-sm" target="_blank"> Go to <strong>Real user monitoring</strong>&nbsp;&#8599; </a> <p>Head to the 'Core Web Vitals' section, here you can scroll down the report to see the sub-parts. The 'Page Load' section contains the Connection and TLS negotiation durations.</p> <p>For more on the data, refer to <a href="https://developers.cloudflare.com/web-analytics/">the Web Analytics docs</a> and <a href="https://developers.cloudflare.com/analytics/graphql-api/">the GraphQL Analytics API docs</a>.</p>