First Contentful Paint (FCP)

Philip Walton

ما هي سرعة عرض المحتوى على الصفحة (FCP)؟

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

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

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

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

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

كيفية قياس عدد مرّات الظهور النهائية

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

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

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

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

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

قياس وقت عرض الصفحة في JavaScript

لقياس وقت عرض الصفحة في 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 عند استعادة الصفحة من ذاكرة التخزين المؤقت للرجوع/الانتقال إلى الأمام، ولكن يجب قياس وقت التحميل الأولي في هذه الحالات لأنّ المستخدمين يواجهونها كزيارات صفحة مختلفة.
• قد لا تبلّغ واجهة برمجة التطبيقات عن أوقات عرض اللقطات من إطارات 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

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

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

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

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

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

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

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