هندسة الويب7 دقائق قراءة٢٠ يناير ٢٠٢٦

هندسة الأداء الفائق في Next.js: كيف تضمن علامة 100 في Core Web Vitals

استراتيجيات تحسين وقت الإتاحة التفاعلية (INP)، تقليص حمولة الجافاسكريبت، وتحميل الموارد غير المعيق عبر Server Components.

Next.js 15React 19Web VitalsPerformanceTurbopackPWA

أهم النقاط التي يغطيها المقال

مؤشر INP (Interaction to Next Paint) يتأثر مباشرة بحجم كود الجافاسكريبت المنفذ على الخيط الرئيسي (Main Thread).
مكونات الخادم (RSC) هي أفضل سلاح لتقليص حزمة العميل (Client Bundle) إلى الصفر.
تأخير تحميل السكربتات التحليلية والخدمية بعد التفاعل الأولي يوفر الثواني الحرجة لتجربة المستخدم.

1. الانتقال من FID إلى INP: لماذا اختلف معيار الأداء؟

مع اعتماد Google لمؤشر INP رسمياً، لم يعد يكفي قياس أول تفاعل فقط. يقيس INP استجابة الصفحة لكل نقرة أو تفاعل طوال مدة زيارة المستخدم. إذا كان الخيط الرئيسي مشغولاً بـ Hydration ثقيل أو معالجة حالات زائدة، سينهار تقييم الموقع فوراً.

2. استراتيجية السكربتات المتقدمة وإدارة الـ Service Worker

استخدام استراتيجية afterInteractive مع next/script، وتسجيل Service Worker فقط بعد حدث load، يمنح المتصفح أولوية تامة لرسم العناصر التفاعلية الأساسية دون منافسة على الموارد.

تسجيل الـ Service Worker بعد اكتمال التحميل لضمان سرعة LCP القصوىtsx

// Zero-impact Service Worker registration
useEffect(() => {
  if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
    const registerWorker = () => {
      navigator.serviceWorker.register('/sw.js', { scope: '/' });
    };
    
    if (document.readyState === 'complete') {
      registerWorker();
    } else {
      window.addEventListener('load', registerWorker, { once: true });
    }
  }
}, []);