INP replaced FID over a year ago and most engineering teams still don’t have a working playbook for it. Here’s what we recommend on every project we ship.
Start with the budget. We treat 2.0s LCP, 0.05 CLS, and 200ms INP as hard gates. If a page fails any of them in lab tests, the PR doesn’t merge. This is not aspirational — it’s a CI check.
For LCP, the single biggest lever is the hero image. Use AVIF, set explicit dimensions, mark it `priority`, and ship it from a CDN with proper caching. If it’s text-only, render it server-side and you’re done.
For CLS, lock dimensions on every image, video, and embed. Reserve space for ads and lazy-loaded modules. Don’t inject web fonts that swap mid-render unless you’ve sized the fallback to match.
For INP, the work is less about absolute speed and more about the long tasks that block the main thread. Audit your bundle. Code-split heavy components. Defer animation libraries until they’re needed. Move parsing-heavy logic to a worker if you can.
Measure on real devices. The lab numbers and the field numbers tell different stories — Chrome User Experience Report should be your source of truth, not your local Lighthouse run.
Written by the brainiac/studio team. We publish original work from the engineers, designers, and marketers who do the work — never outsourced to a content shop.