تخيل معايا السيناريو ده: قضيت أسابيع بتكتب كود موقعك بـ Next.js، وعملت مجهود جبار في الـ UI والـ UX، وفجأة تفتح جوجل سيرش كونصول (Google Search Console) وتلاقي مؤشرات الأداء باللون الأحمر! العميل زعلان، ومحرك البحث مش مدي موقعك الاهتمام الكافي، والسبب؟ الـ Core Web Vitals مش مظبوطة. الوجع ده كلنا كـ مبرمجين عانينا منه، وعشان كده في المقال ده هنفكك أسرار تحسين مؤشرات الأداء الحيوية في Next.js عشان توصل للعلامة الكاملة 100%.

إيه هي الـ Core Web Vitals وليه بتهمك كـ Web Developer؟

مؤشرات الأداء الرئيسية (Core Web Vitals) هي باختصار شديد المعايير اللي جوجل بيحكم بيها على تجربة المستخدم (User Experience) في موقعك. الثلاثي المرح هنا هما:

• أولاً: أكبر محتوى مرئي (Largest Contentful Paint - LCP): بيقيس السرعة اللي بيظهر بيها أكبر عنصر مرئي في الشاشة (زي صورة الهيدر أو عنوان رئيسي). والمفروض يحصل في أقل من 2.5 ثانية.
• ثانياً: تأخير الإدخال الأول (First Input Delay - FID) أو حالياً الاستجابة للتفاعل (Interaction to Next Paint - INP): بيقيس استجابة الموقع لأول ضغطة زرار من المستخدم. المفروض تكون أقل من 200 مللي ثانية.
• ثالثاً: تحول تخطيط الشاشة (Cumulative Layout Shift - CLS): بيقيس مدى ثبات العناصر وهي بتحمل (يعني العميل يدوس على زرار وفجأة ينزل تحت بسبب صورة حملت متأخر؟ ده الـ CLS السيء!). المفروض يكون أقل من 0.1.

السر الأول: استغلال مكون الصور (Next.js Image Component) لعيون الـ LCP

أكبر قاتل للـ LCP هو الصور الضخمة اللي مش معمول لها تحسين (Unoptimized Images). هنا بيجي دور مكوّن الـ Next.js الشهير (next/image) اللي بيعمل سحر لوحده. بيقوم بتغيير مقاسات الصور (Resizing)، وتحويل صيغتها لـ WebP أو AVIF، والأهم إنه بيعمل (Lazy Loading) للصور اللي تحت الفوللد (Below the fold).

عشان تضمن علامة كاملة في الـ LCP، لازم تعمل (Preload) للصورة الأساسية اللي في وش المستخدم أول ما يفتح الصفحة (Above the fold) باستخدام خاصية (priority):

import Image from 'next/image'
import heroImage from '../public/hero.jpg'

export default function HeroSection() {
  return (
    <div>
      <h1>أهلاً بيك في موقعنا الخارق</h1>
      <Image 
        src={heroImage} 
        alt="صورة البطل" 
        priority={true} 
        placeholder="blur"
      />
    </div>
  )
}

السر الثاني: ترويض الـ JavaScript الزائد عشان تحسين الـ INP والـ FID

تطبيقات الـ JavaScript الكبيرة بتعمل تجميد (Main Thread Blocking) لأن الشغل كله بيحصل في المتصفح لو بتعتمد كلياً على الـ Client-side Rendering. الحل مع Next.js هو الاستفادة القصوى من (Server Components - RSC) اللي بتنزل جاهزة HTML للمتصفح من غير ما تستهلك رامات جهاز المستخدم.

لو عندك مكتبة ضخمة مش محتاجينها غير في حالة معينة، استخدم (Dynamic Imports) عشان تعمل لها (Code Splitting):

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  loading: <p>جاري تحميل الرسم البياني...</p>,
  ssr: false,
})

export default function Dashboard() {
  return (
    <div>
      <h2>لوحة المؤشرات</h2>
      <HeavyChart />
    </div>
  )
}

السر الثالث: القضاء على الـ CLS وتثبيت أبعاد العناصر

مشهد مزعج جداً لما تدخل موقع تقرأ مقال وفجأة تلاقي الإعلانات أو الصور حملت ورا بعضها فتنط الصفحة بيك لفوق وتحت! عشان تمنع الـ (Cumulative Layout Shift)، الحل بسيط جداً وهو إعطاء أبعاد ثابتة (Width و Height) للعناصر والمرئيات، أو استخدام الـ CSS Aspect Ratio.

في Next.js، مكوّن الصور بيحل المشكلة دي جطعي، لكن لو بتستخدم عناصر خارجية زي إعلانات أو فيديوهات يوتيوب مضمنة (Iframes)، لازم تحجز لها مساحتها في الـ CSS من قبل ما تحمل.

السر الرابع: التخزين المؤقت المتقدم (Advanced Caching) واستخدام الـ ISR

جوجل بيحب السرعة، ومافيش أسرع من الصفحة اللي بتيجي جاهزة من الـ CDN فوراً. Next.js بيدعم الـ (Incremental Static Regeneration - ISR) والـ (App Router Caching) بشكل مرعب.

لما تعمل (Fetch) لبيانات من الـ API، حدد مدة الـ Revalidation عشان تضمن إن الصفحة بتفتح في أجزاء من الثانية:

async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // تحديث الكاش كل ساعة
  })
  return res.json()
}

خاتمة ونصيحة أخيرة

تحسين الـ Core Web Vitals مش مجرد رقم بتجريه وراه عشان ترضي جوجل، دي في المقام الأول احترام لوقت وعقل مستخدم موقعك اللي جاي يدور على معلومة أو خدمة ومش فاضي يستنى. نصيحة أخيرة من أخوك: متجربش تحل كل المشاكل دفعة واحدة؛ افتح الـ PageSpeed Insights، ابدأ بالمشكلة الأكبر (غالباً بتكون الصور أو الـ JavaScript)، صلحتها؟ ادخل على اللي بعدها، واعتبر تحسين الأداء رحلة مستمرة مش مهمة بتخلص وتتعمل مرة واحدة.