-->
نصيحة اليوم :
اذا كنت سياسيا لا تكن عصبي و تغضب بسرعة | اشتركوا في قنواتنا على اليوتيوب
1 | 8
نصيحة اليوم : 25 نصيحة تهم كل شخص سياسي او يريد دخول السياسة او يتحدث مع سياسيين
2 | 8
فحص الروابط المعطلة اياك ان تضر موقعك في SEO و لماذا وجود الروابط المعطلة سيء للغاية ؟
3 | 8
جميع إصدارات iPhone 13 مع مواصفاتهم و هذا ثمن كل واحد فيهم
4 | 8
ألعاب كرة القدم بدون إنترنت مدهشة تعرف عليها حالا او ستندم على ذلك ؟
5 | 8
ارجاع الأرقام القديمة حتى لو مسحتها ألف مرة تعرف على السر حالا ؟
6 | 8
افضل تطبيقات للمونتاج و تعديل الفيديوهات بإحترافية للاندرويد
7 | 8
أفضل 3 ألعاب مدهشة و جديدة للأندرويد جربها قبل الجميع
8 | 8
نشر موقعك في Webmaster Yandex لزيادة زيارات موقعك و زيادة أرباحك من الاعلانات
موضوع مميز أو حصة جديدة:

مقارنة بين iPhone 7 plus vs Galaxy s8 plus vs Galaxy A20s vs Galaxy A30 التحديث الجديد من لعبة Freefire

مقارنة بين iPhone 7 plus vs Glaxy s8 plus vs Galaxy A20s vs Galaxy A30  مرحبا اصدقائي نلتقي مجددا على موقع كمثري و على قناة GOKP لمقارنة جدي...

حل مشكلة CLS أكثر من 0.25 التحول في التخطيط التراكمي الحل النهائي

حل مشكلة 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 

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

  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 .

مواضيع اخرى قد تهمك :

عمليات البحث ذات الصلة :  طريقة حل مشكلة cls اكثر من 0.25 بشكل نهائي مشكلة cls اكثر من 0.25 حل مشكلة cls أكثر من 0.25 بطريقة فعالة ومضمونة حل مشكلة cls سرعة المواقع حل مشكلة CLS وزيادة سرعة موقعك حل مشكلة في تسريع موقع علي بلوجر حل مشكلة CLS مشكلة lcp طريقة حل مشكلة cls اكثر من 0.25 بشكل نهائي و زيادة سرعة موقعك مشكلة CLS أكثر من 0.25 الأجهزة الجوّالة

شارك هذه الحصة أو الموضوع :

قد يهمك

KindlyPear | كمثري | Kemtheri

موقع كمثري Kemtheri يرحب بكم , إهتماماتك هنا كل ما يخص التقنية , التكنولوجيا , ألعاب الفيديو و الثقافة بأنواعها , مع تجارب و إختراع مختارة و حصرية

موقع كمثري