In poor CLS mode this banner shows up 1.2 seconds after load and pushes the whole page down.
This page breaks the three Core Web Vitals on purpose. Watch the scorecard above, flip each one to good, and then find your numbers in New Relic.
LCP and CLS are decided while the page loads, so changing them reloads the page. Both modes are saved on your data as lcpMode and clsMode. INP depends on your clicks, so it has its own lab. The scorecard in the header updates live.
LCP is when the biggest thing in the viewport finishes painting, here the hero image. In poor mode JavaScript adds it after 4.5 seconds.
<!-- The fix: ship it in HTML, fetch it first --> <link rel="preload" as="image" href="hero.jpg" fetchpriority="high"> <img src="hero.jpg" width="2400" height="1000">
Tip: LCP stops updating at your first click, so let the hero load first.
CLS adds up how far visible content moves on its own. In poor mode a banner, recommendations and a shipping notice arrive late and push the page down. In good mode their space is reserved.
Shifts within 500 ms of your input do not count. Try both:
INP is how long the page takes to respond after you click, tap or type. Click each button and watch the log.
// The fix: show feedback, then do the heavy work button.textContent = 'Working…' await new Promise(r => requestAnimationFrame(() => setTimeout(r))) recalculateTotals()
Core Web Vitals land as PageViewTiming events, one per metric (timingName = lcp, cls, inp, and more). Durations are stored in seconds.
Every vital from your visits, with the LCP element and the button that caused your worst INP.
The 75th percentile is how Google judges a page. Compare every visitor's runs by mode.
vitals.html to see vitals for just this page.interactionTarget, inputDelay, processingDuration and presentationDelay tell you which element was slow and why.