Kuinka optimoit suorituskyvyn ja Core Web Vitals -mittarit Next.js:ssä?

Question

Accepted Answer

Next.js tarjoaa monia suorituskyvyn työkaluja; niiden hyvä käyttö kohdistuu Core Web Vitals -mittareihin — LCP (lataus), CLS (asettelun vakaus) ja INP (vuorovaikuttavuus).

Minimoi asiakaspuolen JavaScript (suurin vaikuttaja)

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

App Routerin ylivoima on vähemmän JS:n toimittaminen. Raskas logiikka ja tiedon muotoilu pysyvät palvelimella; vain todella interaktiivisista "saarekkeista" tulee Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimoi fontit (CLS + lataus) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Jaa raskaat asiakasosat koodissa ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lataa laiskasti suuret, ei-kriittiset asiakasosat (kaaviot, editorit, modaalit) niin etteivät ne paisuta alkuperäistä nipusta. ## Suorauta hidas sisältö ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Välimuistita aggressiivisesti, validoi tarkasti ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Tarkistuslista kartoitettuna mittareihin ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## Mittaa, älä arvaa ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## Miksi se on tärkeää Next.js:n suorituskyky on enimmäkseen **vähemmän JavaScriptin toimittamisesta** (Server Components, koodin jakaminen) ja sisäänrakennettujen optimoijien käytöstä (`next/image`, `next/font`, suorauttaminen, välimuisti) — jokainen kartoitus suoraan Core Web Vitaliksi. Tietäen, mikä työkalu korjaa mitä mittaria (ja mittaamalla `next build` / Lighthousella arvaamisen sijaan) on tapa, jolla systemaattisesti saavutat hyvät LCP/CLS/INP-pisteet.

Minimoi asiakaspuolen JavaScript (suurin vaikuttaja)

Optimoi LCP-kuva

Optimoi fontit (CLS + lataus)

Jaa raskaat asiakasosat koodissa

Suorauta hidas sisältö

Välimuistita aggressiivisesti, validoi tarkasti

Tarkistuslista kartoitettuna mittareihin

Mittaa, älä arvaa

Miksi se on tärkeää