حلّ مُشْكِلَةُ CLS | أَكْثَرُ مِنْ 0.25

 

مشكلة CLS: أكثر من 0.25

من المشاكل التي تسبب تشويشا كبيرا للمشرفين مشكلة CLS أو Cumulative Layout Shift (CLS)، والتي تظهر على Search Console تحت قسم مؤشّرات أداء الويب الأساسية.

ورغم أنه قد يبدو من الوهلة الأولى أن مشكلة CLS معقّدة، وصعبة الحلّ، إلّا أنه عند التّعرف على مشكلة CLS عن قرب فإنه سيكون من الواضح جدّا معرفة طريقة حلّها وسهولتها أيضا.

مَاذَا تَعْنِي مُشْكِلَةُ CLS؟

مشكلة CLS، مشكلة سيـ إلـ إسـ أو مشكلة التحوّل في التّخطيط التّراكمي تتعلّق بالدّرجة الأولى بالمستخدم قبل أن تكون لها علاقة بـمحرّك البحث أو الزّاحف نفسه.

وهي عبارة عن التّحوّل المفاجئ في الصّفحة، بحيث وعلى حين غفلة، يقفز المحتوى ويتحرّك في لمح البصر على الشّاشة من الأعلى إلى الأسفل أو العكس... بحيث يسبّب تشويشا للزائر، وقد يتسبب له خطأ CLS في النّقر على زر أو مكان خاطإ.

مثال:

قمتَ بالدّخول إلى صفحة تضم قائمة من 10 اختيارات بشكل عمودي من 1 إلى 10

الاختيار رقم: 1

الاختيار رقم: 2

الاختيار رقم: 3

الاختيار رقم: 4

الاختيار رقم: 5

...

وعزمت على الضّغط على الخيار رقم 4، لكن وفي جزء من الثانية قبل النّقر، تحرّكت الصفحة إلى الأسفل وقمت بالنّقر عن طريق الخطإ على الخيار رقم 2.

هل اتّضحت الصّورة بعض الشيء؟ فلنرَ مثالا آخر، لكن هذه المرة سيكون أوضح بحول الله:

تم جلب المقطع من الموقع الرّسمي web.dev لأغراض تعليمية

تماما ! فما يظهر على المقطع هو مشكلة CLS ونتائجها التي تُسبّب بعضٌ منها، النّقر الغير المتعمّد، وهذا من الأمور السّلبية، بالنّسبة للمستخدم، مما يجعل مشكلة سـ لـ إسـ من الأمور السّلبية لـمحرّك البحث أيضا.

تذكّر: إذا قمت بالدّخول على صفحة من صفحات الإنترنت، وتبيّن أنها بقيت تتحرّك أكثر من 0,25 ثانية وتقوم بتحرّكات وقفزات غير عادية فاعلم أن CLS بطيء جدّا على تلك الصّفحة.

مَا سَبَبُ مُشْكِلَةِ CLS؟

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

تم جلب الصورة من الموقع الرّسمي web.dev لأغراض تعليمية

مَا المِعْيَارُ الزَّمَنِيُّ لِمُشْكِلَةِ CLS؟

هناك ثلاثة أنواع للتّحوّل في التخطيط التّراكمي:

- CLS جيّد
- CLS يحتاج إلى تحسين
- CLS بطيء

1- التحول في التخطيط التراكمي استغرق مدة زمنية أقل من 0,1 ثانية = جيّد

2- التحول في التخطيط التراكمي استغرق مدة زمنية تتراوح بين 0,1 ثانية و 0,25 ثانية = يحتاج إلى تحسين

3- التحول في التخطيط التراكمي استغرق مدة زمنية أكثر من 0,25 ثانية = بطيء

تم جلب الصورة من الموقع الرّسمي web.dev لأغراض تعليمية

مَا حَلُّ مُشْكِلَةِ CLS؟

يتمثل حل مشكلة CLS في مراعاة أبعاد المظهر أو القالب المُستخدَم، وأحجام أنواع المحتوى أيضا، بحيث لا يجب أن تكون أبعاد وأحجام المحتوى بشكل متداخل بعضها في بعض، ويساعد تحسين سرعة الموقع الإلكتروني على حل مشكلة CLS، وتؤدّي هذه الأخيرة إلى حل مشكلة من مشاكل مؤشّرات أداء الويب الأساسية.

أيضا تُعتبر القوالب المتجاوبة وغيرها من أنواع المحتوى المذكورة المتجاوبة والسّريعة، أفضل خيار يُمكن الاعتماد عليه لـحل مشكلة CLS: أكثر من 0.25.

➖➖➖➖➖➖➖➖➖

تحديث في بحث Google بتاريخ: الأربعاء، 17 فبراير 2021

هناك حدث في بحث Google قد يؤثر في بيانات موقعك.

المقاييس التي تحدد حدود LCP و FID و CLS ، والتي اعتادت أن تكون <(أقل من) ، تُعرّف الآن على أنها <= (أقل من أو تساوي). لذلك قد ترى تغييرًا في الحالات (للأفضل) في هذا التقرير.

The metrics defining the boundaries for LCP, FID, CLS, which used to be < (less than), are now defined as <= (less than or equal to). Therefore you might see a change in statuses (for the better) in this report.

➖➖➖➖➖➖➖➖➖

وهذا كلّ ما في الأمر، وإذا كان لا يزال هناك أي سؤال أو استفسار، لا يجب التّردّد في تركه في الرّدود في الأسفل، أو طرح السؤال مباشرة على منتدى مساعدة مجموعة خدمات "بحث Google" مباشرة عن طريق الرّابط التّالي:

• نشر ملصق جديد على منتدى مساعدة مجموعة خدمات "بحث Google"

كما قد يثير انتباهك الانتقال للآتي:

• الأسئلة الشائعة حول "مؤشرات الويب الأساسية وتجربة الصفحة"
• طريقة تحليل عنوان URL وفحصه | Search Console
• مشكلة LCP
• Cumulative Layout Shift (CLS)

تاريخ آخر تحديث: الثّلاثاء 2 نوفمبر 2021 | 5:35 | GMT+1