First Contentful Paint (FCP)

Philip Walton

دعم المتصفح

  • 60
  • 79
  • 84
  • 14.1

المصدر

ما هو FCP؟

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

المخطط الزمني لـ FCP من google.com
في هذا المخطط الزمني للتحميل، تحدث تقنية FCP في الإطار الثاني، لأنّ ذلك هو عند عرض أول عناصر النص والصورة على الشاشة.

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

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

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

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

تبلغ قيم FCP الجيدة 1.8 ثانية أو أقل، والقيم الضعيفة تزيد عن 3.0 ثانية.
تبلغ قيم FCP الجيدة 1.8 ثانية أو أقل. القيم السيئة أطول من 3.0 ثوانٍ

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

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

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

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

قياس "سرعة عرض المحتوى على الصفحة" (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 والتركيز على أي فرص أو بيانات تشخيص محددة يقترحها التدقيق.

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

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

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

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

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