React Academy · درس

قياس مؤشرات الويب الأساسية في تطبيقات React

استخدم Lighthouse وWebPageTest ومكتبة web-vitals لجمع نتائج LCP وINP وCLS.

قياس مؤشرات الويب الأساسية في تطبيقات React درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

ما هي Core Web Vitals؟

Core Web Vitals هي مقاييس تجربة المستخدم من Google التي تؤثر في ترتيب نتائج SEO: LCP (أكبر رسم للمحتوى — سرعة التحميل)، وINP (التفاعل حتى الرسم التالي — سرعة الاستجابة)، وCLS (الإزاحة التراكمية للتخطيط — الاستقرار البصري).

الحدود الجيدة

استهدف القيم التالية: LCP ≤ 2.5s، وINP ≤ 200ms، وCLS ≤ 0.1. أما القيم التي تتجاوز حد «ضعيف» (LCP > 4s، وINP > 500ms، وCLS > 0.25) فتؤثر سلباً بدرجة كبيرة في تجربة المستخدم وSEO.

مكتبة web-vitals

تقيس حزمة npm المسماة web-vitals مؤشرات CWV في المتصفحات الحقيقية عبر واجهة API بسيطة.

npm install web-vitals

import { onCLS, onINP, onLCP } from 'web-vitals';

onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));

إرسال المؤشرات إلى التحليلات

أرسل المؤشرات إلى نقطة نهاية التحليلات لديك للمراقبة من المستخدمين الفعليين (RUM) — إذ يقيس Lighthouse الأداء في بيئة اختبارية، بينما يوضح RUM ما يختبره المستخدمون الحقيقيون.

function sendToAnalytics(metric) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

مؤشرات الأداء المدمجة في Next.js

يجمع Next.js مؤشرات Core Web Vitals تلقائياً. صدّر دالة reportWebVitals من _app.js (في Pages)، أو استخدم الدعم المدمج في App Router.

// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric.name, metric.value);
  }
}

Lighthouse في Chrome DevTools

شغّل اختبار Lighthouse في Chrome DevTools (علامة تبويب Lighthouse) للحصول على قياسات CWV في بيئة اختبارية. استخدم وضع التصفح المتخفي لتجنب تداخل الإضافات، وفعّل تقييد السرعة لمحاكاة الأجهزة المحمولة.

WebPageTest

يوفّر WebPageTest.org مخططات شلالية مفصلة، وتسجيل الفيديو، وقياسات CWV من أجهزة حقيقية في مواقع جغرافية مختلفة — وهو أكثر واقعية من Lighthouse المحلي.

تقرير تجربة مستخدمي Chrome (CrUX)

تجمع مجموعة بيانات CrUX من Google بيانات CWV من المستخدمين الفعليين لملايين المواقع. ويمكن الوصول إليها عبر Google Search Console أو PageSpeed Insights أو CrUX API.

PerformanceObserver لقياس LCP

استخدم واجهة API الأصلية PerformanceObserver لمراقبة إدخالات LCP وفهم العنصر الذي يمثل أكبر رسم للمحتوى.

const po = new PerformanceObserver(entries => {
  for (const entry of entries.getEntries()) {
    console.log('LCP element:', entry.element, 'time:', entry.startTime);
  }
});
po.observe({ type: 'largest-contentful-paint', buffered: true });

تصحيح أخطاء CLS

استخدم ميزة Layout Shift Regions في Chrome DevTools (ضمن لوحة Rendering) لإبراز العناصر التي تسبب إزاحات في التخطيط بتراكبات حمراء.

بيانات الإسناد

توفر مكتبة web-vitals بيانات إسناد تحدد ما تسبب في ضعف المؤشر — عنصر LCP أو تفاعل INP أو العنصر المتسبب في CLS.

onLCP(metric => {
  const { element, url } = metric.attribution.lcpEntry;
  console.log('LCP element:', element);
}, { reportAllChanges: true });

تحقق سريع

أي من مؤشرات Core Web Vitals يقيس سرعة الاستجابة، وتحديداً مدى سرعة استجابة الصفحة لتفاعلات المستخدم؟

مراجعة

قِس مؤشرات CWV باستخدام مكتبة web-vitals أو Lighthouse. أرسل المقاييس إلى أدوات التحليلات لديك للمراقبة من المستخدمين الفعليين. استهدف LCP ≤ 2.5s، وINP ≤ 200ms، وCLS ≤ 0.1. استخدم بيانات الإسناد لتحديد العناصر أو التفاعلات المحددة التي تسبب النتائج الضعيفة.

الأسئلة الشائعة

هل درس «قياس مؤشرات الويب الأساسية في تطبيقات React» مجاني؟

نعم — نص درس «قياس مؤشرات الويب الأساسية في تطبيقات React» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «قياس مؤشرات الويب الأساسية في تطبيقات React»؟

استخدم Lighthouse وWebPageTest ومكتبة web-vitals لجمع نتائج LCP وINP وCLS. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «قياس مؤشرات الويب الأساسية في تطبيقات React»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

قياس مؤشرات الويب الأساسية في تطبيقات React
تحليل الحزمة واستراتيجية تقسيم التعليمات البرمجية
تحسين الصور والخطوط في React
تقليل INP: تحسين معالجات الأحداث

← العودة إلى React Academy