# Next.js Core Web Vitals Pre-Launch Checklist

> 30 items DField Solutions runs on every Next.js site before it ships.
> Free · CC-BY 4.0 · [dfieldsolutions.com](https://dfieldsolutions.com)

**Metrics targeted**: LCP < 2.5s · INP < 200ms · CLS < 0.1 · TTFB < 0.8s

---

## LCP (Largest Contentful Paint)

1. **Hero image is `priority`** on next/image or preloaded with `<link rel="preload" as="image" fetchpriority="high">`.
2. **Hero uses `imageSizes`** hint matching the actual render width.
3. **No client-side-only hero** · LCP element is in the initial HTML, not hydrated.
4. **Hero fits above-the-fold on 1280×720** and on 390×844 (iPhone 14).
5. **`fetchpriority="high"` is set** on the LCP image's Next/Image or `<img>`.
6. **Fonts preconnected**: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`.

## INP (Interaction to Next Paint)

7. **Event handlers debounced** on scroll / input (not on every keystroke).
8. **Heavy client components lazy-hydrated** · use `{loading: "lazy"}` or wrap in `<Suspense>`.
9. **Main-thread tasks < 50ms** · measure with the Long Animation Frame API.
10. **No synchronous localStorage reads** in render paths.
11. **CSS animations respect `prefers-reduced-motion`**.
12. **Image transitions use CSS, not JS**.

## CLS (Cumulative Layout Shift)

13. **Every image has explicit `width + height` OR `fill` with aspect-ratio container**.
14. **Fonts use `display: "swap"`** (Next/font default).
15. **No layout-affecting animation** post-first-paint.
16. **Ads / embeds reserve space** with CSS min-height before loading.
17. **Modals use `position: fixed`**, not `absolute`.

## TTFB (Time To First Byte)

18. **Pages are `force-static`** unless they truly need per-request data.
19. **`revalidate` set on ISR pages** if content ages.
20. **No blocking data fetches** in Server Components (use `Suspense`).
21. **Edge runtime** for pages that don't need Node-specific APIs.

## Asset delivery

22. **All images ship as AVIF / WebP** (next/image default).
23. **Video is lazy-loaded** below the fold (`preload="none"` or `preload="metadata"`).
24. **`Cache-Control: immutable`** on hashed asset paths.
25. **Speculation Rules API** prerenders top navigation links.

## Framework hygiene

26. **`next/font` used** instead of CSS @import fonts.
27. **`next/link` with `prefetch`** on all internal navigation.
28. **No `use client` on the root** · server components by default.
29. **Bundle analyzer run** pre-launch; chunks > 250 KB investigated.
30. **Lighthouse CI** fails the PR below score 90 on mobile / 95 on desktop.

---

## Verifying it works

After launch:

- **Real-user metrics** via `web-vitals` library POSTing to your own endpoint.
- **Chrome UX Report** (CrUX) data in Search Console → Core Web Vitals.
- **Lighthouse mobile** score ≥ 95 on the home page.
- **PageSpeed Insights** green across all four metrics on 5 random pages.

---

Cite as: DField Solutions, "Next.js Core Web Vitals Pre-Launch Checklist" (April 2026) · CC-BY 4.0.