كيف تحسّن الأداء و 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. تبقى المنطق الثقيل وتنسيق البيانات على الخادم؛ فقط "الجزر" التفاعلية الحقيقية تصبح 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 ``` ## تقسيم الكود للمكونات الثقيلة على العميل ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` قم بتحميل المكونات الكبيرة والغير حرجة على العميل بشكل كسول (الرسوم البيانية، المحررات، النوافذ المنبثقة) حتى لا تزيد من حجم الـ 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 يتعلق بشكل أساسي بـ **شحن كميات أقل من JavaScript** (Server Components، تقسيم الكود) واستخدام المحسّنات المدمجة (`next/image`، `next/font`، البث، التخزين المؤقت) — كل منها يعيّن مباشرة إلى Core Web Vital. معرفة الأداة التي تصلح أي مقياس (والقياس باستخدام `next build`/Lighthouse بدلاً من التخمين) هي كيفية تحقيقك بشكل منهجي لدرجات LCP/CLS/INP جيدة.