𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗕𝘂𝘁 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄? 𝗜𝘁'𝘀 𝗜𝗡𝗣
Your Lighthouse report looks green. LCP is fine. CLS is fine. The page loads fast.
Then your real-world scores drop. You do not know why.
The problem is likely INP. Interaction to Next Paint replaced FID in March 2024. FID only measured the first delay. INP measures every interaction while a user stays on your page. It reports the slowest one.
INP is not a loading metric. It is a responsiveness metric. It answers one question: when you click or type, how long until the screen changes?
Google uses these buckets:
- 200ms or less is good.
- Over 500ms is poor.
A site can load in one second and still fail. Loading fast and responding fast are different jobs.
Lighthouse tools often miss INP. Lighthouse does not click your buttons. It provides an estimate. You can have a green lab report and a red field score.
To see the real number, use this code:
import { onINP } from 'web-vitals'; onINP(function (metric) { console.log('INP', metric.value, metric.entries); });
This logs the slow interaction and the specific element.
INP issues happen because the main thread is busy. The browser cannot paint the response until a JavaScript task finishes.
Common causes:
- Heavy event handlers running on every click.
- Third-party scripts like chat widgets or analytics.
- Layout thrashing from constant DOM reads and writes.
- Framework hydration tasks.
Fix it by breaking up long tasks. Let the browser breathe between steps:
async function onClick() { doUrgentPart(); await yieldToMain(); doExpensivePart(); }
Use yieldToMain to let the browser paint the UI before the slow work starts.
Other fixes:
- Defer scripts that are not needed immediately.
- Audit third-party widgets.
- Debounce expensive handlers.
- Batch your DOM reads and writes.
Stop staring at LCP if your real scores are low. Measure your interactions instead.
Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn