Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

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

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

كنّا ننصح سابقًا بمقاييس الأداء، مثل سرعة عرض أول محتوى مرئي (FMP) ومؤشر السرعة (SI) (وهما متاحان في Lighthouse) للمساعدة في الاستفادة من تجربة التحميل بشكل أكبر بعد عرض محتوى الصفحة، ولكن هذه المقاييس معقّدة ويصعب تفسيرها وغالبًا ما تكون غير صحيحة، ما يعني أنّها لا تزال غير قادرة على تحديد وقت تحميل المحتوى الرئيسي للصفحة.

استنادًا إلى المناقشات التي جرت في مجموعة عمل أداء الويب W3C والأبحاث التي تم إجراؤها في Google، تبيَّن لنا أن الطريقة الأكثر دقة لقياس أوقات تحميل المحتوى الرئيسي للصفحة هي التحقق من وقت عرض العنصر الأكبر.

ما هو LCP؟

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

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

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

ما العناصر التي يتم أخذها في الاعتبار؟

كما هو موضّح في سرعة عرض أكبر محتوى مرئي، إنّ أنواع العناصر التي يتم أخذها في الاعتبار لعرض أكبر محتوى مرئي:

• عناصر <img> (يتم استخدام وقت عرض اللقطة الأولى للمحتوى المتحرك، مثل ملفات GIF أو ملفات PNG المتحركة)
• عناصر <image> داخل عنصر <svg>
• عناصر <video> (يتم استخدام وقت تحميل صورة الملصق أو وقت عرض اللقطة الأولى للفيديوهات، أيّهما أسبق)
• عنصر مع صورة خلفية تم تحميله باستخدام الدالة url()، (على عكس تدرج CSS)
• العناصر على مستوى الحظر التي تحتوي على عُقد نصية أو عناصر نصية ثانوية أخرى على المستوى المضمّن

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

إلى جانب مراعاة بعض العناصر فقط، تستخدم قياسات سرعة عرض أكبر جزء من المحتوى على الصفحة إشارات استدلالية لاستبعاد بعض العناصر التي من المرجَّح أن يعتبرها المستخدمون "غير مضمونة". وبالنسبة إلى المتصفّحات المستندة إلى Chromium، تشمل هذه ما يلي:

• عناصر بدرجة تعتيم 0، مما يجعلها غير مرئية للمستخدم.
• العناصر التي تغطي إطار العرض بالكامل، والتي من المرجَّح أن تكون عناصر خلفية.
• صور عناصر نائبة أو صور أخرى ذات قصور منخفض، والتي من المحتمل ألا تعكس المحتوى الحقيقي للصفحة.

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

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

كيف يتم تحديد حجم العنصر؟

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

بالنسبة إلى عناصر الصور التي تم تغيير حجمها من الحجم الأساسي، يكون الحجم الذي يتم الإبلاغ عنه إما الحجم المرئي أو الحجم الأساسي، أيهما أصغر.

في العناصر النصية، يأخذ LCP في الاعتبار أصغر مستطيل يمكن أن يحتوي على جميع العُقد النصية.

بالنسبة إلى جميع العناصر، لا يأخذ LCP في الاعتبار الهوامش أو المساحات المتروكة أو الحدود المطبَّقة باستخدام CSS.

متى يتم الإبلاغ عن سرعة LCP؟

غالبًا ما يتم تحميل صفحات الويب على مراحل، ونتيجةً لذلك، قد يتغير العنصر الأكبر على الصفحة أثناء التحميل.

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

على سبيل المثال، في صفحة تحتوي على نص وصورة جزء رئيسي، قد يعرض المتصفّح في البداية النص فقط، ويرسل المتصفّح إدخال largest-contentful-paint حيث تشير السمة element إلى <p> أو <h1>. بعد انتهاء تحميل صورة الجزء الرئيسي، يتم إرسال إدخال largest-contentful-paint ثانٍ، مع تضمين سمة element تشير إلى <img>.

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

بالإضافة إلى الصور والخطوط التي يتم تحميلها متأخرًا، قد تضيف الصفحة عناصر جديدة إلى DOM عند توفُّر محتوى جديد. إذا كان أي من هذه العناصر الجديدة أكبر من حجم العنصر السابق للمحتوى، يتم إنشاء PerformanceEntry جديد.

إذا تمت إزالة عنصر المحتوى الأكبر من إطار العرض أو حتى من نموذج كائن المستند (DOM)، يظل العنصر الأكبر من عناصر المحتوى ما لم يتم عرض عنصر أكبر من المحتوى.

يتوقف المتصفّح عن الإبلاغ عن الإدخالات الجديدة فور تفاعل المستخدم مع الصفحة (من خلال النقر أو التمرير أو الضغط على المفاتيح)، لأنّ تفاعل المستخدم غالبًا ما يغيّر ما هو مرئي للمستخدم (خاصةً عند التمرير).

لأغراض التحليل، يُرجى الإبلاغ فقط عن آخر PerformanceEntry تم إرسالها إلى خدمة الإحصاءات.

وقت التحميل مقابل وقت العرض

لأسباب تتعلق بالأمان، لا يتم عرض الطابع الزمني لعرض الصور إذا كانت الصور من مصادر متعددة لا تتضمن العنوان Timing-Allow-Origin. وبدلاً من ذلك، لا يتوفّر سوى وقت التحميل، الذي تعرضه واجهات برمجة التطبيقات الأخرى.

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

ننصحك دائمًا بضبط العنوان Timing-Allow-Origin لجعل المقاييس أكثر دقة.

كيف يتم التعامل مع تغييرات تخطيط العناصر وحجمها؟

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

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

أمثلة

إليك بعض الأمثلة على حالات "سرعة عرض أكبر محتوى مرئي" على بعض المواقع الإلكترونية الرائجة:

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

قد يكون المحتوى المتأخّر غالبًا أكبر من المحتوى المتوفّر على الصفحة، ولكن هذا لا يحدث بالضرورة. يوضح المثالان التاليان حدوث LCP قبل تحميل الصفحة بالكامل.

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

طريقة قياس سرعة LCP

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

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

• تقرير تجربة المستخدم في Chrome
• PageSpeed Insights
• Search Console (تقرير "مؤشرات أداء الويب الأساسية")
• مكتبة JavaScript web-vitals

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

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

قياس سرعة LCP في JavaScript

لقياس سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) في JavaScript، استخدِم أكبر Contentful Paint API. يوضّح المثال التالي كيفية إنشاء PerformanceObserver يستمع إلى إدخالات largest-contentful-paint ويسجّلها في وحدة التحكّم.

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

في المثال السابق، يمثّل كل إدخال largest-contentful-paint مسجَّل المرشح الحالي لمقياس LCP. وبشكل عام، تكون قيمة startTime للإدخال الأخير المطلقة هي قيمة LCP. ومع ذلك، ليست كل largest-contentful-paintإدخالات صالحة لقياس LCP

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

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

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

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

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

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

ماذا لو لم يكن العنصر الأكبر هو الأكثر أهمية؟

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

طريقة تحسين سرعة LCP

يتوفّر دليل شامل حول تحسين LCP لإرشادك خلال عملية تحديد توقيتات LCP في المجال واستخدام البيانات المعملية للتوغّل فيها وتحسينها.

مراجع إضافية

• الدروس المستفادة من مراقبة الأداء في Chrome من إعداد آني سوليفان في performance.now() (2019)

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

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

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

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