1 سبتمبر 2025العربية

دليل شامل للاستفادة من واجهة برمجة تطبيقات أداء الواجهة الأمامية لجمع وتحليل مقاييس تحميل الصفحة لتحسين أداء المواقع الإلكترونية لجمهور عالمي.

واجهة برمجة تطبيقات أداء الواجهة الأمامية (Frontend Performance API): إتقان جمع مقاييس تحميل الصفحة

في المشهد الرقمي اليوم، يعد أداء المواقع الإلكترونية أمرًا بالغ الأهمية. يمكن أن يؤدي الموقع البطيء في التحميل إلى إحباط المستخدمين، والتخلي عن عربات التسوق، وفي النهاية، خسارة الإيرادات. يعد تحسين أداء الواجهة الأمامية أمرًا حاسمًا لتقديم تجربة مستخدم إيجابية، بغض النظر عن مكان وجود المستخدمين حول العالم. توفر واجهة برمجة تطبيقات أداء الواجهة الأمامية أدوات قوية لقياس وتحليل الجوانب المختلفة لأداء تحميل الصفحة. سيرشدك هذا الدليل الشامل إلى الاستفادة من واجهة برمجة تطبيقات توقيت التنقل (Navigation Timing API) وغيرها من واجهات الأداء ذات الصلة لجمع وفهم مقاييس تحميل الصفحة الرئيسية، مما يتيح لك تحديد الاختناقات وتحسين سرعة واستجابة موقعك لجمهور عالمي.

فهم أهمية مقاييس تحميل الصفحة

تقدم مقاييس تحميل الصفحة رؤى قيمة حول مدى سرعة تحميل موقعك وتفاعله مع المستخدمين. هذه المقاييس حاسمة لعدة أسباب:

تجربة المستخدم: يوفر الموقع الأسرع تحميلًا تجربة مستخدم أكثر سلاسة ومتعة، مما يؤدي إلى زيادة المشاركة والرضا. تخيل مستخدمًا في طوكيو يحاول الوصول إلى موقع التجارة الإلكترونية الخاص بك؛ من المرجح أن تؤدي تجربة التحميل البطيئة إلى تخليه عن الشراء.
ترتيب مُحسّنات محرّكات البحث (SEO): تعتبر محركات البحث مثل Google سرعة الصفحة كعامل ترتيب. يمكن أن يؤدي تحسين أداء موقعك إلى تحسين ظهورك في محركات البحث.
معدلات التحويل: أظهرت الدراسات وجود علاقة مباشرة بين وقت تحميل الصفحة ومعدلات التحويل. غالبًا ما تؤدي الصفحات الأسرع تحميلًا إلى معدلات تحويل أعلى، خاصة في المناطق ذات سرعات الإنترنت البطيئة.
تحسين الأجهزة المحمولة: مع الاستخدام المتزايد للأجهزة المحمولة، أصبح تحسين أداء الهاتف المحمول أمرًا ضروريًا. يمكن أن تؤثر أوقات تحميل الصفحة بشكل كبير على تجربة مستخدم الهاتف المحمول، خاصة في المناطق ذات النطاق الترددي المحدود. على سبيل المثال، سيقدر المستخدمون في الهند الذين يعتمدون على اتصالات 3G موقعًا سريع التحميل أكثر من المستخدمين الذين لديهم اتصالات ألياف عالية السرعة.
الوصول العالمي: يمكن أن يختلف الأداء بشكل كبير بناءً على الموقع الجغرافي للمستخدم وظروف الشبكة وإمكانيات الجهاز. يمكن أن تساعد مراقبة الأداء من مناطق مختلفة في تحديد المجالات التي تحتاج إلى تحسين.

مقدمة إلى واجهة برمجة تطبيقات أداء الواجهة الأمامية

واجهة برمجة تطبيقات أداء الواجهة الأمامية هي مجموعة من واجهات JavaScript التي توفر الوصول إلى البيانات المتعلقة بالأداء لصفحات الويب. تتيح هذه الواجهة للمطورين قياس الجوانب المختلفة لوقت تحميل الصفحة، وتحميل الموارد، وخصائص الأداء الأخرى. توفر واجهة برمجة تطبيقات توقيت التنقل (Navigation Timing API)، وهي مكون رئيسي في واجهة برمجة تطبيقات أداء الواجهة الأمامية، معلومات توقيت مفصلة حول المراحل المختلفة لعملية تحميل الصفحة.

المكونات الرئيسية لواجهة برمجة تطبيقات الأداء:

واجهة برمجة تطبيقات توقيت التنقل (Navigation Timing API): توفر معلومات توقيت حول المراحل المختلفة لعملية تحميل الصفحة، مثل بحث DNS، واتصال TCP، وأوقات الطلب والاستجابة، ومعالجة DOM.
واجهة برمجة تطبيقات توقيت الموارد (Resource Timing API): توفر معلومات توقيت للموارد الفردية التي تم تحميلها بواسطة الصفحة، مثل الصور والبرامج النصية وأوراق الأنماط. هذا لا يقدر بثمن لفهم الأصول التي تساهم بشكل أكبر في أوقات التحميل، خاصة عند تقديم دقات صور مختلفة بناءً على الجهاز والمنطقة (على سبيل المثال، تقديم صور WebP للمتصفحات المدعومة لضغط أفضل).
واجهة برمجة تطبيقات توقيت المستخدم (User Timing API): تسمح للمطورين بتحديد مقاييس أداء مخصصة ووضع علامات على نقاط محددة في الكود لقياس وقت التنفيذ.
واجهة برمجة تطبيقات توقيت العرض (Paint Timing API): توفر مقاييس تتعلق بعرض المحتوى على الشاشة، مثل أول عرض (FP) وأول عرض محتوى (FCP).
أكبر عرض محتوى مرئي (LCP): يُبلغ عن وقت عرض أكبر صورة أو كتلة نصية مرئية داخل منفذ العرض، بالنسبة إلى وقت بدء تحميل الصفحة لأول مرة. هذا مقياس رئيسي في مؤشرات أداء الويب الحيوية من Google.
تأخير الإدخال الأول (FID): يقيس الوقت من أول تفاعل للمستخدم مع الصفحة (على سبيل المثال، عند النقر على رابط أو النقر على زر أو استخدام عنصر تحكم مخصص يعمل بـ JavaScript) إلى الوقت الذي يتمكن فيه المتصفح فعليًا من بدء معالجة معالجات الأحداث استجابةً لهذا التفاعل.
إزاحة التخطيط التراكمية (CLS): تقيس المجموع الكلي لجميع إزاحات التخطيط غير المتوقعة التي تحدث خلال دورة حياة الصفحة بأكملها.

جمع مقاييس تحميل الصفحة باستخدام واجهة برمجة تطبيقات توقيت التنقل

توفر واجهة برمجة تطبيقات توقيت التنقل ثروة من المعلومات حول عملية تحميل الصفحة. للوصول إلى هذه البيانات، يمكنك استخدام خاصية performance.timing في JavaScript.

مثال: جمع بيانات توقيت التنقل

إليك مثال على كيفية جمع بيانات توقيت التنقل وتسجيلها في وحدة التحكم:


if (window.performance && window.performance.timing) {
  const timing = window.performance.timing;
  console.log('Navigation Start:', timing.navigationStart);
  console.log('Fetch Start:', timing.fetchStart);
  console.log('Domain Lookup Start:', timing.domainLookupStart);
  console.log('Domain Lookup End:', timing.domainLookupEnd);
  console.log('Connect Start:', timing.connectStart);
  console.log('Connect End:', timing.connectEnd);
  console.log('Request Start:', timing.requestStart);
  console.log('Response Start:', timing.responseStart);
  console.log('Response End:', timing.responseEnd);
  console.log('DOM Loading:', timing.domLoading);
  console.log('DOM Interactive:', timing.domInteractive);
  console.log('DOM Complete:', timing.domComplete);
  console.log('Load Event Start:', timing.loadEventStart);
  console.log('Load Event End:', timing.loadEventEnd);
}

هام: تم إيقاف استخدام الكائن performance.timing لصالح واجهة PerformanceNavigationTiming. يوصى باستخدام الأخيرة للمتصفحات الحديثة.

استخدام PerformanceNavigationTiming


if (window.performance && window.performance.getEntriesByType) {
  const navigationEntries = performance.getEntriesByType('navigation');

  if (navigationEntries && navigationEntries.length > 0) {
    const navigationEntry = navigationEntries[0];

    console.log('Navigation Type:', navigationEntry.type); // e.g., 'navigate', 'reload', 'back_forward'
    console.log('Navigation Start:', navigationEntry.startTime);
    console.log('Fetch Start:', navigationEntry.fetchStart);
    console.log('Domain Lookup Start:', navigationEntry.domainLookupStart);
    console.log('Domain Lookup End:', navigationEntry.domainLookupEnd);
    console.log('Connect Start:', navigationEntry.connectStart);
    console.log('Connect End:', navigationEntry.connectEnd);
    console.log('Request Start:', navigationEntry.requestStart);
    console.log('Response Start:', navigationEntry.responseStart);
    console.log('Response End:', navigationEntry.responseEnd);
    console.log('DOM Interactive:', navigationEntry.domInteractive);
    console.log('DOM Complete:', navigationEntry.domComplete);
    console.log('Load Event Start:', navigationEntry.loadEventStart);
    console.log('Load Event End:', navigationEntry.loadEventEnd);
    console.log('Duration:', navigationEntry.duration);


    // Calculate Time to First Byte (TTFB)
    const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
    console.log('TTFB:', ttfb);

    // Calculate DOM Load Time
    const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading;
    console.log('DOM Load Time:', domLoadTime);

    // Calculate Page Load Time
    const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime;
    console.log('Page Load Time:', pageLoadTime);
  }
}

فهم مقاييس توقيت التنقل

إليك تفصيل لبعض المقاييس الرئيسية التي توفرها واجهة برمجة تطبيقات توقيت التنقل:

navigationStart: الوقت الذي يبدأ فيه التنقل إلى المستند.
fetchStart: الوقت الذي يبدأ فيه المتصفح في جلب المستند.
domainLookupStart: الوقت الذي يبدأ فيه المتصفح بحث DNS لنطاق المستند.
domainLookupEnd: الوقت الذي يكمل فيه المتصفح بحث DNS لنطاق المستند.
connectStart: الوقت الذي يبدأ فيه المتصفح في إنشاء اتصال بالخادم.
connectEnd: الوقت الذي يكمل فيه المتصفح إنشاء اتصال بالخادم. ضع في اعتبارك تأثير استخدام شبكة توصيل المحتوى (CDN) في مناطق مختلفة؛ يمكن لشبكة CDN جيدة التكوين أن تقلل بشكل كبير من أوقات الاتصال للمستخدمين في جميع أنحاء العالم.
requestStart: الوقت الذي يبدأ فيه المتصفح في إرسال الطلب إلى الخادم.
responseStart: الوقت الذي يتلقى فيه المتصفح أول بايت من الاستجابة من الخادم. هذه هي نقطة البداية لقياس زمن وصول أول بايت (TTFB).
responseEnd: الوقت الذي يتلقى فيه المتصفح آخر بايت من الاستجابة من الخادم.
domLoading: الوقت الذي يبدأ فيه المتصفح في تحليل مستند HTML.
domInteractive: الوقت الذي يكون فيه المتصفح قد انتهى من تحليل مستند HTML ويكون DOM جاهزًا. يمكن للمستخدم التفاعل مع الصفحة، على الرغم من أن بعض الموارد قد لا تزال قيد التحميل.
domComplete: الوقت الذي يكون فيه المتصفح قد انتهى من تحليل مستند HTML وانتهى تحميل جميع الموارد (الصور، البرامج النصية، إلخ).
loadEventStart: الوقت الذي يبدأ فيه حدث load.
loadEventEnd: الوقت الذي يكتمل فيه حدث load. غالبًا ما تعتبر هذه النقطة التي تم فيها تحميل الصفحة بالكامل.
duration: إجمالي الوقت المستغرق للتنقل. متاح مع PerformanceNavigationTiming.

تحليل مقاييس تحميل الصفحة للتحسين

بمجرد جمع مقاييس تحميل الصفحة، فإن الخطوة التالية هي تحليلها لتحديد مجالات التحسين. إليك بعض الاستراتيجيات الرئيسية:

1. تحديد الاختناقات

من خلال فحص بيانات توقيت التنقل، يمكنك تحديد مراحل عملية تحميل الصفحة التي تستغرق أطول وقت. على سبيل المثال، إذا كان domainLookupEnd - domainLookupStart مرتفعًا، فهذا يشير إلى مشكلة في حل DNS. إذا كان responseEnd - responseStart مرتفعًا، فهذا يشير إلى وقت استجابة بطيء للخادم أو حجم محتوى كبير.

مثال: تخيل سيناريو حيث يكون connectEnd - connectStart أعلى بكثير للمستخدمين في أمريكا الجنوبية مقارنة بالمستخدمين في أمريكا الشمالية. قد يشير هذا إلى الحاجة إلى شبكة توصيل محتوى (CDN) ذات نقاط وجود (PoPs) أقرب إلى مستخدمي أمريكا الجنوبية.

2. تحسين وقت استجابة الخادم (TTFB)

زمن وصول أول بايت (TTFB) هو مقياس حاسم يقيس الوقت الذي يستغرقه المتصفح لتلقي أول بايت من البيانات من الخادم. يمكن أن يؤثر ارتفاع TTFB بشكل كبير على وقت تحميل الصفحة الإجمالي.

استراتيجيات لتحسين TTFB:

تحسين الكود من جانب الخادم: قم بتحسين كفاءة الكود من جانب الخادم لتقليل الوقت الذي يستغرقه إنشاء استجابة HTML. استخدم أدوات التنميط لتحديد الاستعلامات البطيئة أو الخوارزميات غير الفعالة.
استخدام شبكة توصيل المحتوى (CDN): يمكن لشبكة CDN تخزين محتوى موقعك وتقديمه من خوادم أقرب إلى المستخدمين، مما يقلل من زمن الوصول ويحسن TTFB. ضع في اعتبارك شبكات CDN ذات شبكات عالمية قوية لتلبية احتياجات المستخدمين في مناطق مختلفة.
تمكين التخزين المؤقت لـ HTTP: قم بتكوين الخادم الخاص بك لإرسال رؤوس ذاكرة التخزين المؤقت HTTP المناسبة للسماح للمتصفحات بتخزين الأصول الثابتة. يمكن أن يقلل هذا بشكل كبير من عدد الطلبات إلى الخادم ويحسن TTFB لعمليات تحميل الصفحة اللاحقة. استفد من التخزين المؤقت للمتصفح بفعالية.
تحسين استعلامات قاعدة البيانات: يمكن أن تؤثر استعلامات قاعدة البيانات البطيئة بشكل كبير على TTFB. قم بتحسين استعلاماتك باستخدام الفهارس وتجنب عمليات فحص الجدول بالكامل وتخزين البيانات التي يتم الوصول إليها بشكل متكرر.
استخدام مضيف ويب أسرع: إذا كان مضيف الويب الحالي الخاص بك بطيئًا، ففكر في التبديل إلى مضيف أسرع.

3. تحسين تحميل الموارد

توفر واجهة برمجة تطبيقات توقيت الموارد معلومات مفصلة حول وقت تحميل الموارد الفردية، مثل الصور والبرامج النصية وأوراق الأنماط. استخدم هذه البيانات لتحديد الموارد التي تستغرق وقتًا طويلاً للتحميل وتحسينها.

استراتيجيات لتحسين تحميل الموارد:

ضغط الصور: استخدم أدوات تحسين الصور لضغط الصور دون التضحية بالجودة. ضع في اعتبارك استخدام تنسيقات الصور الحديثة مثل WebP، التي توفر ضغطًا أفضل من JPEG و PNG. قم بتقديم دقات صور مختلفة بناءً على جهاز المستخدم وحجم الشاشة باستخدام عنصر <picture> أو تقنيات الصور المتجاوبة.
تصغير CSS و JavaScript: قم بإزالة الأحرف غير الضرورية والمسافات البيضاء من ملفات CSS و JavaScript لتقليل حجمها.
تجميع ملفات CSS و JavaScript: ادمج ملفات CSS و JavaScript المتعددة في عدد أقل من الملفات لتقليل عدد طلبات HTTP. استخدم أدوات مثل Webpack أو Parcel أو Rollup للتجميع.
تأجيل تحميل الموارد غير الحرجة: قم بتحميل الموارد غير الحرجة (مثل الصور الموجودة أسفل الجزء المرئي من الصفحة) بشكل غير متزامن باستخدام تقنيات مثل التحميل الكسول.
استخدام شبكة توصيل المحتوى (CDN) للأصول الثابتة: قم بتقديم الأصول الثابتة (الصور، CSS، JavaScript) من شبكة CDN لتحسين أوقات التحميل.
تحديد أولويات الموارد الحرجة: استخدم <link rel="preload"> لتحديد أولويات تحميل الموارد الحرجة، مثل CSS والخطوط، لتحسين العرض الأولي للصفحة.

4. تحسين العرض

قم بتحسين طريقة عرض موقعك لتحسين تجربة المستخدم. تشمل المقاييس الرئيسية أول عرض (FP) وأول عرض محتوى (FCP) وأكبر عرض محتوى مرئي (LCP).

استراتيجيات لتحسين العرض:

تحسين تسليم CSS: قم بتسليم CSS بطريقة تمنع حظر العرض. استخدم تقنيات مثل CSS الحرج لتضمين CSS المطلوب لمنفذ العرض الأولي وتحميل CSS المتبقي بشكل غير متزامن.
تجنب JavaScript الذي يستغرق وقتًا طويلاً: قم بتقسيم مهام JavaScript التي تستغرق وقتًا طويلاً إلى أجزاء أصغر لمنع حظر الخيط الرئيسي.
استخدام عمال الويب (web workers): انقل المهام التي تتطلب حوسبة مكثفة إلى عمال الويب لتجنب حظر الخيط الرئيسي.
تحسين تنفيذ JavaScript: استخدم كود JavaScript فعال وتجنب التلاعب غير الضروري بـ DOM. يمكن لمكتبات DOM الافتراضية مثل React و Vue و Angular المساعدة في تحسين تحديثات DOM.
تقليل إزاحات التخطيط: قلل من إزاحات التخطيط غير المتوقعة لتحسين الاستقرار البصري. احجز مساحة للصور والإعلانات لمنع المحتوى من القفز أثناء تحميل الصفحة. استخدم مقياس إزاحة التخطيط التراكمية (CLS) لتحديد المناطق التي تحدث فيها إزاحات التخطيط.
تحسين الخطوط: استخدم خطوط الويب بكفاءة عن طريق التحميل المسبق لها، واستخدام font-display: swap; لتجنب النص غير المرئي، واستخدام مجموعات فرعية من الخطوط لتقليل أحجام ملفات الخطوط. ضع في اعتبارك استخدام خطوط النظام عند الاقتضاء.

5. مراقبة الأداء بشكل مستمر

أداء الموقع ليس إصلاحًا لمرة واحدة. من الضروري مراقبة الأداء بشكل مستمر لتحديد ومعالجة الاختناقات الجديدة عند ظهورها. استخدم أدوات مراقبة الأداء لتتبع المقاييس الرئيسية بمرور الوقت وإعداد تنبيهات لإعلامك عند تدهور الأداء. قم بمراجعة أداء موقعك بانتظام باستخدام أدوات مثل Google PageSpeed Insights و WebPageTest و Lighthouse. ضع في اعتبارك تطبيق مراقبة المستخدم الحقيقي (RUM) لجمع بيانات الأداء من المستخدمين الحقيقيين في مواقع مختلفة.

الاستفادة من واجهة برمجة تطبيقات توقيت المستخدم للمقاييس المخصصة

تتيح لك واجهة برمجة تطبيقات توقيت المستخدم تحديد مقاييس أداء مخصصة وقياس الوقت الذي تستغرقه أقسام معينة من الكود للتنفيذ. يمكن أن يكون هذا مفيدًا لتتبع أداء المكونات المخصصة أو تفاعلات مستخدم محددة.

مثال: قياس مقياس مخصص


// Start measuring
performance.mark('start-custom-metric');

// Perform some operation
// ... your code here ...

// End measuring
performance.mark('end-custom-metric');

// Calculate the duration
performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric');

// Get the measurement
const measures = performance.getEntriesByType('measure');
if (measures && measures.length > 0) {
  const customMetric = measures[0];
  console.log('Custom Metric Duration:', customMetric.duration);
}

مراقبة المستخدم الحقيقي (RUM) لرؤى الأداء العالمية

بينما يوفر الاختبار الاصطناعي (على سبيل المثال، باستخدام Lighthouse) رؤى قيمة، فإن مراقبة المستخدم الحقيقي (RUM) تقدم صورة أكثر دقة عن أداء موقعك للمستخدمين الحقيقيين في مواقع مختلفة وتحت ظروف شبكة متنوعة. تجمع RUM بيانات الأداء مباشرة من متصفحات المستخدمين وتوفر رؤى حول المقاييس الرئيسية مثل وقت تحميل الصفحة و TTFB ومعدلات الخطأ. ضع في اعتبارك استخدام أدوات RUM التي تتيح لك تقسيم البيانات حسب الجغرافيا والجهاز والمتصفح ونوع الشبكة لتحديد مشكلات الأداء الخاصة بشرائح مستخدمين معينة.

اعتبارات لتنفيذ RUM العالمي:

خصوصية البيانات: تأكد من الامتثال للوائح خصوصية البيانات مثل GDPR و CCPA عند جمع بيانات المستخدم. قم بإخفاء هوية البيانات الحساسة أو استخدام أسماء مستعارة حيثما أمكن.
أخذ العينات: ضع في اعتبارك استخدام أخذ العينات لتقليل كمية البيانات التي يتم جمعها وتقليل التأثير على أداء المستخدم.
التقسيم الجغرافي: قم بتقسيم بيانات RUM الخاصة بك حسب المنطقة الجغرافية لتحديد مشكلات الأداء الخاصة بمواقع معينة.
ظروف الشبكة: تتبع الأداء عبر أنواع الشبكات المختلفة (مثل 3G و 4G و Wi-Fi) لفهم كيفية تأثير ظروف الشبكة على تجربة المستخدم.

اختيار الأدوات المناسبة

يمكن أن تساعدك العديد من الأدوات في جمع وتحليل مقاييس تحميل الصفحة. تشمل بعض الخيارات الشائعة ما يلي:

Google PageSpeed Insights: أداة مجانية تحلل أداء موقعك وتقدم توصيات للتحسين.
WebPageTest: أداة مجانية تتيح لك اختبار أداء موقعك من مواقع ومتصفحات مختلفة.
Lighthouse: أداة مفتوحة المصدر تراجع أداء موقعك وإمكانية الوصول إليه وتحسين محركات البحث. وهي مدمجة في أدوات مطوري Chrome.
New Relic: منصة مراقبة شاملة توفر رؤى في الوقت الفعلي حول أداء موقعك.
Datadog: منصة مراقبة وتحليلات توفر مراقبة المستخدم الحقيقي وإمكانيات الاختبار الاصطناعي.
Sentry: منصة تتبع الأخطاء ومراقبة الأداء تساعدك على تحديد وإصلاح مشكلات الأداء.

الخاتمة

يعد تحسين أداء الواجهة الأمامية عملية مستمرة تتطلب مراقبة وتحليلًا وتحسينًا مستمرًا. من خلال الاستفادة من واجهة برمجة تطبيقات أداء الواجهة الأمامية والأدوات الأخرى، يمكنك الحصول على رؤى قيمة حول أداء موقعك وتحديد مجالات التحسين. تذكر أن تأخذ في الاعتبار الطبيعة العالمية لجمهورك وتحسينه للمستخدمين في مواقع مختلفة وبظروف شبكة متفاوتة. من خلال التركيز على تجربة المستخدم ومراقبة الأداء باستمرار، يمكنك التأكد من أن موقعك يقدم تجربة سريعة ومتجاوبة لجميع المستخدمين، بغض النظر عن مكان وجودهم في العالم. سيساعدك تنفيذ هذه الاستراتيجيات على إنشاء موقع ويب أسرع وأكثر جاذبية ونجاحًا لجمهور عالمي.