في هذه التدوينة سوف نتحدث عن الأدوات اللازمة لقياس سرعة عرض أكبر جزء من المحتوى (Largest Contentful Paint) وايضا ما هي الدرجة التي يجب ان تصل اليها حتى تصبح صفحاتك جيدة ومناسبة لمحركات البحث.
وكذلك سوف نناقش الطرق التي يمكن من خلالها تقليل درجة عرض أكبر جزء من المحتوى في الصفحة أو على مستوى الموقع الالكتروني الخاص بك.
الأدوات اللازمة لقياس سرعة عرض أكبر جزء من المحتوى (LCP)
يمكنك قياس LCP باستخدام أدوات المختبر (يتم قياسها استنادًا إلى المعاملات المحاكاة) أو أدوات الميدان (يتم قياسها باستخدام حركة مرور المستخدم الفعلية).
- أدوات المختبر (أداة مراقبة اصطناعية مثل WebPageTest): تشير إلى عمليات محاكاة الأداء القائمة على الخوارزمية.
- أدوات الميدان (مراقبة المستخدم الحقيقي): يتم إجراؤها مباشرةً على الموقع المباشر استنادًا إلى حركة المرور في العالم الحقيقي. تتضمن الأدوات المستخدمة لهذا القياس Google Search Console (تقرير Web Vitals الأساسي الجديد) ومكتبة JavaScript Web Vitals.
اتبع الخطوات التالية للعثور بسرعة على العنصر الأكبر باستخدام WebPageTest:
- اذهب الى موقع : https://www.webpagetest.org
- أدخل عنوان URL لصفحة الويب التي تريد اختبارها (استخدمنا هذا العنوان في المثال أدناه).
- انقر فوق "بدء الاختبار" وانتظر بضع دقائق للحصول على النتائج النهائية.
- حدد "عرض كشريط فيلم" لمشاهدة إطار الاختبار بالكامل إطارًا تلو الآخر أو "عرض الفيديو" لمشاهدة تسجيل لتجربة المستخدم أثناء تحميل الصفحة. هاتان الميزتان فريدتان من نوعهما في WebPageTest وهما عاملان أساسيان يميزان مقارنة بأساليب القياس الأخرى.
هو العنصر الأكبر المسبب لـ LCP.
يمكنك استخدام الخيارات التالية في عرض شريط الفيلم لفهم أفضل.
- تسليط الضوء على أكبر الدهانات ذات المحتوى
- حجم الصورة المصغرة: كبير
- فترة الصورة المصغرة: 0.5 ثانية
قياس الطلاء المتقدم الأكبر حجمًا: مكتبة Web Vitals
يمكن للمطورين استخدام كود صفحة الويب لتسجيل قيم LCP في وحدة التحكم بالمتصفح (السطر الثالث من الكود). يقيس هذا النهج حركة مرور المستخدم الحقيقية باستخدام واجهة برمجة تطبيقات Largest Contentful Paint.
يساعد الكود أدناه المطورين على جمع قيم قياس LCP من سجل وحدة التحكم لإعداد التقارير أو دمجها في أدوات تابعة لجهات خارجية أو محلية الصنع.
تفسير نتيجة LCP
تعتبر Google أن وقت تحميل موقع الويب الذي يقل عن 2.5 ثانية "جيد". يوفر الجدول أدناه ملخصًا لنطاقات قيمة وقت التحميل والتقييم لكل منها.
مثال على أكبر نتيجة جيدة في Paint Contentful
تُظهر لقطة الشاشة أدناه موقع عاصفة الكمبيوتر بدرجة LCP جيدة، والتي يتم تمييزها بمستطيل أحمر. يمكنك الاطلاع على تقرير أداء الويب المؤرشف بالكامل هنا، والذي تم إنشاؤه بواسطة أداة WebPageTest.
مثال على أكبر درجة عرض محتوى يمكن تحسينها
ما الذي يساهم في الحصول على درجة ضعيفة في Largest Contentful Paint وكيفية إصلاحه؟
- إن أبسط الحلول لتحسين أداء الخادم هو ترقية خطة الاستضافة الخاصة بك. إذا كان خادم الاستضافة مثقلًا بالأعباء، فأنت بحاجة إلى تحسينه من خلال إصلاح الاختناقات (على سبيل المثال، حركة المرور الكثيفة، والتوجيه البطيء، ونقص موارد وحدة المعالجة المركزية، وبطء عملية تحميل قاعدة البيانات، ونقص الذاكرة، وما إلى ذلك) التي تبطئ أنظمتك.
- زيادة عدد الخوادم إذا تجاوز استخدام وحدة المعالجة المركزية الحالي والمتوقع 80%
- تمكين الضغط من خلال تحديث تكوين الخادم لتقليل حجم نقل البيانات
- تحسين الملفات الكبيرة مثل صور البطل لتقليل حجم موقع الويب الخاص بك بشكل سريع وملموس.
- تفعيل شبكة توصيل المحتوى
لا يحتاج المتصفح إلا إلى العناصر الأساسية المطلوبة لإنشاء صفحة قبل عرضها للمشاهدين. ويعتبر أي عنصر أو كود آخر (مثل JavaScript أو جدول الأنماط) يمكن تحميله بعد عرض الصفحة غير ضروري لعرض صفحة الويب. ويؤدي تحميل ومعالجة العناصر غير الضرورية إلى إبطاء وقت عرض الصفحة بشكل غير ضروري. ويشار إلى هذا المفهوم باسم حجب العرض وهو سبب شائع لتأخير تحميل موقع الويب. ونظرًا لأنه يجب على المتصفح تنزيله ومعالجته أولاً قبل معرفة ما إذا كان مهمًا أم لا، فإن مهمة مطوري الويب هي جعل هذه العملية أكثر فعالية.
في عرض الشلال لنفس مثال bbc.com/news الذي تمت مشاركته سابقًا في هذه المقالة، يمكنك رؤية الموارد التي تمنع العرض كما هو موضح في لقطة الشاشة التالية.
يقوم WebPageTest بتحليل عملية عرض المتصفح وتحديد الملفات المعطلة حتى تتمكن من معالجتها لتحسين وقت تحميل الصفحة. يمكنك النقر هنا (الانتقال إلى "عرض الشلال") للحصول على التقرير المؤرشف المفصل الذي أنتجته WebPageTest والذي يوضح عناصر CSS وJS التي تسبب تأخير تحميل الصفحة.
كيفية اصلاح مشكلة منع العرض؟
يمكنك تحسين درجة LCP الخاصة بك عن طريق تأخير تحميل ملفات JS وCSS. على سبيل المثال، إذا كان موقع الويب الخاص بك يحتوي على الكثير من ملفات JS الكبيرة، ولكنك تؤجل الملفات غير الحرجة وتطالب في البداية بتحميل شريط تمرير يحتوي على الحد الأدنى من النص، فيمكنك بسهولة تقليل ملفات CSS وJS التي تعيق العرض.
قم بتنظيف البرنامج النصي الخاص بك وإزالة جميع البرامج النصية غير الضرورية من جهات خارجية. على سبيل المثال، تعد شارات الوسائط الاجتماعية المميزة المعروضة على المدونات لمساعدة القراء على المشاركة مرشحين مناسبين للتحميل المتأخر. فيما يلي قائمة مرجعية بأفضل الممارسات لتحسين حظر العرض:
- تصغير حجم CSS الخاص بك
- تأجيل CSS غير الحرجة
- تأجيل CSS الحرجة المضمنة
- تصغير وضغط ملفات JS
- تأجيل عناصر JS غير المستخدمة
- إزالة الحشوات غير المستخدمة
في بعض الأحيان، يكون عنصر الرسم الأكبر حجمًا ثقيلًا للغاية بالنسبة لجهاز المستخدم والمتصفح وسرعة اتصال الإنترنت. قد يتم تحميل الصفحة نفسها بسرعة على جهاز كمبيوتر سطح المكتب ولكن ببطء على هاتف قديم في موقع بعيد. عادةً ما تكون الصور مسؤولة عن معظم تأخيرات التحميل، مما يؤثر على درجة LCP.
على سبيل المثال، نقوم بتشغيل اختبار صفحة الويب على مقالة فوربس هذه، وكما هو موضح في لقطة الشاشة أدناه، يمكنك رؤية صور غير مضغوطة تتسبب في بطء التحميل. تعرض لقطة الشاشة أدناه علامة التبويب "المحتوى" في صفحة نتائج اختبار صفحة الويب، مع تسليط الضوء على المعلومات ذات الصلة في مستطيل أحمر.
انتقل إلى علامة التبويب "الأداء" لنتيجة الاختبار في WebPageTest المؤرشفة (المرتبطة أدناه) لمزيد من التفاصيل.
يمكنك النقر هنا لرؤية التفاصيل حول هذه العناصر غير المضغوطة التي تلعب دورًا مهمًا في ضعف LCP في مقالة فوربس قيد المراجعة.
كيفية اصلاحها؟
الحل الأبسط في هذه الحالة هو ضغط وتحسين الصور الكبيرة عالية الدقة. فيما يلي قائمة بأفضل الممارسات للتعامل مع الصور الكبيرة:
- ضغط الصور الكبيرة قبل تحميلها إلى موقعك
- استخدم مكونًا إضافيًا لضغط الصور بمجرد تحميلها إلى موقعك
- تقديم المحتوى الرسومي بتنسيق WebP بدلاً من PNG أو JPEG
- يفضل استخدام صور عالية الجودة ومتجاوبة بالأحجام الصحيحة
غالبًا ما يتم استخدام التحميل الكسول لتحسين تجربة المستخدم؛ ومع ذلك، في بعض الحالات قد تؤدي هذه التقنيات إلى تفاقم LCP وبالتالي تجربة المستخدم، بدلاً من مساعدتها.
التحميل الكسول الأصلي
لقد أصبح التحميل البطيء الأصلي معيارًا للمتصفح منذ عام 2019 ويتم تمكينه ببساطة عن طريق استخدام السمة loading="lazy" على عنصر الصورة. تنص مقالة بحثية جيدة نُشرت على موقع Google حول هذا الموضوع على أن 17% من مواقع الويب، ومعظمها تلك المستضافة في WordPress، تستخدم هذه الميزة. ومع ذلك، يمكن أن يضر ذلك أيضًا بنتيجة LCP.
تتدهور نتيجة LCP لصفحة الويب عندما ترث جميع الصور الموجودة على صفحة الويب بما في ذلك صورة البطل (عندما يتم تحديدها كأكبر صورة ذات محتوى بسبب حجمها) سلوك التحميل البطيء هذا.
كيفية اصلاحها؟
تحسب وظيفة التحميل الكسول الأصلية مسافة الصورة عن الجزء المرئي من نافذة العرض حتى تتمكن من تحميل الصور الموجودة أعلى الطية بشكل أسرع. ومع ذلك، تحتوي ميزة المتصفح الأصلية هذه أيضًا على وضع (يُعرف باسم "eager") يقوم بتحميل الصور على الفور بغض النظر عن بعدها عن نافذة العرض. يمكن استدعاء هذا الوضع باستخدام السمة loading="eager". الحل البسيط لهذه المشكلة هو وضع علامة على الصورة الرئيسية باستخدام keen بدلاً من lazy، أو عدم وضع علامة عليها على الإطلاق والسماح بتحميلها كصورة عادية.
التحميل البطيء باستخدام JavaScript
يتطلب التحميل البطيء باستخدام JavaScript المخصص أن يقوم المتصفح أولاً بتحميل JavaScript وتنفيذه ثم تحميل الصورة. عندما تكون الصورة الكبيرة هي الصورة الرئيسية داخل نافذة العرض عند تحميل الصفحة الأولى، فسوف يتم إطالة LCP بشكل طبيعي.
كيفية اصلاحها؟
الحل ببساطة هو عدم تحميل الصور الموجودة داخل نافذة العرض بشكل متكاسل عند التحميل لأول مرة. واجه فريق NE Digital هذه المشكلة بالضبط وكتب مقالة إعلامية عنها. توضح الصورة أدناه كيف استخدموا WebPageTest لمقارنة وقت التحميل قبل وبعد التغيير.
سترى الصف السفلي محملاً في 7 ثوانٍ بينما ينتظر الصف العلوي ويحمل صورة البطل (أكبر صورة ذات محتوى في هذه الحالة) بشكل متكاسل كعنصر أخير.
5. مشكلات العرض على جانب العميل
يشير عرض جانب العميل إلى إدارة صفحات الويب ليس على جانب الخادم ولكن بالكامل على متصفح المستخدم. يمكن أن يؤدي استخدام حزم JavaScript الضخمة أو منطق JavaScript دون المستوى الأمثل إلى ضعف LCP. علاوة على ذلك، يمكن أن تؤثر الموارد مثل SVG ومقاطع الفيديو والصور بشكل سيئ على LCP عند عرضها أعلى الطية الأولى (قبل التمرير).
كيفية اصلاحها؟
- ضغط وتقليل ملفات JS الهامة لتقليل وقت حظر JS.
- استخدم العرض من جانب الخادم بدلاً من العرض من جانب العميل عندما يكون ذلك ممكنًا.
- فكر في استخدام صفحات الجوال المسرّعة (AMP) للتخلص من الرسوم المتحركة والعناصر الثقيلة، مما يؤدي إلى تحسين أوقات التحميل.
- قم بتحميل الموارد الأساسية مسبقًا (راجع القسم السابق في هذه المقالة).
- إعطاء الأولوية لعمال خدمة المتصفح لتخزين الأصول مؤقتًا (عملية الخلفية المسؤولة عن التخزين المؤقت).
الخلاصة.
يُعد Largest Contentful Paint (LCP) أحد العناصر الأساسية في Core Web Vitals الذي يقيس سرعة تحميل صفحات الموقع الإلكتروني. وبشكل أكثر تحديدًا، يقيس مدى سرعة ظهور آخر عنصر في الصفحة على نافذة العرض.
إذا استغرق تحميل الصفحة أكثر من 2.5 ثانية، فيجب عليك التفكير في تحسين درجة LCP الخاصة بك. يمكنك استخدام الخيارات المذكورة في هذه المقالة للتحسين. ومع ذلك، استخدم WebPageTest أولاً لتحديد السبب الجذري لدرجة LCP غير المثالية.