Free Core Web Vitals debugger
Find the exact element causing your layout shift
PageSpeed gives you a score. This names the image, ad slot or React component behind every shift, slow LCP and laggy tap, with a Next.js fix for each.
What it detects
Images without dimensions
Pinpoints the <img> or next/image that loads late and pushes content down, and gives the width/height or aspect-ratio fix.
Ad slots & embeds with no reserved space
Catches AdSense / GPT slots and iframes that start at 0px and expand when the creative arrives — even when they didn't fill during the scan.
Hydration swaps (useMediaQuery, isMounted)
Spots React components that render one layout on the server and another after hydration, and names the component.
Web-font reflow
Flags text that re-wraps when a web font replaces its fallback, with the next/font setup that prevents it.
LCP blockers
Lazy-loaded or unprioritized hero images, CSS-background LCPs and slow server response, with a TTFB → render-delay breakdown.
Scripts that hurt INP
Long Animation Frame attribution names the first- or third-party script that blocks the main thread when someone taps.
Questions
- How is this different from PageSpeed Insights?
- PageSpeed Insights tells you your CLS is 0.25. This tells you which element moved, what pushed it (an image, an ad slot, a component re-rendering after hydration) and which React component rendered it — then shows the Next.js fix. It records the same browser APIs (Layout Instability, Largest Contentful Paint, Long Animation Frames, Event Timing) but keeps the elements instead of just the scores.
- How does it find the React component?
- React attaches its internal fiber to every DOM node it renders. For each culprit element we walk up that fiber tree to the nearest components. Production builds usually minify component names, so for real names scan a preview or development deployment.
- What conditions does the scan use?
- A 390px-wide mobile viewport, a 4× slower CPU and Slow 4G networking (Lighthouse's mobile profile), with a cold cache. The page is scrolled to trigger lazy content and a few buttons are tapped to estimate INP.
- Why did a shift show up as a 'risk' rather than measured?
- Some problems don't fire on every load: an ad that didn't fill, an image served from cache. Risks are elements that have no reserved space in the final page and will shift for some real visitors even though they didn't shift during this scan.
- Can I monitor real users, not just a lab scan?
- Yes. Connect your site to WebGrowthSignal and the cookieless pixel reports each visitor's CLS, LCP and INP along with the element responsible, so you can see p75 field data per page and which selectors hurt real users most.
Stop guessing what to do next
Connect your website and get your first Growth Score today.
No credit card required · Setup in under 2 minutes