INP (Interaction to Next Paint) Optimization: Understand Google's New Interaction Metric

What is INP and Why Did It Replace FID?

**INP (Interaction to Next Paint)** is a metric that measures the time it takes for the browser to visually reflect an interaction when a user interacts with the page (clicking, tapping, keyboard press). It officially replaced FID (First Input Delay) in March 2024. The difference is: while FID only measured the first interaction, INP evaluates the average of all interactions on the page.

What is a Good INP Score?

• Good: 200ms and below
• Needs Improvement: Between 200ms – 500ms
• Poor: 500ms and above

You can easily measure your site's INP value with our PageSpeed Analyzer tool.

6 Ways to Improve INP

1. Break Up Long Tasks: Split JavaScript tasks longer than 50ms into smaller pieces using requestIdleCallback or scheduler.yield().
2. Relieve the Main Thread: Move heavy calculations to Web Workers.
3. Trim Unnecessary JavaScript: Lazy-load or completely remove code that runs during page load but is not needed at the moment of interaction.
4. Reduce DOM Size: More than 1500 DOM elements extends the repainting time after interaction.
5. Move CSS Animations to GPU: Animations other than transform and opacity keep the main thread busy.
6. Defer Third-Party Scripts: Load analytics and ad scripts with async or defer.

Frequently Asked Questions