--- title: "Trace each failing Core Web Vital to its root cause" description: "Find the element, task, or layout shift behind a failing LCP, INP, or CLS score with DevTools, PageSpeed Insights, and web-vitals attribution." canonical: "https://scalewithsearch.com/articles/core-web-vitals-debugging" date: "2026-03-20" modified: "2026-10-02" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Trace each failing Core Web Vital to its root cause. Google Search Console flags a group of URLs as "Poor" for Core Web Vitals. The ticket says "optimize images and reduce JavaScript." A developer spends a week on generic fixes, and the report does not move. Nobody found the element or task that actually fails. Core Web Vitals are three field metrics that Google's ranking systems use to assess page experience. Largest Contentful Paint (LCP) measures loading. Interaction to Next Paint (INP) measures responsiveness. Cumulative Layout Shift (CLS) measures visual stability. This article shows you how to trace each failure to a specific cause with Chrome DevTools, Lighthouse, PageSpeed Insights, and the `web-vitals` library. For the code patterns that fix each cause, read [Core Web Vitals engineering](/articles/core-web-vitals-engineering). ## Know the thresholds and the data source Google assesses each metric at the 75th percentile of real page loads. A page passes when 75 percent of loads meet the "good" threshold. | Metric | Good | Needs improvement | Poor | |---|---|---|---| | LCP | 2.5 s or less | 2.5 s to 4.0 s | Over 4.0 s | | INP | 200 ms or less | 200 ms to 500 ms | Over 500 ms | | CLS | 0.1 or less | 0.1 to 0.25 | Over 0.25 | LCP marks when the largest visible element finishes rendering: a hero image, a heading, a video poster. INP measures the latency of all clicks, taps, and key presses over the page's life and reports one of the slowest. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. CLS sums unexpected layout shifts, such as a button that moves when an image loads above it. Search Console reports field data from real Chrome users. PageSpeed Insights shows field data when enough exists, plus a Lighthouse lab run. Lab data simulates one device and one network, so it can pass while real users fail. Diagnose with lab tools; judge success with field data. ## Choose the DevTools panel Start with a URL from the failing group and the same device class. Each panel answers a different diagnostic question: | Panel | Evidence to inspect | Metric | |---|---|---| | Lighthouse | Page-load opportunities; TBT as a responsiveness proxy | LCP, CLS; INP only in eligible Timespan runs | | Performance | Network, tasks, interactions, rendering, shifts | LCP, INP, CLS | | Network | Resource priority, request phases, cache behavior | LCP | | Coverage | CSS and JavaScript bytes unused in the recorded journey | LCP, INP | | Rendering | Layout shift regions and repaints | CLS | | Memory | Heap growth, detached nodes, retained listeners | INP in long sessions | ### Record Coverage before removing code Open **More tools > Coverage**, start recording, reload, and perform the slow interaction. Expand the largest CSS and JavaScript files to inspect unused ranges. Repeat menus and other relevant states before marking code as unused. A single journey does not prove a feature is dead. Remove confirmed dead code, tree-shake libraries, or split rarely used features into on-demand chunks. ### Compare heap snapshots during a long session In **Memory**, take a heap snapshot. Repeat the suspect action, such as opening and closing a modal, then take another snapshot. Compare retained objects and detached DOM nodes. Inspect retainers for listeners or component references that keep removed elements alive. Use allocation recording to locate growing allocations. Clean up the references, repeat the same journey, and check whether heap growth and interaction latency improve together. ## Find the LCP element first You cannot fix LCP until you know which element it is. In Chrome DevTools: 1. Open DevTools with `F12`, or right-click and select **Inspect**. 2. Open the **Performance** panel. 3. Record, reload the page, and stop the recording. 4. Find the **LCP** marker in the timeline. 5. Select the marker to see the element that triggered it. Common LCP elements are hero images, CSS background images, large headings, video thumbnails, and carousel images. Then split the LCP time into its four parts. The attribution build of `web-vitals` reports them from real users: ```javascript import {onLCP} from 'web-vitals/attribution'; onLCP(({value, attribution}) => { console.log('LCP (ms):', value, attribution.element); console.log('Time to first byte:', attribution.timeToFirstByte); console.log('Resource load delay:', attribution.resourceLoadDelay); console.log('Resource load duration:', attribution.resourceLoadDuration); console.log('Element render delay:', attribution.elementRenderDelay); }); ``` These field names apply to `web-vitals` version 4 and later, released in 2024. The largest part tells you where to look next. ## Check each LCP cause in order **Slow server response.** LCP cannot be faster than the time to first byte (TTFB). Google's web.dev guidance treats a TTFB of 0.8 seconds or less as good. Measure it from the command line: ```bash curl -w "TTFB: %{time_starttransfer}\n" -o /dev/null -s https://example.com ``` Common causes are slow database queries, uncached dynamic pages, weak hosting, heavy server-side processing, and CDN misconfiguration. Typical fixes are server-side caching with Redis or Memcached, and database indexes and fewer joins. A CDN such as Cloudflare or Amazon CloudFront, HTTP/2 or HTTP/3, and a larger hosting tier help too. **Render-blocking resources.** CSS and synchronous JavaScript in the document head delay the first render. In PageSpeed Insights, open the diagnostic for render-blocking resources; it lists the exact files. Inline the CSS for above-the-fold content, and load the rest without blocking: ```html ``` For JavaScript, add the `defer` attribute when execution order matters. Add `async` when the file is independent of other code. **A late or heavy LCP image.** A large resource load delay means the browser found the image late. A large load duration means the file is too big. Preload the image and raise its priority, serve modern formats, and size it for the viewport: ```html Hero image Description ``` AVIF often produces smaller files than WebP at similar quality. Keep a fallback format for older browsers. **Client-side rendering.** Single-page applications built with React, Vue, or Angular often have a large element render delay. The content does not exist until JavaScript runs. To confirm, open **View page source**. If the LCP content is missing from the HTML, client-side rendering is the cause. Fix it with server-side rendering in Next.js or Nuxt, or with hybrid rendering. Use static generation for content that does not vary by user. The trade-offs are in [server-side rendering for SEO](/articles/server-side-rendering-seo). ## Find the slow interactions for INP INP failures come from the main thread. Something blocks it when the user acts. Find the interaction first. In DevTools, open the **Performance** panel, start a recording, and use the page: click buttons, type in inputs, open menus. Stop the recording. Tasks longer than 50 ms show a red corner. Select one to see its call stack and the functions that consumed the time. Field data tells you which interactions hurt real users. The attribution build splits each slow interaction into three parts: ```javascript import {onINP} from 'web-vitals/attribution'; onINP(({value, attribution}) => { console.log('INP (ms):', value); console.log('Interaction:', attribution.interactionType, attribution.interactionTarget); console.log('Input delay:', attribution.inputDelay); console.log('Processing duration:', attribution.processingDuration); console.log('Presentation delay:', attribution.presentationDelay); }); ``` Read the three parts as follows: - A long input delay means another task held the main thread when the user acted. Look for long tasks and third-party scripts. - A long processing duration means your event handler is slow. Look for heavy handler code. - A long presentation delay means the next frame took long to render. Look for large DOM updates and layout work. ## Isolate third-party scripts and heavy handlers Analytics, ads, chat widgets, and social embeds cause many INP failures. Isolate them with request blocking: 1. Open the DevTools **Network** panel. 2. Right-click a third-party request and select **Block request domain**. 3. Reload the page and repeat the slow interaction. 4. Block one domain at a time until the interaction becomes fast. Once you find the script, delay it until after the page loads, or replace an expensive embed with a facade. A facade is a static image that looks like the embed, for example a YouTube player. The real embed loads only when the user clicks, so its JavaScript never runs for visitors who do not play the video. Heavy handlers on `scroll`, `mousemove`, or `resize` also fail INP. Debounce handlers that only need the final value, and throttle handlers that need steady updates: ```javascript function debounce(func, wait) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func(...args), wait); }; } function throttle(func, limit) { let waiting = false; return (...args) => { if (waiting) return; func(...args); waiting = true; setTimeout(() => { waiting = false; }, limit); }; } window.addEventListener('resize', debounce(recalculateLayout, 100)); document.addEventListener('mousemove', throttle(updatePointer, 16)); // about 60 fps ``` For long tasks in your own code, split the work and yield to the main thread between chunks. Use `scheduler.yield()` where the browser supports it, and `setTimeout` elsewhere. Move pure computation to a Web Worker. ## Find the element that shifts for CLS In DevTools, open **More tools > Rendering** and enable **Layout Shift Regions**. Reload the page. The regions that shift flash in blue. Recent Chrome versions also show live CLS values in the **Performance** panel. In the field, the attribution build names the element with the largest shift: ```javascript import {onCLS} from 'web-vitals/attribution'; onCLS(({value, attribution}) => { console.log('CLS:', value); console.log('Largest shift target:', attribution.largestShiftTarget); console.log('Largest shift time:', attribution.largestShiftTime); }); ``` Then match the element to one of three common causes. **Images without dimensions.** An image without reserved space pushes content down when it loads. Add `width` and `height` attributes, and keep the image responsive with CSS: ```html Photo ``` ```css img { width: 100%; height: auto; } ``` **Injected content.** Cookie banners, ads, social embeds, and notification bars that appear above existing content shift everything below. Reserve their space, and animate with `transform` instead of position properties: ```css .ad-container { min-height: 250px; } /* Shifts layout */ .banner { top: -100px; } .banner.visible { top: 0; } /* Does not shift layout */ .banner { transform: translateY(-100%); } .banner.visible { transform: translateY(0); } ``` **Web fonts.** A flash of invisible text or unstyled text shifts lines when the font metrics differ from the fallback. Preload the main font, and use `font-display: optional`. The browser then keeps the fallback if the font misses a very short block period: ```css @font-face { font-family: 'CustomFont'; src: url('/fonts/custom.woff2') format('woff2'); font-display: optional; } ``` ## Confirm the fix in lab and field data Use three lab tools to verify before deployment. Lighthouse runs in the DevTools **Lighthouse** panel with simulated throttling for consistent results. PageSpeed Insights at `pagespeed.web.dev` combines a lab run with field data for mobile and desktop. WebPageTest adds locations, devices, connection speeds, a filmstrip, and a waterfall chart. ### Measure INP in a Lighthouse user flow A Navigation audit measures page loading without an interaction. Use TBT as its lab proxy, not as an INP reading. Snapshot audits one state. Timespan records a period while you perform the actual slow click, tap, or keypress. Use Timespan with unsimulated throttling, perform the interaction, then end the recording. The [official Lighthouse INP audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/metrics/interaction-to-next-paint.js), checked 2026.10.02, supports Timespan. It returns no INP value with simulated throttling or no recorded interaction. Keep the trace and interaction steps so another developer can reproduce the result. After deployment, watch the **Core Web Vitals** report under **Experience** in Search Console. It groups URLs as Good, Needs improvement, or Poor for mobile and desktop. It uses a rolling 28-day window, so improvements appear over 2 to 4 weeks as old data leaves the window. For faster feedback, query the Chrome UX Report API or read the field section of PageSpeed Insights. To collect your own field data from every visit, set up real user monitoring. The [Core Web Vitals developer guide](/articles/core-web-vitals-developer-guide) shows the setup. When PageSpeed Insights and Search Console disagree, compare the evidence before deciding. Is the pass a Lighthouse lab result or CrUX field data? Does CrUX cover this URL or fall back to its origin? Are device class, URL group, and reporting period the same? A current lab improvement does not erase a failing 28-day field history. [PageSpeed Insights documents the lab/field distinction and origin fallback](https://developers.google.com/speed/docs/insights/v5/about). ## Set the order of work With limited time, fix LCP first. It is usually the easiest to improve, and many LCP fixes, such as image work and caching, need little code. Fix INP second, because it affects engagement directly. Fix CLS third; its causes often sit in ad setups or older templates that take deeper work. Some fixes need no developer: faster hosting, a CDN, an image optimization plugin, fewer plugins and widgets, and delayed or removed third-party scripts. Server-side rendering, code splitting, and advanced caching need developer time. Do the no-code work first, then use the field data to justify the developer work. For page speed work beyond the three metrics, read [page speed optimization for developers](/articles/page-speed-optimization-developers). ---- ```text .|########||. .|########||. .|########||. |##||. .||##|. |##||. .||##|. |##||. .||##|. |#|. .|#|. |#|. .|#|. |#|. .|#|. |#| |#| |#| |#| |#| |#| .#| |#. .#| |#. .#| |#. .#. .#| .#. .#| .#. .#| |#. .#| |#. .#| |#. .#| |# ...... #| |# ...... #| |# ...... #| .# ||#########| #| .# ||#########| #| .# ||#########| #| .#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#. #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# # .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || #. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .# .#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#. |# ||########|| #. |# ||########|| #. |# ||########|| #. |# ...... #| |# ...... #| |# ...... #| |#. .#| |#. .#| |#. .#| |#. .#. |#. .#. |#. .#. .#| |#. .#| |#. .#| |#. |#| |#| |#| |#| |#| |#| .|#|. .|#|. .|#|. .|#|. .|#|. .|#|. |##||. .||##| |##||. .||##| |##||. .||##| .||########||. .||########||. .||########||. Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com) ```