If your website feels fast but still receives poor Core Web Vitals scores in Google Search Console, chances are your Largest Contentful Paint (LCP) or Interaction to Next Paint (INP) needs attention.
In 2026, Core Web Vitals remain one of the most important technical SEO signals. Poor performance doesn't just hurt rankings — it impacts user experience, conversion rates, lead generation, and revenue.
We've optimized dozens of Next.js, React, WordPress, and enterprise websites, and we've found that most LCP and INP issues come from a handful of common mistakes.
This guide explains how to identify and fix them.
What Are Core Web Vitals?
Core Web Vitals are Google's user experience metrics that measure loading performance, visual stability, and responsiveness.
- LCP (Largest Contentful Paint): Measures how quickly the largest visible content loads.
- INP (Interaction to Next Paint): Measures how responsive your website feels when users interact with it.
- CLS (Cumulative Layout Shift): Measures unexpected layout movement.
For most modern websites, LCP and INP are the hardest metrics to optimize.
What Causes Poor LCP?
LCP typically measures your hero section. This might be a hero image, heading, banner, featured image, or large content block above the fold.
Common causes of poor LCP include:
- Oversized hero images
- Slow server response times
- Render-blocking JavaScript
- Render-blocking CSS
- Heavy third-party scripts
- Client-side rendering delays
- Font loading issues
How to Fix LCP
1. Optimize Your Hero Image
The hero image is often the LCP element.
Use modern image formats like WebP or AVIF and avoid loading images larger than necessary.
<link rel="preload" as="image" href="/hero.avif">Always preload the primary hero image and ensure it appears immediately in the HTML response.
2. Reduce Server Response Time
If your Time To First Byte (TTFB) is slow, LCP will suffer.
- Use CDN caching
- Enable edge rendering
- Optimize database queries
- Reduce API waterfalls
- Use static generation where possible
For many Next.js sites, moving pages from SSR to Static Generation immediately improves LCP.
3. Eliminate Render-Blocking Resources
Many websites load large CSS and JavaScript bundles before rendering content.
Audit:
- Unused CSS
- Unused JavaScript
- Third-party libraries
- Tag managers
- Analytics scripts
The less code the browser needs to process before rendering, the faster the LCP.
4. Prioritize Above-the-Fold Content
Users only see the first screen initially.
Load critical content first and defer everything else.
- Lazy load below-the-fold images
- Defer non-critical widgets
- Load videos on interaction
- Split large JavaScript bundles
What Causes Poor INP?
INP replaced First Input Delay (FID) because Google wanted a more realistic measure of responsiveness.
INP measures how quickly your website reacts when users click, tap, type, or interact.
Poor INP is usually caused by excessive JavaScript execution.
How to Fix INP
1. Reduce Main Thread Work
The browser can only do one thing at a time.
If JavaScript is occupying the main thread, user interactions become delayed.
Common offenders:
- Large React hydration
- Heavy animations
- Massive state updates
- Complex event handlers
- Third-party widgets
2. Split Long Tasks
Tasks running longer than 50ms block responsiveness.
Break large operations into smaller chunks.
requestIdleCallback(() => {
processLargeDataset();
});This gives the browser opportunities to respond to user input.
3. Reduce JavaScript Bundle Size
The fastest JavaScript is JavaScript that never loads.
- Remove unused dependencies
- Use tree shaking
- Code split aggressively
- Lazy load heavy components
Many websites ship hundreds of kilobytes of unnecessary JavaScript.
4. Use Server Components
For Next.js applications, Server Components significantly reduce client-side JavaScript.
Less JavaScript means faster hydration and better INP.
We regularly see 30-60% reductions in client bundle size after migrating suitable components to the server.
5. Audit Third-Party Scripts
Marketing tools, chat widgets, analytics platforms, heatmaps, and tracking scripts are among the biggest causes of poor INP.
Ask yourself:
- Does this script generate revenue?
- Is it actively used?
- Can it be loaded after interaction?
If not, remove it.
Common Mistakes We See During Performance Audits
- Videos used as hero backgrounds
- Multiple font families
- Massive animation libraries
- Unoptimized CMS plugins
- Overuse of client-side rendering
- Heavy page builders
- Unused tracking scripts
Many websites spend months optimizing images while ignoring hundreds of milliseconds lost to JavaScript execution.
How We Improved a Client's Core Web Vitals
A recent SaaS website approached us with:
- LCP: 4.9s
- INP: 420ms
After auditing the application, we:
- Reduced JavaScript by 58%
- Moved components to the server
- Removed unused tracking scripts
- Optimized image delivery
- Implemented CDN caching
The result:
- LCP: 1.7s
- INP: 140ms
Performance improvements translated directly into improved engagement and conversion rates.
FAQ
What is a good LCP score?
Google recommends an LCP score under 2.5 seconds.
What is a good INP score?
Google recommends an INP score below 200 milliseconds.
Why is my website fast but Core Web Vitals are poor?
Many websites appear fast visually but still block the browser with excessive JavaScript, causing poor INP and delayed LCP measurements.
Does Core Web Vitals affect SEO?
Core Web Vitals are part of Google's page experience signals and can influence search performance, especially when competing pages have similar content quality.
Need Help Improving Core Web Vitals?
Whether you're running a Next.js application, React platform, WordPress site, or enterprise web application, performance issues are often hiding in places traditional audits miss.
At Krapton, we help businesses improve LCP, INP, SEO performance, and conversion rates through practical engineering-led optimization.
Book a free performance audit and discover what's slowing down your website.
