Web Performance Checklist

Know the targets#

Google evaluates the 75th percentile of real user visits. Aim for the “good” column on mobile, where devices and networks are slowest.

Images#

• Use next/image: it serves modern formats, resizes per device and reserves space to prevent layout shift.
• Mark the hero image with priority so it is not lazy-loaded — it is usually the LCP element.
• Always pass width and height (or fill with a sized parent).
• Use sizes for responsive images so phones do not download desktop widths.

1<Image2  src="/hero.png"3  alt="Dashboard preview"4  width={1200}5  height={720}6  sizes="(max-width: 768px) 100vw, 1200px"7  priority8/>

Fonts#

next/font self-hosts Google Fonts at build time, removes the extra connection to Google and adjusts the fallback font metrics to minimize layout shift.

1import { Inter } from "next/font/google";23const inter = Inter({ subsets: ["latin"], display: "swap" });45export default function RootLayout({ children }) {6  return (7    <html lang="en">8      <body className={inter.className}>{children}</body>9    </html>10  );11}

Ship less JavaScript#

• Keep components as Server Components by default; add "use client" only to interactive leaves.
• Pass server-rendered content to client components as props or children instead of importing large data modules in the client.
• Split heavy widgets with next/dynamic and analyze bundles with @next/bundle-analyzer.
• Break long tasks (> 50 ms) so input stays responsive — this is what INP measures.

Caching#

For data that changes slowly, revalidate on an interval instead of fetching on every request, e.g. fetch(url, { next: { revalidate: 3600 } }).