أكبر طلاء محتوى (LCP): الدليل الفني الكامل ومعيار التحسين

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

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

الإجابة-الملخص الأول

أكبر رسم محتوى (LCP) هو مقياس أساسي لحيوية الويب يقيس سرعة تحميل الصفحة الملموسة من خلال التوقيت الذي ينتهي فيه عرض أكبر كتلة نصية مرئية أو عنصر صورة في إطار العرض.تبلغ درجة النجاح في LCP 2.5 ثانية أو أقل لما لا يقل عن 75% من زيارات الصفحة في البيانات الميدانية للمستخدم الحقيقي (CrUX).يتكون زمن استجابة LCP من أربعة أجزاء فرعية متميزة: الوقت حتى البايت الأول (TTFB)، وتأخير تحميل المورد، ومدة تحميل المورد، وتأخير عرض العنصر.يتطلب تحسين LCP التحميل المسبق لأصول البطل، ونشر التخزين المؤقت على الحافة، وضغط الصور إلى تنسيقات WebP/AVIF، والتخلص من CSS وJavaScript الذي يحظر العرض.

مقياس تصنيف نقاط LCP وعتبات مؤشرات أداء الويب الأساسية

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

وقت عرض LCP	تقييم الأداء	تأثير المستخدم وإشارات تصنيف بحث Google
$\le 2.5\text{ ثانية}$	جيد (أخضر)	التحميل السريع المتصور.يرضي تمامًا تقييم Google لمؤشرات أداء الويب الأساسية.
$> 2.5\نص {s} $ و$\le 4.0\text {s} $	يحتاج إلى تحسين (العنبر)	تأخير ملحوظ في التحميل؛الانخفاض المحتمل في معدلات تحويل الأجهزة المحمولة وتصنيف البحث.
$> 4.0\text{ ثانية}$	فقير (أحمر)	تأخير شديد في التحميل البصري.ارتفاع معدلات ارتداد المستخدم وعقوبة ترتيب البحث.

للحصول على درجة النجاح في تقييم مؤشرات أداء الويب الأساسية، يجب أن يحقق موقع الويب درجة LCP في فئة جيد ($\le 2.5\text{ ثواني}$) لما لا يقل عن 75% من زيارات الصفحة، ويتم تقييمها عبر مجموعات أجهزة سطح المكتب والأجهزة المحمولة في البيانات الميدانية الواقعية.

ما هي عناصر DOM المؤهلة لتقييم LCP؟

وفقًا لمواصفات W3C Largest Contentful Paint الرسمية، يراقب المتصفح عناصر DOM مرئية محددة تقع داخل إطار العرض الأولي:

عناصر <img> القياسية (بما في ذلك الصور المعروضة داخل علامات <picture> المستجيبة).
<image> عناصر مضمنة داخل حاوية متجهة <svg>.
صور ملصق الفيديو (السمة poster على عنصر <video>).
العناصر التي تحتوي على صورة خلفية CSS تم تحميلها عبر الدالة url().
حاويات HTML على مستوى الكتلة تحتوي على عقد نصية أو عناصر نصية فرعية مضمنة (مثل <h1> حتى <h6> العناوين، <p> الفقرات، أو كتل <div>).

تفكيك LCP: الأجزاء الفرعية الأربعة

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

الوقت حتى البايت الأول (TTFB): الوقت المنقضي منذ أن يطلب المستخدم الصفحة حتى يتلقى المتصفح البايت الأول من استجابة مستند HTML من الخادم.الهدف: $< 800\text {ms} $ (40%$ من ميزانية LCP).
تأخير تحميل المورد: التأخير بين وقت انتهاء مستند HTML من تلقي بايتات الاستجابة ووقت اكتشاف المتصفح لمورد LCP وبدء جلبه (مثل الصورة الرئيسية).الهدف: $< 200\text {ms} $ (10%$ من ميزانية LCP).
مدة تحميل المورد: المدة المطلوبة للمتصفح لتنزيل صورة LCP أو أصل الخط عبر الشبكة.الهدف: $< 800\text {ms} $ (40%$ من ميزانية LCP).
تأخير عرض العنصر: الوقت بين انتهاء تنزيل مورد LCP ووقت إكمال المتصفح لحسابات التخطيط ورسم العنصر على الشاشة.الهدف: $< 200\text {ms} $ (10%$ من ميزانية LCP).

رياضياً، إجمالي زمن وصول LCP هو مجموع هذه الأجزاء الفرعية الأربعة:

$$\text {LCP} = \text {TTFB} + \text{تأخير تحميل المورد} + \text{مدة تحميل المورد} + \text{تأخير عرض العنصر}$$

تقنيات مجربة لتحسين LCP

التخلص من تأخير تحميل المورد: أضف <link rel="preload" as="image" href="..."> أو fetchpriority="high" إلى علامة الصورة الرئيسية الخاصة بك حتى يبدأ المتصفح تنزيل الصورة على الفور أثناء تحليل HTML.
تحسين استجابة الخادم (TTFB): نشر التخزين المؤقت للحافة عبر CDN، وتحسين أداء استعلام قاعدة البيانات، واستخدام تعدد إرسال خادم HTTP/2 أو HTTP/3.
ضغط الصور وتحديثها: يمكنك عرض الصور الرئيسية باستخدام تنسيقات WebP أو AVIF الحديثة بأحجام srcset سريعة الاستجابة والمصممة خصيصًا لأبعاد شاشة الهاتف المحمول وسطح المكتب.
تقليل موارد حظر العرض: قم بتضمين CSS المهم في العلامة <head> وتأجيل JavaScript غير المهمة باستخدام سمات البرنامج النصي defer أو async.
تحسين تحميل خط الويب: استخدم font-display: swap أو font-display: optional في قواعد CSS @font-face لضمان بقاء كتل النص مرئية على الفور أثناء انتهاء تنزيل خطوط الويب عبر الشبكة.

LCP مقابل طلاء المحتوى الأول (FCP) مقابل مؤشر السرعة

بينما يقوم كل من LCP وFCP وSpeed Index بقياس أداء التحميل، إلا أنهم يلتقطون جوانب مختلفة من تقدم تحميل الصفحة:

أول رسم للمحتوى (FCP): يتم القياس عند انتهاء عرض أول عنصر DOM (مثل لون الخلفية أو القرص الدوار أو نص الرأس) على الشاشة.
أكبر رسم محتوى (LCP): يتم القياس عند اكتمال العرض لعنصر المحتوى المرئي الأساسي (الشعار الرئيسي أو كتلة الفقرة الرئيسية).
مؤشر السرعة: يقيس مدى سرعة ملء المحتوى المرئي لإطار العرض بمرور الوقت أثناء تسجيل التقدم المرئي.

يُمنح LCP أعلى وزن بين مقاييس التحميل في خوارزمية نقاط Lighthouse من Google (حاليًا 25% من إجمالي نقاط الأداء) لأنه يتوافق بشكل وثيق مع تصور المستخدم الحقيقي لاكتمال تحميل الصفحة.

مراقبة LCP المستمرة باستخدام SimpleOps

SimpleOps يقوم بأتمتة تتبع أكبر محتوى للرسم من خلال التقاط عمليات تدقيق معمل Lighthouse الاصطناعية ومقاييس مجموعة البيانات الميدانية لتقرير Chrome UX (CrUX) في لوحة معلومات مراقبة موحدة واحدة.يقوم SimpleOps بإرسال تنبيهات استباقية فورية كلما خرقت نسبة LCP المئوية الخامسة والسبعين لموقعك ميزانية الأداء التي تبلغ 2.5 ثانية، مما يمكّن فريقك من حماية التحويلات وتصنيفات البحث.