Core Web Vitals: Metrics, Thresholds, and Optimization Priorities

Core Web Vitals Thresholds, Bottleneck Diagnosis, and B2B Website Optimization Priorities

Core Web Vitals: Metrics, Thresholds, and Optimization Priorities

Bottom line first: Core Web Vitals is Google’s page experience score. The passing lines for the three core metrics are LCP ≤ 2.5s, INP ≤ 200ms, and CLS ≤ 0.1, judged at the 75th percentile. On B2B websites, 80% of performance problems come down to three things: uncompressed hero images, third-party chat and CRM scripts blocking the main thread, and missing image dimensions causing layout shift. Fix them in this order: LCP before INP before CLS — images first, then scripts, then layout. When reading data, trust only the 28-day field data in Search Console; don’t treat Lighthouse lab scores as the verdict.

1. What the Three Metrics Actually Measure

Core Web Vitals isn’t a single score — it’s a set of three independent experience metrics. You need to understand what each one measures before you know what to fix.

Metrics	Full Name	What It Measures	Pass line	Needs Improvement
LCP	Largest Contentful Paint	Time for the largest element above the fold to finish rendering	≤ 2.5s	2.5 to 4s
INP	Interaction to Next Paint	Delay from user interaction to the next frame paint	≤ 200ms	200 to 500ms
CLS	Cumulative Layout Shift	Cumulative score for unexpected layout shifts	≤ 0.1	0.1 to 0.25
TTVC	Derived from Time to First Contentful Paint	Time to first useful content paint	≤ 1.8s	1.8 to 3s

Two key things to understand. First, the 75th percentile: when Google judges whether your page is good, it looks at how 75% of real users perform on that metric — not the average, and not your fastest users. Second, INP officially replaced FID in March 2024, making interaction delay a core metric from then on. This hits B2B websites loaded with live chat, marketing automation, and chat popups hardest, because those scripts are the main cause of main-thread blocking.

Performance optimization isn’t isolated work — it and Media Asset Governance are two sides of the same coin: if images aren’t fixed, LCP will never come down; if scripts aren’t fixed, INP will never pass. For how to build an on-site monitoring system, see Site Monitoring and Alerting Checklist.

2. Data Sources: What Each of the Three Tools Tells You

Many teams optimize performance using the wrong data, spend a week tuning, and find the metrics haven’t improved at all — because they were looking at lab values.

Tools	Data Type	Sampling	Use cases	Limitation
PageSpeed Insights	Lab + field mix	Single run + 28-day CrUX	Quick single-page diagnosis	Lab values differ from real users
CrUX	Field data	Anonymous reports from Chrome users	See real-world distribution	Not enough traffic for a small-site sample
Search Console	Field data summary	28-day rolling	View trends by template	No single-page drill-down
Lighthouse CI	Lab data	Run tests locally	Pre-deploy regression	Doesn’t reflect real users in production
Web Vitals .js	Custom field instrumentation	Your own users	Fill in samples for small sites	Requires dev effort

Rule of thumb: use the Core Web Vitals report in Search Console to find which template has a problem, use PageSpeed Insights to drill into a single page and find the bottleneck, and use Lighthouse CI to run a regression before every release. Don’t do it the other way around — treating lab scores as production results is the most common self-deception in performance optimization.

3. LCP optimization: the hero image is enemy number one

80% of LCP problems on B2B sites come from the hero image and the above-the-fold carousel.

Bottleneck	What it looks like	Optimization	Expected gain
Hero image not compressed	Hero PNG over 500KB	Convert to WebP/AVIF at quality 80, add srcset with multiple sizes	LCP drops 0.5 to 1.5 seconds
Hero image not preloaded	Browser discovers the hero image late	Add preload in head pointing to the hero image	LCP drops 0.2 to 0.5 seconds
Fonts block rendering	Custom fonts load late and cause a blank screen	font-display: swap, load only the weights you need	LCP drops 0.3 to 0.8 seconds
Slow server response	TTFB over 1.8 seconds	Add a CDN, enable HTTP/2, add PHP caching	LCP drops 0.4 to 1 second
Third-party scripts delay first paint	Tracking scripts in the head block rendering	defer or delay loading until idle	LCP drops 0.2 to 0.6 seconds

One overlooked point: B2B sites often use a factory panorama or a large product photo as the hero, and that image is usually an original photo over 2MB. Compress it under 200KB, use WebP, and add preload — those three things alone usually cut LCP in half. When your server is in China and your customers are in Europe or the US, TTFB is naturally high, so a CDN is a must.

4. INP optimization: third-party scripts are the main culprit

Since INP replaced FID, B2B sites have struggled across the board, because these sites load too many marketing and support scripts.

Script type	Common sources	Impact on INP	What to do
Live chat	Intercom, Zendesk, Tawk	Long tasks of 200 to 800ms on the main thread	Delay loading by 3 seconds after first paint, or load on scroll to bottom
Marketing automation	HubSpot, Marketo, Pardot	Forms and popups block interaction	Load only on target pages, remove from non-target pages
Heatmaps and analytics	Hotjar, FullStory	Recording scripts constantly occupy the main thread	Sample 10% of users instead of recording everyone
Chat popups	WhatsApp, WeCom floating widget	Click popup delay	Use a native button and load the script after the click
Custom carousel	Homepage product carousel	Autoplay JS long tasks	Switch to a CSS carousel, stop autoplay

To find the bottleneck, record a page interaction with the Performance panel in Chrome DevTools and look at the purple long tasks on the Main thread — fix whichever one takes the most time first. The principle: any script not needed above the fold should be delayed until the user first scrolls or until 5 seconds of idle. Be restrained when choosing plugins, see Four plugins for overseas sites, and the more you install, the harder it is to pass INP.

5. CLS optimization: set dimensions for every media element

CLS is the easiest metric to fix, but also the most often ignored.

Source of shift	Why	How to fix	CLS after fix
Images without dimensions	img missing width/height	Add width and height attributes or aspect-ratio	Close to 0
Ad slots not reserved enough	Async ad fill pushes content	Set a minimum height on the container	Down 0.05 to 0.15
Font swap	FOIT/FOUT causes reflow	font-display: swap, reserve fallback font dimensions	Down 0.02 to 0.08
Dynamically inserted content	Inserted after recommendations and related posts	Reserve height with a placeholder container	Down 0.05 to 0.1
Lazy-loaded images arrive late	loading=lazy images load late and push content down	Placeholder image or aspect-ratio	Down 0.03 to 0.07

One hard rule: every img, video and iframe on the page must have width and height attributes in the HTML, and CSS must use aspect-ratio to keep it responsive. This doesn’t need a dev sprint; change the template once and the whole site benefits. Accessibility and performance are the same work when it comes to reserving dimensions, see Accessibility scope for B2B sites.

6. Optimization priorities and iteration cadence

Stage	Cycle	Goal	Action	Acceptance metric
Week 1	Diagnostic	Identify problem templates	Pull 28 days of data from Search Console, list the 10 worst pages	Problem template list
Week 2	LCP push	LCP under 2.5s on all templates	Image compression + preload + font optimization	PSI LCP distribution
Week 3	INP push	Cut back third-party scripts	Defer loading, sampled recording, remove unnecessary scripts	Long tasks down 50%
Week 4	CLS wrap-up	Site-wide CLS below 0.1	Width and height attributes, placeholder containers	No CLS error pages in GSC
Continuous	Monitoring	No regressions on release	Run Lighthouse CI on every deploy	Score no lower than the previous version

Site maintenance has its own fixed cadence, and performance is just one part of it, see Six monthly maintenance tasks. Performance tends to regress after a redesign or migration, so run regression tests together with Migration 301s and SEO preservation.

FAQ

Lighthouse scores above 90, but Search Console says it fails. Why?

Because Lighthouse runs lab data, a single measurement in a clean environment; Search Console uses 28 days of real user field data, including weak 4G, old phones and real third-party scripts. The two samples are completely different. The right approach is to treat GSC as the judge and PSI as the diagnostic tool: when GSC shows a template failing, run PSI on a single page from that template to find the bottleneck, and don’t chase a perfect Lighthouse score.

B2B sites have low traffic, so what if there isn’t enough CrUX data?

Small sites can use Web Vitals.js to collect their own real user data. The tracking code is about 1KB: add a snippet to the page head and report LCP, INP, and CLS to your own data warehouse. That way, even if CrUX has no data for you, you still have your own field distribution. Note: collect metric values only, no user privacy data, so it stays GDPR-compliant. See GDPR and Cookie Data Compliance.

Should you really have a hero carousel?

From a performance standpoint, drop the auto-rotating carousel. Users never see the second or third slide, yet the browser still has to download, parse, and run the carousel JS, which hurts both LCP and INP. Replace it with a single hero image plus a CTA, or a CSS-based manual switcher. If the business insists on a carousel, lazy-load every slide after the first with loading=lazy, and make sure the carousel JS doesn’t block the first screen.

Should I delete my support chat widget to improve INP?

Don’t delete it, delay it. Support scripts like Intercom and Zendesk are valuable for B2B lead conversion, but they shouldn’t run during first-screen load. Instead, wait 3 seconds after first-screen load, or inject the script after the user first scrolls 20% of the viewport. That keeps support reachable without blocking the first interaction. Same goes for WhatsApp floating widgets: use a native button and load the web SDK only after a click.

CLS is always around 0.15. How do I get it below 0.1?

Use the Layout Shift panel in DevTools to pinpoint the shifting elements. The three most common causes on B2B sites: images without width/height; related posts or recommendation slots inserted asynchronously by JS with no reserved space; and text reflow after fonts load. Fix all three and CLS usually drops below 0.05. Specifically: add width and height to every img, set aspect-ratio on every async container, and use font-display: swap with a system fallback font of similar size.

How much can a CDN fix performance?

A CDN mainly fixes TTFB and static asset delivery. Its contribution to LCP is between 0.3 and 1 second, and it does almost nothing for INP or CLS. If your server is in China and your customers are in Europe or the US, TTFB can be over 2 seconds, so a CDN is your top priority. If TTFB is already under 600ms, a CDN adds limited value and your money is better spent on images and scripts. Cloudflare’s free plan is enough for small sites; for enterprise sites, go with Cloudflare Pro or AWS CloudFront.

Final thoughts

Core Web Vitals isn’t a solo act for the tech team. It’s a shared metric owned by content, design, and marketing: image size belongs to content, script loading belongs to marketing, and layout shift belongs to design. Put all three on the same dashboard, spend two weeks each fixing LCP, INP, and CLS in that order, and passing site-wide within a quarter is achievable.

Three steps to ship: this week, pull your 10 worst templates from Search Console and list them; next week, compress the hero image and add preload; the week after, defer every support and marketing script. Once those three are done, check GSC again — the fail rate usually drops by more than half.

One line worth remembering: spend your performance budget on real users — read field data, fix the big above-the-fold image, defer third-party scripts. That matters ten times more than a perfect score.