اكثرية مدراء المواقع الإلكترونية يواجهون بعض من هذه المشاكل و التي تعتبر امر مهم جدا اذا كانت مرتفعة و التي تحتسب بالميلي ثانية .

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

عند فحص موقعك في موقع التابع لمطوري جوجل فستكتشف اهم ما يبطئ موقعك و هنا يجب حل هذه المشاكل لانها تعتبر سيئة من ناحية السيو بمعنى اخر ان موقعك اذا كانت سرعته منخفضة فمحرك جوجل سيجعله يظهر في مراتب اخرى بدلا من المرتبة الاولى .  

من المشاكل التي تسبب انفعالا كبيرا للمشرفين على المواقع الإلكترونية هي  مشكلة CLS وهي اختصار لكلمة Cumulative Layout Shift و لمعرفة اهم ما المقصود منها بالضبط توجه للرابط التالي ستستفيد منه بشكل جيد مع اختصارات اخرى .

# شرح الخصائص المهمة ( FID , LCP, CLS , FCP ) لآداة جوجل Page Speed Insights

عندما يكون موقعك بطيء ستظهر على Search Console في قسم مؤشرات أداء الويب الأساسية و ستعرف اي المواضيع او المقالات التي بها هذه المشكلة .

قد يبدو من النظرة الأولى أن ملاحظة مشكلة CLS معقدة في نظر البعض و يعتبرونها صعبة الحل إلا أنه عند التّعرف على ماهي مشكلة CLS و تفهم ماهي هذه الكلمة و اذا كنت تعرف في لغة HTML و CSS فانت جاهز لحلها و لن ينتابك شعور سيء على غرار بعض المدونين الذين تنقصهم خبرة التعديل على مواقعهم الإلكترونية ، سيكون من الواضح جدا معرفة طريقة حلها وسهولتها للمحترفين 

ماذا تعني مشكلة CLS ؟

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

هل تؤثر مشكلة ارتفاع CLS على اعلانات ادسنس ؟

ليس هناك امر يؤكد من سياسات ادسنس على ان مشكلة CLS مخالفة لسياستها و لكن جوجل تنصح بشدة ان يكون الموقع متجاوب و ليست به اي اخطاء و يكون جذاب في التصميم .

شركة جوجل عندما تقوم بتقديم طلبك للدخول في شراكة مع جوجل ادسنس فهي ستقوم بفحص موقعك بشكل كامل مثال :

• المحتوى .
• التصميم.
• سرعة الموقع.
• اكواد جافا سكريبت امنة او لا .
• موقعك مهيء للسيو او لا .

نأخذ مثال بسيط حول مشكلة CLS 

مثلا عند الدخول لأي موقع و وجدت خيارات مستطيلة كل واحدة بلون معين :

1. مستطيل أحمر
2. مستطيل أخضر
3. مستطيل ازرق 
4. مستطيل اصفر 

انت اردت تضغط على مستطيل اخضر و لكن في رمشة عين نزلت الصفحة قليلا فانت ستضعط على المستطيل الاحمر 

و اذا ارتفعت الصفحة في رمشة عين فسيكون العكس انك ستضغط على المستطيل الازرق .

تخيل معي لو انا المعلنين يدفعون اموالهم لكي يجلبون زيارات اصلية و التفاعل معهم عبر منصة الاعلانات جوجل ادسنس و انت اردت ان تضغط على اخر مستطيل و تحت ذلك المستطيل اعلان ادسنس فالزائر سيضغط عن طريق الخطأ على ذلك الاعلان .

اذن اذا كان رقم CLS مرتفع و اعادت جوجل فحص موقعك فستطلب منك اصلاح المشكلة خاصة اذا كانت المشكلة قريبة من اعلان ادسنس مثال حي من جوجل حول الخطأ الذي يقع فيه الزوار اذا كانت لديك هذه المشكلة اتضحت الصورة للكثير لنتابع ... 

ماهو سبب مشكلة CLS ؟ 

هناك عدة اسباب و تحدث مشكلة CLS في العادة بسبب الأحجام الغيرِ المناسبة أبعاد المحتوى والشاشة لنأخذ امثلة كاملة :

• الصور ليست مثبتة بالطول و العرض و المعنى هنا اضافة Width و Height.
• مقاطع الفيديو ايضا اضافة لها ابعاد مثل الصور.
• الإضافات والتكميلات مثل مربعات الرموزِ Awesome font.
• القوائم غير مناسبة الأبعاد مثال : القائمة الافقية للتسميات.

وما إلى ذلك من أنواع المحتوى المتداخل فوق بعضه البعض أو الذي لا يظهر بكل متزامن مع باقي موارد الصفحة .

ماهو المعيار الزمني لمشكلة CLS ؟

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

1. من 0 الى 0.1  جيد جدا .
2. من 0.1 الى 0.15 جيد .
3. من 0.15 الى 0.25 متوسط.
4. من 0.25 الى 0.35 يحتاج اصلاح عاجل بطيئ للغاية .

حل مشكلة CLS Cumulative Layout Shift ؟

يتمثل حل مشكلة CLS في مراعاة : 

• أبعاد المظهر .
• أحجام أنواع المحتوى .

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

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