سرعة عرض أكبر جزء من المحتوى على الصفحة (Largest Contentful Paint) كجزء من Core Web Vitals، تقيس درجة (LCP) سرعة التحميل الملموسة لموقع الويب. يمكن ملاحظة هذا المقياس الذي يركز على المستخدم بشكل أكبر بالعين المجردة مقارنة بمقاييس أداء الويب الأخرى ويقيس الوقت المنقضي لعرض أكبر محتوى لصفحة ويب على الشاشة المرئية للمشاهد قبل التمرير.
ما هو معنى Largest Contentful Paint ؟
يشير معنى (Largest Contentful Paint) الى المدة التي يتم فيها عرض أكبر جزء من المحتوى على الصّفحة وعناصرها. وتُعتبر مدّة عرض أكبر جزء من المحتوى على الصفحة LCP، من قواعد الويب الأساسية بالنّسبة لـGoogle. والصّفحات التي تتوفّر على LCP جيد تكون لها الأولوية والأفضلية بالنسبة لمحرّك البحث والمستخدمين أيضا.
في الأساس، لا يأخذ LCP في الاعتبار سوى الكائنات الموجودة أعلى طية الصفحة، وهو المحتوى المرئي للمستخدم دون الحاجة إلى التمرير. تتضمن هذه الكائنات عادةً عناصر مثل صور البطل أو النصوص على مستوى الكتلة أو صور الملصقات المرئية. لا يأخذ LCP في الاعتبار أي شيء يقع خارج نافذة العرض (المنطقة المرئية لصفحة الويب والتي يمكن أن تتغير بناءً على الجهاز المستخدم للتصفح).
يشير الرسم البياني الأكبر حجمًا إلى الجزء المرئي الأكبر من الصفحة. فهو يبين وقت عرض أكبر عنصر مرئي (غالبًا الصور) في نافذة العرض قبل أن يقوم المستخدم بالتمرير لأسفل أو النقر على زر.
تقوم أداة (Largest Contentful Paint LCP) بتحليل الوقت المستغرق لعرض أكبر قدر من محتوى موقع الويب الخاص بك في متصفح المستخدم.
يُستخدم مقياس الأداء هذا لتحليل وقت التحميل الأولي للصفحة. يمكن اعتبار صورة البطل وكتل النص (مثل العناوين والفقرات) والصور المصغرة للفيديو بمثابة أكبر عنصر محتوى.
إذا كنت تريد أن تكون في المنطقة الخضراء في اختبار PageSpeed Insight، فيجب أن يكون وقت LCP أقل من 2.5 ثانية. تعتبر درجة LCP بين 2.5 ثانية و4.0 ثانية أداءً متوسطًا، وتقترح Google دائمًا تحسينها.
عرض أكبر جزء من المحتوى مقابل أول رسمة محتوى FCP
على النقيض من وقت تحميل العنصر الأكبر، يشير مصطلح (First Contentful Paint) إلى الوقت الذي يستغرقه ظهور العنصر المرئي الأول في منفذ العرض.
في حين أن سرعة تحميل الموقع الإجمالية تحدد أداءه تقليديًا، فقد أصبح LCP وFCP المقاييس المعترف بها المستخدمة في الصناعة لقياس سرعة تحميل موقع الويب.
في حين أن FCP هو مقياس مهم، إلا أنه ليس مقياسًا بالغ الأهمية مثل LCP لأنه ببساطة يقيس اللحظة التي تعرض فيها صفحة الويب أول عنصر مرئي قد يكون متقدمًا كثيرًا عن العناصر الأكبر الأخرى. من ناحية أخرى، يرتبط LCP ارتباطًا وثيقًا بتجربة المستخدم، وعادةً ما يقلل LCP السريع من انزعاج المستخدم.
أكبر أمثلة على سرعة عرض أكبر جزء من المحتوى (LCP)
تعد شركة فودافون واحدة من أكبر شركات تقديم الخدمات اللاسلكية على مستوى العالم، حيث يعمل بها أكثر من 90 ألف موظف في 22 دولة. وتزعم دراسة حالة وثقتها جوجل أن الشركة تمكنت من زيادة مبيعاتها بنسبة 5% بفضل تحسين ربحية العملاء بنسبة 31% من خلال تحويل المزيد من زوار الموقع إلى مشتريات. وتترجم هذه الزيادة إلى عشرات الملايين من الدولارات بالنظر إلى حجم فودافون.
لقد أجروا اختبار A/B مع صفحتين مقصودتين (اللقطتان أدناه)، حيث تلقت كل منهما 34 ألف زائر من قنوات متعددة، بما في ذلك إعلانات العرض، ووسائل التواصل الاجتماعي، والبحث العضوي.
استخدمت لقطة الشاشة الموجودة على اليسار أفضل الممارسات لتحسين LCP، والتي تم شرحها لاحقًا في هذه المقالة. في هذه الحالة، تضمنت التحسينات تحويل بعض المنطق من جانب العميل (الهاتف) إلى جانب الخادم وتحسين كيفية تنسيق الصور وتحميلها.
وبناءً على هذه التحسينات، حدث أكبر رسم للمحتوى في 5.7 ثانية بدلاً من 8.3 ثانية، مما أدى إلى تحسين نتائج تحويل المبيعات من الصفحة الموجودة على اليسار بنسبة تتراوح بين 11 إلى 15%.
كيفية قياس أكبر جزء من المحتوى LargestContentful Paint؟
تتضمن أنواع العناصر الفردية التي يتم النظر فيها عادةً لـ LCP ما يلي؛
• صور المقدمة- عناصر الصورة (<img>)
- عناصر الصورة داخل كود SVG (<image>).
- صورة الخلفية
• صور الخلفية مع CSS (الخلفية: url(‘example.png’))
- عناصر الفيديو
صور مصغرة للفيديو أو عناصر فيديو تحتوي على صور ملصقات فقط
- عناصر النص
كتلة من علامات فقرة النص (<p>)، أو القوائم (<ol>، <ul>)، أو العناوين (<h1>، <h2>).
ومن الجدير بالذكر أنه في وقت كتابة هذا المقال، لم يتم استخدام عناصر svg والفيديو لحساب درجة LCP ولكن قد تتم إضافتها في المستقبل.
كيف يتم تحديد حجم العنصر؟
عادةً، يتم الإبلاغ عن حجم العنصر المرئي للعين المجردة داخل نافذة العرض لـ LCP.
- الحجم = العرض × الارتفاع
- الهامش والحشو والحدود ليست جزءًا من حساب الحجم.
تذكر التمييز بين الحجم الجوهري (الحجم الأصلي للعنصر الذي تم تحميله) بدلاً من الحجم المرئي للعنصر. تضع Google في اعتبارها حجم البكسل الأصغر بين الحجم المرئي والحجم الجوهري لحساب حجم العنصر.
لماذا يعد Largest Contentful Paint مهمًا لتحسين محركات البحث؟
تعتبر مشكلة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) من المشاكل المعقدة والشائعة التي تواجه اصحاب المواقع والمدونات على شبكة الانترنت. وحل هذه المشكلة على موقعك يزيد من فرصته للتصدر في محركات البحث.