Performance
The 2026 Core Web Vitals checklist that actually moves the needle
INP replaced FID. Here's the new ranked priority order.
Google quietly replaced FID with INP (Interaction to Next Paint) as a Core Web Vital in March 2024. Most articles online still describe the old metric. Here's the 2026 checklist, ranked by impact-per-hour-of-work.
What changed: INP vs FID
FID measured the delay between a user's first interaction and the browser's ability to start handling it. INP measures the worst case across all interactions during the page visit. In practice: if any button click feels janky, INP catches it. FID didn't.
This matters for ranking. INP is in the top three signals Google uses for page experience. A poor INP score (above 500ms) can drop a page's ranking position by 1–3 spots in competitive SERPs.
The 2026 priority order
1. Audit long tasks first (45 min, biggest win)
Open DevTools → Performance → record a normal user flow. Anything over 50ms on the main thread is a long task. Common culprits:
- Third-party tags loading synchronously (chat widgets, analytics, AB testing).
- Hydration of large client components on Next.js / React.
- Heavy synchronous JavaScript in scroll/click handlers.
Move them to requestIdleCallback or break them up with setTimeout chunks.
2. Use the right rendering strategy (1–2 days)
If your route is mostly static, ship it static. Most marketing pages don't need to be SPAs. Static generation + selective client islands gets you INP under 100ms by default. Next.js App Router server components are tailor-made for this.
3. Defer non-critical CSS (15 min)
Above-the-fold CSS inlined into <head>. Everything else loaded with media="print" then swapped to media="all" on load. This frees up render thread for interactivity.
4. Self-host fonts, use font-display: optional
Reduces both LCP and INP. Optional avoids the layout shift that swap causes, and removes a network roundtrip blocking interactivity.
5. Image strategy: AVIF + sizes + lazy below the fold
Hero images: AVIF, preloaded, with explicit width/height attributes. Everything below: lazy-load with loading="lazy". Set fetchpriority="high" on the LCP element.
6. Reserve space for everything async (30 min)
CLS killer. Any element that loads after first paint needs a fixed dimension. Iframes need height. Images need aspect-ratio. Carousels need a defined container.
7. Service worker for repeat visitors
If your site has significant returning traffic, a service worker that caches the shell can take repeat-visit LCP to under 200ms. Workbox handles this in ~30 lines of config.
What I'd skip
- Obsessing over TTFB if you're already under 800ms on a CDN.
- Micro-optimizing bundle size if your route is already under 200KB JS.
- Anything related to FID — that metric no longer affects ranking.
How to verify it worked
Wait two weeks after deploying changes. Google's CrUX dataset uses real user data and updates on a 28-day rolling window. Your synthetic Lighthouse scores can be perfect while CrUX still shows red — and CrUX is what affects rankings.
Performance is a competitive advantage that compounds. Most of your competition isn't doing this work. Be the one who is.