როგორ ოპტიმიზირებთ performance-ს და Core Web Vitals-ს Next.js-ში?

Question

Accepted Answer

Next.js უდიდესი რაოდენობის performance ხელსაწყოს გაძლევთ; მათი კარგად გამოყენება მიმართავს Core Web Vitals-ს — LCP (ჩატვირთვა), CLS (განლაგების სტაბილურობა) და INP (ინტერაქტივობა).

შეამცირეთ client-ის 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.

ოპტიმიზირეთ LCP სურათი

// 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-ები (დიაგრამები, რედაქტორები, მოდალები), ასე რომ ისინი არ გაიჩნს საწყისი bundle-ს. ## დაკიდეთ ნელი კონტენტი ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## კეში აგრესიულად, რევალიდირება ზუსტად ```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 performance-ი ძირითადად არის **ნაკლები JavaScript-ის ტრანსპორტირება** (Server Components, კოდის დაყოფა) და ჩაშენებული ოპტიმაიზერების გამოყენება (`next/image`, `next/font`, streaming, კეშირება) — თითოეული პირდაპირი მიმართვა Core Web Vital-თან. იმის ცოდნა, რომელი ხელსაწყო ჯამდება რომელი მეტრიკის (და გაზომვა `next build`/Lighthouse-ით, ვიდრე ვარაუდობენ) არის ის, თუ როგორ სისტემატურად ჩამორჩებით კარგი LCP/CLS/INP ქულებს.