حل مشكلة CLS أكثر من 0.25 التحول في التخطيط التراكمي الحل النهائي
اكثرية مدراء المواقع الإلكترونية يواجهون بعض من هذه المشاكل و التي تعتبر امر مهم جدا اذا كانت مرتفعة و التي تحتسب بالميلي ثانية .
مشكلة 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
مثلا عند الدخول لأي موقع و وجدت خيارات مستطيلة كل واحدة بلون معين :
- مستطيل أحمر
- مستطيل أخضر
- مستطيل ازرق
- مستطيل اصفر
انت اردت تضغط على مستطيل اخضر و لكن في رمشة عين نزلت الصفحة قليلا فانت ستضعط على المستطيل الاحمر
و اذا ارتفعت الصفحة في رمشة عين فسيكون العكس انك ستضغط على المستطيل الازرق .
تخيل معي لو انا المعلنين يدفعون اموالهم لكي يجلبون زيارات اصلية و التفاعل معهم عبر منصة الاعلانات جوجل ادسنس و انت اردت ان تضغط على اخر مستطيل و تحت ذلك المستطيل اعلان ادسنس فالزائر سيضغط عن طريق الخطأ على ذلك الاعلان .
اذن اذا كان رقم CLS مرتفع و اعادت جوجل فحص موقعك فستطلب منك اصلاح المشكلة خاصة اذا كانت المشكلة قريبة من اعلان ادسنس .
مثال حي من جوجل حول الخطأ الذي يقع فيه الزوار اذا كانت لديك هذه المشكلة
اتضحت الصورة للكثير لنتابع ...
ماهو سبب مشكلة CLS ؟
هناك عدة اسباب و تحدث مشكلة CLS في العادة بسبب الأحجام الغيرِ المناسبة أبعاد المحتوى والشاشة لنأخذ امثلة كاملة
- الصور ليست مثبتة بالطول و العرض و المعنى هنا اضافة Width و Height
- مقاطع الفيديو ايضا اضافة لها ابعاد مثل الصور
- الإضافات والتكميلات مثل مربعات الرموزِ Awesome font
- القوائم غير مناسبة الأبعاد مثال : القائمة الافقية للتسميات
وما إلى ذلك من أنواع المحتوى المتداخل فوق بعضه البعض أو الذي لا يظهر بكل متزامن مع باقي موارد الصفحة
ماهو المعيار الزمني لمشكلة CLS ؟
هناك ثلاثة أنواع للتحوّل في التخطيط التراكمي :
- من 0 الى 0.1 جيد جدا
- من 0.1 الى 0.15 جيد
- من 0.15 الى 0.25 متوسط
- من 0.25 الى 0.35 يحتاج اصلاح عاجل بطيئ للغاية
حل مشكلة CLS Cumulative Layout Shift ؟
يتمثل حل مشكلة CLS في مراعاة :
أبعاد المظهر
أحجام أنواع المحتوى
بحيث لا يجب أن تكون أبعاد وأحجام المحتوى بشكل متداخل بعضها في بعض، ويساعد تحسين سرعة الموقع الإلكتروني على حل مشكلة CLS ، وتؤدي هذه الأخيرة إلى حل مشكلة من مشاكل مؤشرات أداء الويب الأساسية .
أيضا تعتبر القوالب المتجاوبة وغيرها من أنواع المحتوى المذكورة ، أفضل خيار يمكن الاعتماد عليه لـحل مشكلة CLS أكثر من 0.25 .
مواضيع اخرى قد تهمك :
