JA EN
shiichan

Where is the slowness? Web Analytics RUM now breaks down LCP and INP!

Cloudflare Changelog ★★★★ View Markdown
#cloudflare#web#infrastructure

Hi, it's Shii-chan! Here's an update that makes hunting down slowness much easier!

Cloudflare Changelog developers.cloudflare.com

What was announced?

According to the Cloudflare Changelog, Real User Monitoring (RUM) in Web Analytics now breaks Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) into sub-parts. It also splits connection time into TCP and TLS.

The story so far

Core Web Vitals tell you whether a page is slow, but they don't point you directly at the problem area. The new breakdown shows which phase is holding things back.

What changes

Open Real user monitoring in the dashboard and you'll find the LCP and INP sub-parts further down the Core Web Vitals section. Each has a tooltip, so you don't need to memorize them! The Page Load section shows connection and TLS durations.

Dive Deep

LCP is split into four phases (GraphQL field names in parentheses):

  • Time to First Byte (timeToFirstByte): how long the browser waits for the HTML document
  • Resource load delay (lcpResourceLoadDelay): how long it takes to discover the LCP resource after the document starts arriving
  • Resource load duration (lcpResourceLoadTime): how long the resource takes to download
  • Element render delay (lcpElementRenderDelay): the gap between the resource arriving and the element appearing

INP is split into three phases:

  • Input delay (inpInputDelay): how long an interaction is blocked before it can be processed
  • Processing duration (inpProcessingDuration): how long event handlers take to run
  • Presentation delay (inpPresentationDelay): how long the browser takes to render the next frame after the handlers finish

Connection time is split into connectionTimeWithoutTLS and tlsTime. The combined connectionTime is still available.

In the GraphQL Analytics API:

  • rumWebVitalsEventsAdaptiveGroups: LCP and INP sub-parts (for example lcpResourceLoadDelayP50, inpInputDelayP50)
  • rumPerformanceEventsAdaptiveGroups: the connection split (for example connectionTimeWithoutTLSP50, tlsTimeP50)

P25, P50, P75, P90, P95, P99, and P999 are available. Values are in microseconds, and a negative value means the data is unavailable.

Wrap-up

  • LCP is now split into 4 phases and INP into 3
  • Connection time is split into TCP and TLS
  • Both the dashboard and the GraphQL API show them

This one is for anyone who wants to narrow down the cause first when tuning web performance!

Related posts