𝗬𝗼𝘂𝗿 𝗣𝗮𝗴𝗲 𝗟𝗼𝗮𝗱𝘀 𝗙𝗮𝘀𝘁 𝗯𝘂𝘁 𝗦𝘁𝗶𝗹𝗹 𝗙𝗲𝗲𝗹𝘀 𝗦𝗹𝗼𝘄?
Your Lighthouse report is green. Your LCP and CLS scores look good. Your page loads fast. Then your real world scores drop. You do not know why.
The problem is often INP.
INP stands for Interaction to Next Paint. It replaced FID as a Core Web Vital in March 2024. FID only measured the delay of your first click. INP measures every interaction while a person uses your page. It reports the slowest one.
INP is not a loading metric. It is a responsiveness metric. It asks one question: when you click or type, how long until the screen changes?
Google uses these rules:
- 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 two different jobs.
Lighthouse does not tap your buttons. It gives you an estimate. You can have a green lab report and a red field score at the same time.
To see the real number, measure interactions as they happen. 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 element behind it. Now you fix real problems instead of guessing.
INP issues happen when the main thread is busy. The browser cannot paint the response until a JavaScript task finishes. A long task blocks the interaction.
Common causes:
- Heavy event handlers doing too much work on every click.
- Third-party scripts like chat widgets or analytics running long tasks.
- Layout thrash from reading and writing to the DOM in a loop.
- Framework hydration processes.
You can fix this by breaking up long tasks. Let the browser breathe.
async function onClick() { doUrgentPart(); await yieldToMain(); doExpensivePart(); }
The goal is to paint the response before the slow work starts.
Other steps to take:
- Defer scripts the page does not need immediately.
- Audit third-party widgets.
- Debounce expensive handlers.
- Batch your DOM reads and writes.
Stop staring at LCP if your lab report is green but your real scores are red. Go measure your interactions.
Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn