LCP (Largest Contentful Paint) أحد مؤشّرات Core Web Vitals، يقيس الزمن حتى يُرسَم أكبر عنصر مرئي في الشاشة الأولى (غالبًا صورة الهيرو أو عنوان كبير) — أي متى يشعر الزائر أن الصفحة «ظهرت».

مؤشّرات Core Web Vitals الثلاثة: LCP أقل من 2.5 ثانية، INP أقل من 200 مللي ثانية، CLS أقل من 0.1، مع مناطق جيّد/يحتاج تحسين/ضعيف.Core Web Vitals: مؤشّرات تجربة الصفحةCLSثبات التخطيطجيّدضعيف< 0.1INPسرعة الاستجابةجيّدضعيف< 200 ملليLCPظهور أكبر عنصرجيّدضعيف< 2.5 ثانيةالأخضر = الهدف الجيّد · يُقاس من بيانات المستخدمين الحقيقيين
Core Web Vitals: LCP (ظهور أكبر عنصر) < 2.5 ثانية، INP (الاستجابة) < 200 مللي، CLS (ثبات التخطيط) < 0.1.

نقاط أساسية

  • الهدف: أقل من 2.5 ثانية للتقييم «جيّد».
  • أسبابه الشائعة: خادم بطيء (TTFB مرتفع)، صورة هيرو ثقيلة، موارد تحجب العرض، خطوط بطيئة.
  • علاجه: تحسين الصور وتقديم صورة LCP مبكرًا (preload)، الكاش، CDN، وعدم تكسيل عنصر LCP.
  • يُقاس ميدانيًا (مستخدمون حقيقيون) ومخبريًّا (Lighthouse).
LCPالتقييم
< 2.5 ثجيّد
2.5–4 ثيحتاج تحسينًا
> 4 ثضعيف

أيّ عنصر يُحتسب عنصر LCP

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

الأسباب الجذرية لبطء LCP

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

علاج LCP

العلاج يتبع السبب. لصورة الهيرو، استبق تحميلها بـpreload وامنحها fetchpriority="high" كي يجلبها المتصفّح مبكرًا وبأولوية، وقدّمها بصيغة حديثة مثل WebP أو AVIF بحجم مناسب للشاشة، ولا تكسّلها أبدًا لأنها داخل العرض من البداية. لخفض TTFB استعن بالكاش وCDN يقرّب المحتوى من الزائر. ولتقليل ما يحجب العرض، أزِل أو أجّل ملفّات CSS وJavaScript غير الضرورية في البداية. وللخطوط، اضبط عرضها بحيث يظهر النصّ فورًا بخطّ بديل ريثما يصل الخطّ النهائي.

القياس الميداني مقابل المخبري

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