Every second your website takes to load costs you money. Not as a metaphor — literally. Amazon famously calculated that a 100ms delay in page load time costs 1% of revenue. For a business doing ₹10 crore in annual online revenue, that’s ₹10 lakh per second of slowness.
In 2025, Google has fully rolled out INP (Interaction to Next Paint) as a Core Web Vital, replacing FID. Most websites are failing it — and their organic rankings are quietly slipping.
What Are the Three Core Web Vitals?
Google measures user experience through three signals that are now baked directly into search rankings:
1. LCP — Largest Contentful Paint
What it measures: How long it takes for the largest visible element (usually a hero image or heading) to render.
Good threshold: Under 2.5 seconds
Common cause of failure: Unoptimised images, render-blocking fonts, slow server response
2. INP — Interaction to Next Paint
What it measures: The delay between a user action (click, tap, keypress) and the visual response on screen.
Good threshold: Under 200ms
Common cause of failure: Heavy JavaScript bundles, long tasks on the main thread, third-party scripts
3. CLS — Cumulative Layout Shift
What it measures: How much the page jumps around while loading — the infuriating experience of tapping a button only for an ad to appear and you tap the wrong thing.
Good threshold: Under 0.1
Common cause of failure: Images without explicit dimensions, dynamically injected content, web fonts loading late
Why Most Businesses Are Failing INP
INP is the newest and least understood of the three. Unlike FID, which only measured the delay to the first interaction, INP measures every interaction across the page lifetime and reports the worst one.
This catches a common anti-pattern: pages that feel fast on initial load but become sluggish once the user starts interacting — because heavy analytics scripts, chat widgets, or A/B testing frameworks have quietly consumed the main thread.
The Real Culprits
- Tag Manager bloat — Each GTM tag fires synchronously and competes for the main thread
- React hydration — Server-rendered pages that hydrate a massive component tree all at once
- Third-party embeds — Intercom, Hotjar, HubSpot forms — all lovely tools, all expensive at interaction time
- Unvirtualised lists — Rendering 200 product cards in the DOM when only 10 are visible
How to Audit Your Site Right Now
- Open PageSpeed Insights and paste your URL
- Check your field data (real user data from Chrome UX Report) not just lab data
- Run the report on your mobile score — that’s what Google weights most heavily
If your INP is above 200ms or your LCP is above 2.5s, you have work to do.
Practical Fixes That Actually Move the Needle
Fix LCP Fast
# Convert images to WebP/AVIF
npx sharp-cli --input hero.png --output hero.webp --format webp --quality 80
# Add explicit width/height to every image
<img src="hero.webp" width="1200" height="630" loading="eager" fetchpriority="high" />
In Next.js, use <Image priority /> on your above-the-fold image. This automatically sets fetchpriority="high" and preloads the asset.
Fix INP: Break Up Long Tasks
// Instead of processing everything synchronously:
function processLargeDataset(items) {
items.forEach(item => expensiveOperation(item)); // blocks for 800ms
}
// Yield to the browser between chunks:
async function processLargeDataset(items) {
for (let i = 0; i < items.length; i++) {
expensiveOperation(items[i]);
if (i % 50 === 0) await scheduler.yield(); // let the browser breathe
}
}
Fix CLS: Reserve Space for Dynamic Content
/* Always give images an aspect-ratio so the browser reserves space */
.hero-image {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
/* Reserve space for ads and embeds */
.ad-slot {
min-height: 250px;
}
The Business Impact of Getting This Right
A client in the e-commerce space came to us with an LCP of 6.2 seconds on mobile. After a focused 6-week performance sprint:
- LCP dropped to 1.8s (from 6.2s)
- INP dropped to 140ms (from 380ms)
- Organic traffic increased 34% over 3 months
- Mobile conversion rate improved by 19%
The work involved: switching to Next.js App Router with streaming, converting all images to AVIF, lazy-loading below-the-fold components, and deferring all analytics scripts until after the page became interactive.
What to Do Next
If performance optimisation sounds overwhelming, it doesn’t have to be done all at once. Start with:
- Run a PageSpeed audit on your top 5 landing pages
- Fix your hero image — this alone usually moves LCP by 1-2 seconds
- Defer non-critical scripts — add
deferorasyncto analytics tags - Set image dimensions — prevents almost all CLS issues
If you’re on a modern framework like Next.js, most of this is handled for you — the framework makes the right choice by default. If you’re on a legacy stack, a migration may be the most cost-effective path.
We help businesses audit, diagnose, and fix performance issues as part of our web development practice. Get in touch if you’d like a free performance review of your site.