First Contentful Paint (FCP)

Philip Walton

ما هو FCP؟

يقيس "سرعة عرض أول محتوى مرئي" (FCP) الوقت المنقضي منذ انتقال المستخدم إلى الصفحة لأول مرة حتى وقت عرض أي جزء من محتوى الصفحة على الشاشة. بالنسبة لهذا المقياس، "المحتوى" إلى نص أو صور (بما في ذلك صور الخلفية) أو عناصر <svg> أو عناصر <canvas> غير بيضاء.

في المخطط الزمني للتحميل الموضح في الصورة السابقة، تحدث تقنية FCP في الإطار الثاني، كما يحدث عند عرض أول عناصر النص والصورة على الشاشة.

ستلاحظ أنه على الرغم من عرض بعض المحتوى، لم يتم عرض كله. ويُعتبر ذلك فرقًا مهمًا بين سرعة عرض أوّل سرعة عرض المحتوى وأكبر سرعة عرض محتوى (LCP)، ويهدف إلى قياس وقت انتهاء تحميل المحتوى الرئيسي للصفحة.

ما هي نتيجة FCP الجيدة؟

لتقديم تجربة جيدة للمستخدم، يجب أن تسعى المواقع الإلكترونية إلى أن تكون سرعة عرض أول محتوى على الصفحة 1.8 ثانية أو أقل. لضمان تحقيق هذا الاستهداف لمعظم المستخدمين، يُعدّ الحد الأدنى الجيد الذي يمكن قياسه هو الشريحة المئوية الخامسة والسبعين لعمليات تحميل الصفحات، والمقسّمة على جميع الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.

كيفية قياس "سرعة عرض المحتوى على الصفحة"

يمكن قياس FCP في المختبر أو في المجال، وهو متاح في الأدوات التالية:

الأدوات الميدانية

• PageSpeed Insights
• تجربة المستخدم على Chrome الإبلاغ
• Search Console (السرعة) الإبلاغ)
• مكتبة JavaScript web-vitals

أدوات التمرين المعملي

• Lighthouse
• أدوات مطوري البرامج في Chrome
• PageSpeed Insights

قياس "سرعة عرض المحتوى على الصفحة" (FCP) في JavaScript

لقياس FCP في JavaScript، يمكنك استخدام Paint Timing API. يوضح المثال التالي كيفية إنشاء PerformanceObserver يرصد إدخال paint باسم first-contentful-paint ويسجّله في وحدة التحكّم.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

في مقتطف الرمز السابق، سيُطلعك الإدخال first-contentful-paint الذي تم تسجيله على وقت عرض أول عنصر غني بالمحتوى. ومع ذلك، في بعض الحالات، يكون هذا الإدخال غير صالح لقياس "سرعة عرض المحتوى على الصفحة".

يسرد القسم التالي الاختلافات بين التقارير التي تقدّمها واجهة برمجة التطبيقات وكيفية احتساب المقياس.

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

• سترسِل واجهة برمجة التطبيقات الإدخال first-contentful-paint للصفحات التي تم تحميلها في علامة تبويب في الخلفية، ولكن يجب تجاهل هذه الصفحات عند احتساب سرعة عرض المحتوى على الصفحة (يجب مراعاة توقيتات عرض الصفحة الأولى فقط إذا كانت الصفحة معروضة في المقدّمة طوال الوقت).
• لا تُبلِغ واجهة برمجة التطبيقات عن إدخالات first-contentful-paint عند استعادة الصفحة من ميزة "التخزين المؤقت للصفحات"، ولكن يجب قياس مقياس FCP في هذه الحالات لأنّ المستخدمين يواجهونها كزيارات مختلفة للصفحة.
• قد لا تبلّغ واجهة برمجة التطبيقات عن أوقات عرض اللقطات من إطارات iframe من مصادر متعددة، ولكن لقياس "سرعة عرض المحتوى على الصفحة" بشكل صحيح، يجب مراعاة جميع اللقطات. يمكن للإطارات الفرعية استخدام واجهة برمجة التطبيقات للإبلاغ عن توقيتات عرض البيانات إلى الإطار الأصلي للتجميع.
• تقيس واجهة برمجة التطبيقات مقياس FCP من وقت بدء التنقّل، ولكن بالنسبة إلى الصفحات المعروضة مُسبقًا، يجب قياس FCP من activationStart بما يتوافق مع وقت FCP حسب تجربة المستخدم.

بدلاً من تذكُّر كل هذه الاختلافات الدقيقة، يمكن للمطوّرين استخدام مكتبة JavaScript web-vitals لقياس سرعة عرض المحتوى على الصفحة (FCP) التي تعالج هذه الاختلافات نيابةً عنك (حيثما أمكن، مع العِلم بأنّه لم يتم تناول مشكلة إطار iframe):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

يمكنك الرجوع إلى رمز المصدر لـ onFCP() للاطّلاع على مثال كامل حول كيفية قياس FCP في JavaScript.

كيفية تحسين سرعة عرض المحتوى على الصفحة

للتعرّف على كيفية تحسين FCP لموقع إلكتروني معيّن، يمكنك إجراء تدقيق لأداء Lighthouse والتركيز على أي فرص أو بيانات تشخيص محددة يقترحها التدقيق.

للتعرّف على كيفية تحسين سرعة عرض المحتوى على الصفحة بشكل عام (لأي موقع إلكتروني)، يمكنك الاطّلاع على أدلة الأداء التالية:

• إزالة الموارد التي تحظر العرض
• تصغير صفحات الأنماط المتتالية (CSS)
• إزالة خدمة مقارنة الأسعار (CSS) غير المستخدَمة
• إزالة محتوى JavaScript غير المستخدَم
• الاتصال المُسبَق بالمصادر المطلوبة
• تقليل أوقات استجابة الخادم (TTFB)
• تجنُّب عمليات إعادة توجيه الصفحات المتعدّدة
• التحميل المُسبق للطلبات الرئيسية
• تجنُّب الأحمال الضخمة للشبكة
• عرض مواد العرض الثابتة باستخدام سياسة ذاكرة التخزين المؤقت الفعّالة
• تجنُّب استخدام حجم زائد في DOM
• تقليل أهمية الطلبات المهمة إلى أدنى حد ممكن
• التأكُّد من بقاء النص مرئيًا أثناء تحميل خط موقع إلكتروني
• الحفاظ على انخفاض عدد الطلبات ونقل أحجام النقل

سجلّ التغييرات

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

لمساعدتك على إدارة هذه المقاييس، سيتم عرض جميع التغييرات التي تطرأ على تنفيذ هذه المقاييس أو تعريفها في سجلّ التغييرات هذا.

إذا كانت لديك ملاحظات بشأن هذه المقاييس، يمكنك تقديمها في مجموعة Google الخاصة بملاحظات مؤشرات أداء الويب.