Interaction responsiveness signals are present (INP/FID)

Interaction to Next Paint (INP) replaced First Input Delay as a Core Web Vital in March 2024 — poor INP (over 200ms) is now a ranking penalty in the Page Experience signal. INP measures the worst interaction delay across a user session, making synchronous JavaScript in event handlers the primary culprit: a button click that triggers a heavy filter operation blocks the main thread, the browser cannot paint the response for hundreds of milliseconds, and Google records a poor INP event. iso-25010:2011 performance-efficiency captures this: sites shipping large monolithic bundles without code splitting routinely fail INP thresholds because every interaction competes with the cost of parsing and executing the full bundle.

Use dynamic imports for components not needed on initial render. Wrap state updates that trigger heavy re-renders in startTransition to prevent them from blocking user input.

// app/products/page.tsx — defer heavy filter component
import { lazy, Suspense } from 'react'
const FilterPanel = lazy(() => import('@/components/filter-panel'))

// components/search.tsx — non-blocking state update
import { useCallback, useTransition } from 'react'

const [isPending, startTransition] = useTransition()
const handleSearch = useCallback((query: string) => {
  startTransition(() => {
    setFilteredResults(heavyFilter(allResults, query))
  })
}, [allResults])

For third-party scripts (analytics, chat, A/B testing tools), replace inline <script> tags in <head> with the Next.js <Script> component using strategy="afterInteractive" in app/layout.tsx. Import specific functions from large libraries instead of the full package — e.g., import { debounce } from 'lodash-es' instead of import _ from 'lodash'. See the Performance & Load Readiness audit for INP measurement methodology.