The high-performance Next.js website checklist for 2026 (95+ Lighthouse, sub-1.5s loads)

A fast website is not a vanity metric. Google's Core Web Vitals directly affect search rankings, and every 100ms shaved off LCP is roughly 1% in conversion in the data sets we have looked at. In 2026, hitting 95+ Lighthouse and sub-1.5s global load on Next.js is not heroic engineering — it is following a checklist of decisions that compound. This is the version we apply to every site we build.

1. Pick the right rendering strategy per route

• Marketing pages → static (SSG) or PPR with Cache Components
• Dynamic dashboards → server components, dynamic rendering, but cache fetches aggressively
• Mostly-static with personalization → Partial Prerendering (PPR) — static shell streams instantly, dynamic island streams in
• Use Next.js 16 Cache Components and the 'use cache' directive — replace ad-hoc unstable_cache with declarative cacheTag and cacheLife

2. Get LCP under 1.5s

1. The largest element on the first viewport is almost always the hero image. Use next/image with priority={true} and explicit width/height.
2. Self-host the LCP image — third-party CDNs add a DNS lookup that costs you 100–300ms.
3. Preload the hero image in the document head when it is consistent across pages.
4. Avoid CSS-driven hero gradients that block paint — render them as a plain background-color first, layer effects after.

3. Fonts: the silent LCP killer

Use next/font for every font on the site. It self-hosts, eliminates layout shift via size-adjust, and ships only the subsets you actually use:

// app/layout.tsx
import { Inter } from "next/font/google";
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
  preload: true,
});

Limit yourself to one display font and one body font. Every additional weight you ship costs you tens of kilobytes that show up as render-blocking on slow connections.

4. Images: next/image, always

• Use next/image for every non-icon image — automatic AVIF/WebP, automatic responsive sizes
• Always set sizes on images that aren't full-width — the browser picks the smallest valid candidate
• Use loading='lazy' for below-the-fold images (it's the default; just don't override)
• Use placeholder='blur' for hero images to mask network jitter
• Compress at the source. A 2MB hero PNG that next/image transcodes to 200KB is still 2MB on the build server.

5. Third-party scripts: ruthless triage

Every third-party script costs you 50–500ms on real devices. Audit your <Script> tags and apply the appropriate strategy:

• Analytics — strategy='afterInteractive' or 'lazyOnload'
• Chat widgets (Intercom, Crisp) — lazyOnload, or load only after a user gesture
• Marketing tags (Hotjar, Segment) — review whether you actually need them; consolidate via Segment if you keep them
• Anything that is not measurable revenue-positive in 30 days — remove it

6. INP — the new metric that catches you off-guard

Interaction to Next Paint replaced FID in 2024 and is now the metric most teams fail. To pass:

• Avoid heavy synchronous work on click handlers — debounce, defer, or move to a Worker
• Use React 19 useTransition for state changes that trigger expensive re-renders
• Watch out for animation libraries that block the main thread on hover — Framer Motion is fine if you respect prefers-reduced-motion and avoid layout-triggering animations
• Reduce JavaScript on the client — every Server Component you can use over a Client Component is a win on INP

7. Bundle size discipline

• Use next/dynamic for components that are only needed conditionally (modals, dashboards, AI widgets)
• Audit imports — moment.js, lodash full imports, and heavy date libraries are common offenders. Use date-fns or native Intl.
• Run @next/bundle-analyzer monthly. Anything above 300KB in the first JS payload deserves an explanation.
• Tree-shake icon libraries — import only the icons you use, never `import * as Icons`

8. Edge and caching

• Vercel's edge network handles HTML caching for SSG and PPR routes automatically
• Use the Vercel Runtime Cache for shared, taggable cache across functions
• ISR (revalidate) for catalog and content-driven pages — freshness without rebuild
• Cloudflare in front for additional edge caching on static assets — set long Cache-Control with immutable

9. Measure on real devices, not your laptop

• Lighthouse on a slow 4G profile is the bare minimum
• Vercel Speed Insights or Cloudflare Web Analytics for real-user Core Web Vitals
• Set a perf budget in CI — fail the PR if LCP exceeds 1.8s on the staging build

The takeaway

A 95+ Lighthouse, sub-1.5s Next.js site in 2026 is the cumulative effect of nine boring decisions made consistently. Pick the right rendering strategy. Prioritize the hero. Self-host fonts. Use next/image. Be ruthless about third-party scripts. Watch INP. Discipline the bundle. Lean on the edge. Measure real users. Done in that order, this is a checklist project — not a research project.