01 · Section
INP is harder than FID was — and it is the one to focus on
Interaction to Next Paint measures every interaction, not just the first. Long-running event handlers, hydration jank and uncontrolled re-renders all show up in INP where FID forgave them.
The 200ms "good" threshold is achievable but requires intentional work. The two biggest wins we see: defer non-critical client JavaScript with dynamic imports, and break up long tasks with scheduler.yield() or setTimeout(0) chunks.
02 · Section
LCP — image, font, and that one third-party script
Most LCP misses trace back to three culprits: an unoptimised hero image, a render-blocking custom font, or a chat widget that loads early in the head. Fix those three and LCP comes back into the green on the majority of sites.
Use the Next.js Image component (or equivalents in other frameworks) with priority on the hero. Use font-display: swap and preload the woff2. Move every third-party script behind an interaction trigger or a delayed load.
03 · Section
CLS — still the easiest to fix
Reserve space for everything that loads asynchronously: images, embeds, ad slots, dynamically-injected components. width and height attributes on images, min-height on containers — boring, mechanical, effective.
Most CLS regressions creep in via marketing pixels and chat widgets injected late. Bake a CLS budget into your monitoring so the next AB-testing snippet does not silently tank the page.
Key takeaways
- Prioritise INP — it is the metric most likely to be red on a modern React or Next.js site.
- Break up long tasks; defer client JS aggressively.
- Fix the hero image, the font, and the chat widget for fast LCP wins.
- Treat CLS regressions like any other regression — monitor and block on them in CI.
Tags
Written by
Sara Mahmood
7 min read · Posted in Web Development