Πώς βελτιστοποιείς την απόδοση και τα Core Web Vitals στο Next.js;

Question

Accepted Answer

Το Next.js σας δίνει πολλά εργαλεία απόδοσης· η σωστή χρήση τους στοχεύει τα Core Web Vitals — LCP (φόρτωση), CLS (σταθερότητα διάταξης) και INP (διαδραστικότητα).

Ελαχιστοποίηση του JavaScript του πελάτη (μεγαλύτερη επίδραση)

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 Router έχει τη δύναμη να αποστέλλει λιγότερο JS. Η βαριά λογική και η μορφοποίηση δεδομένων παραμένουν στο διακομιστή· μόνο τα πραγματικά διαδραστικά "islands" γίνονται Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Βελτιστοποίηση γραμματοσειρών (CLS + φόρτωση) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Διαχωρισμός κώδικα για βαριά client components ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Φορτώνεται με αργή φόρτωση μεγάλα, μη κρίσιμα client components (διαγράμματα, επεξεργαστές, modals) ώστε να μην φουσκώνουν το αρχικό bundle. ## Ροή αργού περιεχομένου ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Αποθήκευση σε cache με επιθετικότητα, επαναδιατύπωση με ακρίβεια ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Ο έλεγχος χαρτογραφημένος στις μετρικές ```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 ``` ## Μέτρηση, όχι εικασία ```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 ``` ## Γιατί έχει σημασία Η απόδοση του Next.js αφορά κυρίως **αποστολή λιγότερου JavaScript** (Server Components, code-splitting) και χρήση των ενσωματωμένων βελτιστοποιητών (`next/image`, `next/font`, streaming, caching) — το καθένα αντιστοιχεί απευθείας σε ένα Core Web Vital. Η γνώση του ποιο εργαλείο διορθώνει ποια μετρική (και η μέτρηση με `next build`/Lighthouse αντί να μαντεύετε) είναι ο τρόπος με τον οποίο συστηματικά επιτυγχάνετε καλά σκορ LCP/CLS/INP.

Ελαχιστοποίηση του JavaScript του πελάτη (μεγαλύτερη επίδραση)

Βελτιστοποίηση της εικόνας LCP

Βελτιστοποίηση γραμματοσειρών (CLS + φόρτωση)

Διαχωρισμός κώδικα για βαριά client components

Ροή αργού περιεχομένου

Αποθήκευση σε cache με επιθετικότητα, επαναδιατύπωση με ακρίβεια

Ο έλεγχος χαρτογραφημένος στις μετρικές

Μέτρηση, όχι εικασία

Γιατί έχει σημασία