Frontend Performance Checklist

Use next-bundle-analyzer or Webpack Bundle Analyzer. Large bundles delay interactivity (TTI/INP).

Next.js does automatic route-level splitting. Use dynamic import() for heavy components (charts, editors, modals).

<script> tags without async/defer block HTML parsing. Use next/script with strategy="afterInteractive" or "lazyOnload".

Use React DevTools Profiler to identify expensive re-renders. Memoise components that receive stable props.

Verify with bundle analyzer. Import only needed functions (e.g. import { debounce } from 'lodash' not import _ from 'lodash').

Long tasks block the main thread and inflate INP. Chrome DevTools Performance tab shows long tasks in red.

Server Components have zero JS bundle impact. Only add 'use client' for components that need browser APIs or hooks.

next/image automatically sets width, height, lazy loading, and serves WebP/AVIF to supported browsers.

next/font self-hosts Google Fonts at build time, eliminating the external DNS lookup and font swap CLS.

SSG = fastest TTFB (served from edge CDN). Use ISR for content that updates regularly.

Suspense allows the rest of the page to stream while data loads, improving perceived performance.

next/link automatically prefetches linked pages when they appear in the viewport.

Server Actions eliminate the API round-trip and allow form mutations to happen in a single server call.

Without dimensions, the browser can't reserve space and will shift content when images load.

Use fetchpriority="high" on the LCP image element. Preloading improves LCP by 200–500ms.

Do NOT lazy-load above-the-fold or LCP images - it will hurt LCP score.

Serve 400w, 800w, 1200w variants. Browser selects the appropriate size based on viewport.

Install @lhci/cli and set performance budget assertions. Run on each PR to catch regressions.

npm install web-vitals. Use onLCP, onFID/onINP, onCLS callbacks to send metrics to GA4 or a custom endpoint.

Sentry Performance captures distributed traces and frontend transactions. Catch p95/p99 slow requests.