First Contentful Paint (FCP)

Philip Walton

التوافق مع المتصفح

  • 60
  • 79
  • 84
  • 14.1

المصدر

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

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

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

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

ما هي درجة FCP الجيدة؟

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

تبلغ قيم FCP الجيدة 1.8 ثانية أو أقل، والقيم الضعيفة أكبر من 3.0 ثوانٍ، وأي قيمة تتراوح بين 1.8 ثانية أو أقل بحاجة إلى تحسين.
تبلغ القيم الجيدة لسرعة عرض المحتوى على الصفحة 1.8 ثانية أو أقل. إذا كانت القيم ذات قيمة منخفضة، تزيد مدتها عن 3.0 ثوانٍ.

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

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

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

أدوات المختبر

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

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

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

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

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

import {onFCP} from 'web-vitals';

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

يُرجى مراجعة رمز المصدر لـ onFCP() للاطّلاع على مثال كامل حول كيفية قياس سرعة عرض أكبر محتوى مرئي في JavaScript.

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

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

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

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

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

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

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