Next.js இல் செயல்திறனையும் Core Web Vitals ஐயும் எவ்வாறு உகந்ததாக்குகிறீர்கள்?

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 ஐ அனுப்புவது; கனமான தர்க்கம் மற்றும் தரவு வடிவமைப்பு சேவையகத்தில் இருக்கும்; உண்மையில் ஊடாடும் "தீவுகள்" மட்டுமே 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 ``` ## கனமான கிளையன்ட் கூறுகளை குறியீடு பிரிக்கவும் ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` பெரிய, முக்கியமற்ற கிளையன்ட் கூறுகளை (விளக்கப்படங்கள், திருத்திகள், மாடல்கள்) மந்தக் கருக்க ஏற்றவும் அதனால் அவை ஆரம்ப번ற்றலைப் பெருக்குகிறதில்லை. ## மெதுவான உள்ளடக்கத்தை ஸ்ட்ரிம் செய்யவும் ```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 செயல்திறன் பெருமளவில் **குறைந்த JavaScript அனுப்புவது** (Server Components, குறியீடு பிரிப்பு) மற்றும் உள்ளமைக்கப்பட்ட অপ்டிமைசர்களைப் பயன்படுத்துவது (`next/image`, `next/font`, ஸ்ட்ரீமிங், கேசிங்) — ஒவ்வொன்றும் நேரடியாக Core Web Vital-ல் வரைபடமாக்கப்பட்டுள்ளது। எந்த கருவி எந்த மெட்ரிக்கை சரிசெய்கிறது என்பதை அறிந்துகொள்ளுதல் (மற்றும் `next build`/Lighthouse ஆல் அளவிடல் நுணுக்கம் தெரியாமல்) என்பது நீங்கள் முறையாக நல்ல LCP/CLS/INP மதிப்பெண்களைப் பெறுவதற்கான வழி.

கிளையன்ட் JavaScript ஐ குறைக்கவும் (மிகப்பெரிய பாய்மல்)

LCP உருவத்தை உகந்ததாக்கவும்

எழுத்துருக்களை உகந்ததாக்கவும் (CLS + ஏற்றுதல்)

கனமான கிளையன்ட் கூறுகளை குறியீடு பிரிக்கவும்

மெதுவான உள்ளடக்கத்தை ஸ்ட்ரிம் செய்யவும்

ஆக்ரமணத்துடன் கேச் செய்க, துல்லியமாக மீண்டும் சரிபார்க்கவும்

மெட்ரிக்குகளுக்கு வரைபடம் செய்யப்பட்ட சரிபார்ப்புப் பட்டியல்

அளவிடவும், கணிக்க வேண்டாம்

ஏன் முக்கியமாகிறது